/* ===================================================================
   مجمع أراك طابا الطبي — Inner pages (about / clinics / doctors / contact / booking)
   Professional, calm variant of the brand — no promo/offer styling.
   Reuses tokens + components from style.css.
   =================================================================== */

/* ---------- Simple header (no promo ribbon) ---------- */
.site-header-inner{padding-block:0}
.header-inner-simple{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 0}
.main-nav-inner{display:flex;flex-wrap:wrap;gap:24px}
.main-nav-inner a.active{color:var(--teal)}
.main-nav-inner a.active::after{transform:scaleX(1)}
.header-actions{display:flex;align-items:center;gap:14px}

/* nav hamburger (mobile) */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;border:none;background:none;cursor:pointer;padding:0}
.nav-toggle span{display:block;width:100%;height:2.4px;border-radius:2px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s}
.nav-toggle.open span:nth-child(1){transform:translateY(7.4px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7.4px) rotate(-45deg)}

/* ---------- Page hero banner ---------- */
.page-hero{position:relative;overflow:hidden;padding:64px 0 56px;background:linear-gradient(150deg,var(--ink),var(--petrol) 65%,var(--teal));color:#eafafb}
.page-hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(55% 70% at 90% 0%, rgba(70,199,206,.24), transparent 60%),
    radial-gradient(45% 60% at 4% 100%, rgba(30,138,146,.22), transparent 60%),
    radial-gradient(rgba(255,255,255,.06) 1.2px, transparent 1.4px);
  background-size:auto,auto,26px 26px;
}
.page-hero::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:340px;height:340px;border-radius:50%;filter:blur(70px);
  background:rgba(70,199,206,.22);inset-block-start:-120px;inset-inline-end:8%;
  animation:float1 14s ease-in-out infinite;
}
.page-hero .container{position:relative;z-index:1}
.page-hero .eyebrow{color:var(--aqua)}
.page-hero .eyebrow::before{filter:brightness(0) saturate(100%) invert(78%) sepia(28%) saturate(541%) hue-rotate(126deg) brightness(97%) contrast(92%)}
.page-hero h1{color:#fff;font-size:clamp(1.9rem,4vw,2.9rem);margin-top:14px}
.page-hero p{color:#cfeaec;font-size:1.1rem;margin-top:14px;max-width:56ch}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:.86rem;color:#a9d0d3;margin-bottom:6px}
.breadcrumb a{color:#a9d0d3;transition:color .2s}
.breadcrumb a:hover{color:#fff}
.breadcrumb span{opacity:.6}

/* ---------- Generic content sections ---------- */
.content-section{padding:88px 0}
.content-section-alt{background:var(--alt)}

/* ---------- About: story block ---------- */
.story-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.story-copy h2{font-size:clamp(1.7rem,3.2vw,2.4rem);margin-bottom:16px}
.story-copy p{color:var(--muted);font-size:1.05rem;margin-bottom:16px}
.story-media{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/5;max-height:520px}
.story-media img{width:100%;height:100%;object-fit:cover}

/* ---------- Values grid ---------- */
.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.value-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:30px 24px;box-shadow:var(--shadow-sm);text-align:center;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.value-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.value-icon{width:58px;height:58px;margin:0 auto 18px;display:grid;place-items:center;border-radius:16px;background:var(--mint);color:var(--teal);font-size:1.6rem}
.value-card h3{font-size:1.1rem;margin-bottom:8px}
.value-card p{color:var(--muted);font-size:.92rem}

/* ---------- Timeline / mission-vision ---------- */
.mv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.mv-card{background:linear-gradient(155deg,var(--teal),var(--ink));border-radius:var(--r-lg);padding:34px 30px;color:#eafafb;box-shadow:var(--shadow-lg)}
.mv-card h3{color:#fff;font-size:1.25rem;margin-bottom:10px;display:flex;align-items:center;gap:10px}
.mv-card p{color:#d7f0f1;font-size:.98rem}

/* ---------- Clinics (detailed) ---------- */
.clinics-list{display:grid;gap:22px}
.clinic-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  padding:26px 28px;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.clinic-row:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.clinic-icon{width:64px;height:64px;flex:none;display:grid;place-items:center;border-radius:18px;background:var(--mint);color:var(--teal)}
.clinic-icon svg{width:32px;height:32px}
.clinic-body h3{font-size:1.2rem;margin-bottom:6px}
.clinic-body p{color:var(--muted);font-size:.95rem}
.clinic-cta{flex:none}
@media (max-width:760px){
  .clinic-row{grid-template-columns:auto 1fr;padding:22px 20px}
  .clinic-cta{grid-column:1 / -1}
}

/* ---------- Doctors / team departments ---------- */
.dept-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.dept-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:30px 26px;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.dept-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.dept-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.dept-ic{width:52px;height:52px;flex:none;display:grid;place-items:center;border-radius:15px;background:linear-gradient(135deg,var(--teal),var(--teal-bright));color:#fff;font-size:1.3rem}
.dept-head h3{font-size:1.1rem}
.dept-card p{color:var(--muted);font-size:.94rem;margin-bottom:14px}
.dept-tags{display:flex;flex-wrap:wrap;gap:8px}
.dept-tag{font-size:.8rem;font-weight:600;color:var(--teal);background:var(--mint);padding:5px 12px;border-radius:var(--r-pill)}
.team-note{background:var(--mint);border:1px solid var(--mint-200);border-radius:var(--r-md);padding:22px 26px;display:flex;gap:14px;align-items:flex-start;margin-top:36px}
.team-note span{font-size:1.4rem;flex:none}
.team-note p{color:var(--ink);font-size:.96rem}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:start}
.contact-cards{display:grid;gap:16px}
.contact-card{display:flex;gap:16px;align-items:flex-start;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:22px 24px;box-shadow:var(--shadow-sm)}
.contact-card .cc-ic{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:13px;background:var(--mint);color:var(--teal);font-size:1.2rem}
.contact-card h4{font-family:var(--font-display);color:var(--ink);font-size:1.02rem;margin-bottom:4px}
.contact-card p{color:var(--muted);font-size:.94rem}
.contact-map{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md);border:6px solid #fff}
.contact-map iframe{width:100%;height:100%;min-height:420px;border:0;filter:saturate(.95)}

/* ---------- Booking page ---------- */
.booking-page-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:50px;align-items:start}
.booking-side h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:14px}
.booking-side>p{color:var(--muted);font-size:1.05rem;margin-bottom:26px}
.booking-steps{list-style:none;display:grid;gap:18px;margin-bottom:30px}
.booking-steps li{display:flex;gap:14px;align-items:flex-start}
.bs-num{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--teal-bright));color:#fff;font-family:var(--font-display);font-weight:700;font-size:.95rem}
.booking-steps h4{font-size:1rem;margin-bottom:3px;color:var(--ink)}
.booking-steps p{color:var(--muted);font-size:.9rem}
.booking-page-grid .booking-card{position:sticky;top:100px}

@media (max-width:980px){
  .story-grid,.contact-grid,.booking-page-grid{grid-template-columns:1fr;gap:38px}
  .values-grid,.dept-grid{grid-template-columns:repeat(2,1fr)}
  .mv-grid{grid-template-columns:1fr}
  .booking-page-grid .booking-card{position:static}
}
@media (max-width:600px){
  .content-section{padding:56px 0}
  .page-hero{padding:44px 0 40px}
  .values-grid,.dept-grid{grid-template-columns:1fr}
  .clinic-row{padding:20px 16px}
}

/* ---------- Responsive nav (mobile dropdown) ---------- */
@media (max-width:980px){
  .nav-toggle{display:flex}
  .main-nav-inner{
    display:flex!important;position:absolute;inset-inline:0;top:100%;z-index:49;
    flex-direction:column;gap:0;background:#fff;border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-md);
    max-height:0;overflow:hidden;opacity:0;
    transition:max-height .35s var(--ease),opacity .25s var(--ease);
  }
  .main-nav-inner.open{max-height:520px;opacity:1}
  .main-nav-inner a{padding:14px 22px;border-bottom:1px solid var(--line)}
  .main-nav-inner a::after{display:none}
  .btn-header{padding:10px 18px;font-size:.92rem}
}

/* =================================================================
   Home page (hero2) — dazzling entry point for the full site
   ================================================================= */
.hero2{position:relative;overflow:hidden;padding:96px 0 110px}
.hero2-bg{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(60% 70% at 92% 0%, rgba(70,199,206,.26), transparent 60%),
    radial-gradient(55% 60% at 2% 100%, rgba(30,138,146,.18), transparent 60%),
    radial-gradient(rgba(30,138,146,.09) 1.3px, transparent 1.5px);
  background-size:auto,auto,24px 24px;
}
.hero2::before,.hero2::after{content:"";position:absolute;z-index:0;border-radius:50%;filter:blur(64px);pointer-events:none}
.hero2::before{width:420px;height:420px;inset-block-start:-120px;inset-inline-start:-100px;background:rgba(70,199,206,.22);animation:float1 15s ease-in-out infinite}
.hero2::after{width:320px;height:320px;inset-block-end:-100px;inset-inline-end:4%;background:rgba(43,179,187,.18);animation:float2 17s ease-in-out infinite}
.hero2-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hero2-copy h1{font-size:clamp(2.2rem,4.8vw,3.6rem);letter-spacing:-.01em;margin-top:16px}
.hero2-copy h1 .accent{
  background:linear-gradient(100deg,var(--teal),var(--aqua));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  position:relative;
}
.hero2-copy .lead{margin:20px 0 30px;font-size:1.15rem;color:var(--muted);max-width:44ch}
.hero2-cta{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:34px}
.hero2-stats{display:flex;gap:40px;flex-wrap:wrap}
.hero2-stats .stat strong{display:block;font-family:var(--font-display);font-size:2.1rem;line-height:1;background:linear-gradient(120deg,var(--teal),var(--aqua));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero2-stats .stat span{font-size:.86rem;color:var(--muted)}
.hero2-media{position:relative}
.hero2-media .media-frame{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/5;max-height:560px}
.hero2-media .media-frame img{width:100%;height:100%;object-fit:cover}
.hero2-media .media-frame::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(15,74,82,.55),transparent 45%)}
.hero2-float{
  position:absolute;z-index:3;display:inline-flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);padding:12px 18px;border-radius:var(--r-md);box-shadow:var(--shadow-lg);
  font-family:var(--font-display);
}
.hf-top{top:-18px;inset-inline-start:-18px;animation:bob 5s ease-in-out infinite}
.hf-bottom{bottom:-18px;inset-inline-end:-18px;animation:bob 5s ease-in-out infinite .8s}
.hf-num{font-weight:700;font-size:1.35rem;color:var(--teal);line-height:1}
.hf-txt{font-size:.78rem;color:var(--ink);line-height:1.3;max-width:12ch}

/* ---------- Home: highlight cards ---------- */
.home-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.home-card{
  position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  padding:30px 24px;box-shadow:var(--shadow-sm);overflow:hidden;text-align:center;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;
}
.home-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--teal),var(--aqua));transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.home-card:hover{transform:translateY(-8px) scale(1.015);box-shadow:0 26px 50px -20px rgba(15,74,82,.35);border-color:transparent}
.home-card:hover::before{transform:scaleX(1)}
.home-card .value-icon{margin-inline:auto}

