/* =============================================================
   custom.css — Tyagmurti Trust Website
   All styles for this project live here.
   Sections:
     1. CSS Variables & Reset
     2. Base / Body
     3. Primary Navbar
     4. Secondary Navbar
     5. Page Heading Banners
     6. Doctor Cards & Grid
     7. Gallery (Masonry)
     8. Footer
     9. Utilities / Deprecated
   ============================================================= */


/* ─────────────────────────────────────────────────────────────
   1. CSS VARIABLES & RESET
   ───────────────────────────────────────────────────────────── */
   :root {
    --brand-red:              rgb(188, 9, 9);
    --secondary-navbar-bg:    #d6d6d6;
    --secondary-navbar-hover: #c2c2c2;
    --secondary-navbar-active:#b0b0b0;
    --secondary-link-color:   #222;
  }
  
  html, body {
    height: 100%;
    margin: 0;
  }
  
  
  /* ─────────────────────────────────────────────────────────────
     2. BASE / BODY
     (Merged from style.css)
     ───────────────────────────────────────────────────────────── */
  body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    display: flex;
    flex-direction: column;
  
    /* Default top padding for pages WITHOUT a secondary navbar.
       Pages with a secondary navbar override this dynamically
       via navbar-loader.js */
    padding-top: 70px;
  }
  
  footer {
    margin-top: auto;
  }
  
  /* Offset anchor scrolling so fixed navbars don't overlap headings.
     Pages with a secondary navbar override this dynamically via JS. */
  section[id] {
    scroll-margin-top: 80px;
  }
  
  
  /* ─────────────────────────────────────────────────────────────
     3. PRIMARY NAVBAR
     ───────────────────────────────────────────────────────────── */
  
  /* Underline indicator for the active page link */
  #primaryNavbar .nav-link {
    position: relative;
    font-weight: 500;
  }
  
  #primaryNavbar .nav-link.active {
    background-color: transparent !important;
  }
  
  #primaryNavbar .nav-link.active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 3px;
    background-color: var(--brand-red);
    border-radius: 2px;
  }
  
  
  /* ─────────────────────────────────────────────────────────────
     4. SECONDARY NAVBAR
     Fixed just below the primary navbar via navbar-loader.js.
     ───────────────────────────────────────────────────────────── */
  #secondaryNavbar {
    position: fixed;
    /* `top` is set dynamically by navbar-loader.js */
    width: 100%;
    z-index: 1029; /* one below Bootstrap's fixed-top (1030) */
    background-color: var(--secondary-navbar-bg) !important;
  }
  
  #secondaryNavbar .navbar-brand,
  #secondaryNavbar .nav-link {
    color: #333;
  }
  
  /* Link states */
  .side-nav .nav-link {
    color: var(--secondary-link-color);
    padding: 0.65rem 1rem;
    border-radius: 6px;
    margin: 4px 0;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  
  .side-nav .nav-link:hover {
    background-color: var(--secondary-navbar-hover);
    color: #000;
  }
  
  .side-nav .nav-link.active {
    background-color: var(--secondary-navbar-active);
    color: #000;
    font-weight: 600;
  }
  
  
  /* ─────────────────────────────────────────────────────────────
     5. PAGE HEADING BANNERS
     Full-width hero image at the top of Hospital / OAH / School.
     ───────────────────────────────────────────────────────────── */
  
  /* Shared overlay that darkens every banner image */
  .heading-overlay {
    background: rgba(0, 0, 0, 0.45);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 4rem 0;
  }
  
  /* Shared text styles used by all three banners */
  .hospital-name,
  .oah-name,
  .school-name {
    color: #ffffff;
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
  }
  
  .hospital-tagline,
  .oah-tagline,
  .school-tagline {
    color: #eaeaea;
    font-size: 1.1rem;
    font-weight: 400;
  }
  
  /* --- Hospital banner --- */
  .hospital-heading {
    background-image: url("../images/hospital_images/hospital_page_heading.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 300px;
    display: flex;
    align-items: center;
  }
  
  /* --- Old Age Home banner --- */
  .old-age-home-heading {
    background-image: url("../images/oah_images/oah_page_heading.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 300px;
    display: flex;
    align-items: center;
  }
  
  /* --- School banner --- */
  .school-heading {
    background-image: url("../images/school_images/school_page_heading.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 300px;
    display: flex;
    align-items: center;
  }
  
  /* Responsive: shrink banner height on small screens */
  @media (max-width: 768px) {
    .hospital-heading,
    .old-age-home-heading,
    .school-heading {
      min-height: 220px;
    }
  
    .hospital-name,
    .oah-name,
    .school-name {
      font-size: 2rem;
    }
  
    .hospital-tagline,
    .oah-tagline,
    .school-tagline {
      font-size: 1rem;
    }
  }
  
  
  /* ─────────────────────────────────────────────────────────────
     6. DOCTOR CARDS & GRID
     ───────────────────────────────────────────────────────────── */
  .doctors-row {
    display: flex;
    flex-wrap: wrap;
  }
  
  .doctor-col {
    width: 20%; /* 5 cards per row on large screens */
    padding: 12px;
  }
  
  .doctor-card img {
    height: 180px;
    object-fit: cover;
  }
  
  @media (max-width: 992px) {
    .doctor-col { width: 33.33%; } /* 3 per row */
  }
  
  @media (max-width: 576px) {
    .doctor-col { width: 50%; }    /* 2 per row */
  }
  
  
  /* ─────────────────────────────────────────────────────────────
     7. GALLERY (MASONRY LAYOUT)
     ───────────────────────────────────────────────────────────── */
  .gallery-masonry {
    column-count: 3;
    column-gap: 1.5rem;
  }
  
  .gallery-item {
    break-inside: avoid;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
  }
  
  .gallery-item img {
    width: 100%;
    display: block;
    border-radius: 4px;
  }
  
  /* Caption: hidden by default, revealed on hover (desktop only) */
  .gallery-item figcaption {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.95rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 1rem;
  }
  
  @media (hover: hover) {
    .gallery-item:hover figcaption {
      opacity: 1;
    }
  }
  
  /* Mobile: single column, captions always visible below image */
  @media (max-width: 768px) {
    .gallery-masonry {
      column-count: 1;
    }
  
    .gallery-item figcaption {
      position: static;
      background: none;
      color: #333;
      opacity: 1;
      font-size: 0.9rem;
      padding: 0.5rem 0 0;
      text-align: left;
    }
  }
  
  
  /* ─────────────────────────────────────────────────────────────
     8. FOOTER
     (Bootstrap handles most footer styles; add overrides here)
     ───────────────────────────────────────────────────────────── */
  /* No custom overrides needed currently */