/* ================================
   Gallery Page Styles
   ================================ */

/* Solid, sticky navbar on this inner page */
.gallery-page .navbar{
    position: sticky;
    top: 0;
    background: linear-gradient(180deg, rgba(26,76,158,0.95), rgba(7,44,107,0.95));
    backdrop-filter: blur(8px) saturate(140%);
    z-index: 1000;
    box-shadow: 0 8px 24px rgba(2,6,23,.12);
  }
  .gallery-page .logo-text,
  .gallery-page .nav-links a { color: #fff; }
  .gallery-page .nav-links a:hover { color: #cfe1ff; }
  
  /* ===== Hero / Intro ===== */
  .gallery-hero{
    padding: 84px 0 40px;
    background:
      radial-gradient(1000px 360px at 15% -10%, rgba(26,76,158,.18), transparent 60%),
      radial-gradient(1000px 360px at 85% 110%, rgba(7,44,107,.15), transparent 60%),
      var(--soft-bg, #f8fafc);
    border-bottom: 1px solid var(--card-border, #eef2f7);
  }
  .gallery-hero-inner{
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
  }
  .gallery-title{
    font-size: clamp(28px, 4vw, 40px);
    margin: 8px 0 10px;
    color: var(--brand, #1a4c9e); 
    font-weight: 800;
    text-align: center;
  font-size: 2rem;                /* Larger heading */
  }
  .gallery-sub{
    color: var(--muted, #667085);
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.6;
  }
  
  /* ===== Grid ===== */
  .gallery-section{ padding: 30px 0 64px; }
  
  .gallery-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  @media (min-width: 700px){
    .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 1024px){
    .gallery-grid{ grid-template-columns: repeat(3, 1fr); }
  }
  
  /* Card */
  .g-card{
    border: 1px solid var(--card-border, #eef2f7);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 24px rgba(2,6,23,.06);
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .g-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(2,6,23,.10);
  }
  .g-thumb{
    position: relative;
    aspect-ratio: 16/11;
    overflow: hidden;
  }
  .g-thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .g-overlay{
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,.0) 60%);
    opacity: 0; transition: opacity .2s ease;
  }
  .g-card:hover .g-overlay{ opacity: 1; }
  
  .g-meta{
    padding: 12px 14px;
    display: flex; justify-content: space-between; align-items: center;
  }
  .g-title{
    font-weight: 700;
    font-size: 15px;
  }
  .g-meta {
    padding: 10px 14px;
    text-align: center;
  }
  .g-title {
    font-weight: 600;
    font-size: 15px;
    color: #222;
  }
   */
  .icon-btn{
    width: 36px; height: 36px;
    border-radius: 999px;
    border: 1px solid var(--card-border, #eef2f7);
    background: #fff;
    display: grid; place-items: center;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .icon-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(2,6,23,.10);
  }
  
  /* CTA row under grid */
  .gallery-ctas{
    text-align: center;
    margin-top: 20px;
  }
  
  /* ===== Lightbox ===== */
  .backdrop{ /* uses your global lightbox base if present; included here for isolation */
    position: fixed; inset: 0;
    background: rgba(0,0,0,.7);
    display: flex; align-items: center; justify-content: center;
    padding: 20px; z-index: 1050;
    opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  .backdrop.show{ opacity: 1; pointer-events: auto; }
  
  .img-modal{
    background: #000;
    border-radius: 16px;
    max-width: 1100px; width: 100%;
    position: relative; overflow: hidden;
  }
  .img-modal img{ width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
  .img-modal .close{
    position: absolute; top: 10px; right: 10px;
    background: #fff; border: none; border-radius: 8px;
    padding: 6px 10px; font-weight: 700; cursor: pointer;
  }
  .light-caption{
    color: #e5e7eb; font-size: 14px; padding: 8px 12px 12px;
    background: #000;
  }
  
    /* ===== Clinic Section Title Enhancement ===== */
.gallery-title h3 {
  text-align: center;
  font-size: 2rem;                /* Larger heading */
  font-weight: 800;               /* Bold and strong */
  color: var(--brand, #1a4c9e);   /* Use your brand color */
  margin-bottom: 24px;            /* Add breathing room below */
  letter-spacing: 0.3px;
}