/* ---------- Tilt/glow hover polish for existing inner-page cards ---------- */
.value-card,.dept-card,.clinic-row,.contact-card{transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.value-card:hover,.dept-card:hover{box-shadow:0 26px 50px -22px rgba(15,74,82,.32)}

/* =================================================================
   Gallery
   ================================================================= */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.gallery-grid .g-tall{grid-row:span 2}
.gallery-item{position:relative;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm);cursor:zoom-in}
.gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.gallery-item::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(15,74,82,.55),transparent 55%);opacity:0;transition:opacity .3s}
.gallery-item span{position:absolute;z-index:1;inset-inline-start:16px;inset-block-end:14px;color:#fff;font-family:var(--font-display);font-weight:600;font-size:.92rem;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
.gallery-item:hover img{transform:scale(1.08)}
.gallery-item:hover::after,.gallery-item:hover span{opacity:1;transform:translateY(0)}

#lightbox{
  position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(10,25,27,.92);backdrop-filter:blur(6px);cursor:zoom-out;padding:30px;
}
#lightbox.open{display:flex}
#lightbox img{max-width:min(92vw,1000px);max-height:86vh;border-radius:var(--r-md);box-shadow:var(--shadow-lg);object-fit:contain}

/* =================================================================
   Testimonials slider
   ================================================================= */
.testi-wrap{position:relative}
.testi-track{
  display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 4px 20px;
  scrollbar-width:none;
}
.testi-track::-webkit-scrollbar{display:none}
.testimonial-card{
  flex:0 0 min(360px,86vw);scroll-snap-align:start;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  padding:30px 28px 26px;box-shadow:var(--shadow-sm);position:relative;
}
.testimonial-card::before{content:"\201D";position:absolute;top:6px;inset-inline-start:22px;font-family:Georgia,serif;font-size:4.2rem;color:var(--teal-bright);opacity:.22;line-height:1}
.testi-controls{display:flex;justify-content:center;gap:14px;margin-top:8px}
.testi-btn{
  width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:#fff;
  display:grid;place-items:center;color:var(--teal);cursor:pointer;transition:background .2s,color .2s,transform .2s;
}
.testi-btn:hover{background:var(--teal);color:#fff;transform:translateY(-2px)}
.testi-btn svg{width:20px;height:20px}

/* =================================================================
   FAQ accordion
   ================================================================= */
.faq-list{display:grid;gap:14px;max-width:820px;margin-inline:auto}
.faq-item{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow .3s}
.faq-item.open{box-shadow:var(--shadow-md);border-color:var(--teal-bright)}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 24px;cursor:pointer;font-family:var(--font-display);font-weight:600;color:var(--ink);
}
.faq-q .fq-ic{flex:none;width:28px;height:28px;border-radius:50%;background:var(--mint);color:var(--teal);display:grid;place-items:center;font-size:1.1rem;transition:transform .3s var(--ease),background .3s,color .3s}
.faq-item.open .fq-ic{background:var(--teal);color:#fff;transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.faq-item.open .faq-a{max-height:280px}
.faq-a p{padding:0 24px 22px;color:var(--muted);font-size:.96rem}

/* ---------- Footer rating chip ---------- */
.footer-rating{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:.88rem;color:#cfe9ea}
.footer-rating .stars{color:#F2B441;letter-spacing:1px}
.footer-rating b{color:#fff;font-family:var(--font-display)}

@media (max-width:980px){
  .hero2-grid{grid-template-columns:1fr;gap:44px}
  .home-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:600px){
  .hero2{padding:52px 0 64px}
  .hero2-cta{flex-direction:column}
  .home-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid .g-tall{grid-row:span 1}
  .testimonial-card{padding:24px 22px 20px}
}