/* ═══════════════════════════════════════════════
   MED-LINE — Master Fix & Design System v5
   Complete ground-up fix for all layout issues
   © 2026 Stan Paraclete
═══════════════════════════════════════════════ */

/* ══════════════════════════════
   1. LOGO
══════════════════════════════ */
.nav-logo img, .footer-logo img {
  background: transparent !important;
  mix-blend-mode: normal;
}
.footer-logo img {
  height: 44px !important; width: auto !important;
  filter: brightness(0) invert(1) !important;
  opacity: 0.75 !important; display: block !important;
}

/* ══════════════════════════════
   2. SCROLL PROGRESS BAR
   (Authoritative definition in award.css — kept here for fallback)
══════════════════════════════ */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px;
  background: var(--gold); z-index: 9999;
  width: 0%; transition: width 0.1s linear;
}

/* ══════════════════════════════
   2b. BUTTONS — Primary & Outline
   Used in hero actions and throughout pages
══════════════════════════════ */
.btn-primary {
  font-family: var(--sans);
  font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: white; background: var(--navy);
  padding: 14px 34px;
  display: inline-block;
  border: 1px solid var(--navy);
  transition: background 0.25s, color 0.25s, border-color 0.25s;
  cursor: pointer;
}
.btn-primary:hover { background: var(--gold); border-color: var(--gold); color: white; }

.btn-outline {
  font-family: var(--sans);
  font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--navy); background: transparent;
  padding: 13px 33px;
  display: inline-block;
  border: 1px solid var(--navy);
  transition: background 0.25s, color 0.25s, border-color 0.25s;
  cursor: pointer;
}
.btn-outline:hover { background: var(--navy); color: white; }

/* Outline button on dark/navy backgrounds */
.section--navy .btn-outline,
#hero .btn-outline,
body.light-hero .btn-outline {
  color: white; border-color: rgba(255,255,255,0.55);
}
.section--navy .btn-outline:hover,
#hero .btn-outline:hover,
body.light-hero .btn-outline:hover {
  background: white; color: var(--navy); border-color: white;
}

/* Standalone .btn-dark (outside .cta-banner) */
.btn-dark {
  font-family: var(--sans);
  font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: white; background: var(--navy);
  padding: 14px 34px;
  display: inline-block;
  border: 1px solid var(--navy);
  transition: background 0.25s;
  cursor: pointer;
}
.btn-dark:hover { background: rgba(12,31,63,0.8); }

/* ══════════════════════════════
   3. HERO — Complete rewrite
   
   The problem: portrait images (960×1280) in a 48%-wide
   column at 100vh get massively cropped.
   
   Solution: 
   - Homepage: 55/45 split, portrait image shows full body
     by allowing overflow and using object-position top
   - Inner pages: use a proper inner-hero dark banner instead
══════════════════════════════ */

/* HOME HERO - proper 2-col layout */
#hero {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 52% 48% !important;
  grid-template-rows: 1fr !important;
  height: 100vh !important;
  min-height: 680px !important;
  overflow: hidden !important;
  background: var(--ivory) !important;
  padding: 0 !important;
}

/* Content — left col, bottom aligned */
.hero-content {
  grid-column: 1 !important; grid-row: 1 !important;
  position: relative !important; z-index: 5 !important;
  display: flex !important; flex-direction: column !important;
  justify-content: flex-end !important;
  padding: 72px 4vw 8vh 6vw !important;
  background: transparent !important; min-width: 0 !important;
}

/* Portrait — right col */
.hero-portrait {
  grid-column: 2 !important; grid-row: 1 !important;
  position: relative !important;
  height: 100% !important; overflow: hidden !important;
}
.hero-portrait img {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
}
/* Fade portrait left edge into ivory */
.hero-portrait::before {
  content: '' !important; position: absolute !important;
  inset: 0 !important; z-index: 1 !important; pointer-events: none !important;
  background: linear-gradient(
    to right,
    var(--ivory) 0%,
    rgba(244,241,236,0.35) 25%,
    transparent 55%
  ) !important;
}

/* Scroll hint */
.hero-scroll {
  position: absolute !important; left: 6vw !important;
  bottom: 2.2rem !important; z-index: 10 !important;
  writing-mode: vertical-rl !important;
  font-family: var(--sans) !important;
  font-size: 0.58rem !important; font-weight: 300 !important;
  letter-spacing: 0.22em !important; text-transform: uppercase !important;
  color: var(--gray) !important;
  display: flex !important; align-items: center !important; gap: 10px !important;
}
.hero-scroll::after {
  content: '' !important; width: 1px !important; height: 44px !important;
  background: var(--gray-lt) !important;
}

/* Nav dots — right edge */
.hero-dots {
  position: absolute !important; right: 1.5vw !important;
  top: 50% !important; transform: translateY(-50%) !important;
  z-index: 10 !important; display: flex !important;
  flex-direction: column !important; gap: 9px !important;
}

/* Rotating titles */
.hero-titles {
  position: relative !important; min-height: 7em !important;
  margin-bottom: 2rem !important; overflow: hidden !important;
}
.hero-title {
  position: absolute !important; top: 0 !important; left: 0 !important;
  width: 100% !important;
  font-family: 'Libre Baskerville', Georgia, serif !important;
  font-size: clamp(2.8rem, 5.2vw, 5.6rem) !important;
  font-weight: 400 !important; line-height: 1.07 !important;
  color: var(--navy) !important;
  opacity: 0 !important; transform: translateY(22px) !important;
  transition: opacity 0.65s ease, transform 0.65s ease !important;
  white-space: normal !important; word-break: keep-all !important;
  pointer-events: none !important;
}
.hero-title.active {
  opacity: 1 !important; transform: translateY(0) !important;
  pointer-events: auto !important;
}
.hero-title em { font-style: italic !important; color: var(--gold) !important; }

/* ── INNER PAGE HEROES ──
   About, Services, Gallery, Contact use a dark banner hero
   instead of the portrait-grid layout */
body.light-hero #hero {
  /* Switch to a full-bleed image with dark overlay */
  grid-template-columns: 1fr !important;
  height: 82vh !important;
  min-height: 560px !important;
  background: var(--navy) !important;
  align-items: flex-end !important;
}

/* On inner pages, portrait fills the whole hero as bg */
body.light-hero .hero-portrait {
  grid-column: 1 !important; grid-row: 1 !important;
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
}
body.light-hero .hero-portrait img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  object-position: center 25% !important;
  filter: brightness(0.45) !important;
}
/* No ivory gradient on inner pages — dark overlay instead */
body.light-hero .hero-portrait::before {
  background: linear-gradient(
    to top,
    rgba(12,31,63,0.85) 0%,
    rgba(12,31,63,0.3) 50%,
    transparent 100%
  ) !important;
}

/* Inner page content — spans full width, sits at bottom */
body.light-hero .hero-content {
  grid-column: 1 !important; grid-row: 1 !important;
  position: relative !important; z-index: 5 !important;
  padding: 0 6vw 7vh !important;
  max-width: 100% !important; justify-content: flex-end !important;
}

/* Inner page hero titles — white */
body.light-hero .hero-title { color: white !important; }
body.light-hero .hero-title em { color: var(--gold-light) !important; }
body.light-hero .hero-eyebrow { color: var(--gold-light) !important; }
body.light-hero .hero-tagline { color: rgba(255,255,255,0.7) !important; }
body.light-hero .hero-dots { display: none !important; }
body.light-hero .hero-scroll { display: none !important; }

/* ── CONTACT page: landscape image ── */
body.light-hero .hero-portrait img[src*="adenta_entrance"],
body.light-hero .hero-portrait img[src*="botwe_entrance"] {
  object-position: center 40% !important;
  filter: brightness(0.4) !important;
}

/* ── SERVICES page: lab image ── */
body.light-hero .hero-portrait img[src*="lab"] {
  object-position: center 20% !important;
}

/* ══════════════════════════════
   4. GALLERY HERO (special)
══════════════════════════════ */
.gallery-hero-section {
  min-height: 72vh !important; height: 72vh !important;
}

/* ══════════════════════════════
   5. NAV: consistent
══════════════════════════════ */
/* Nav layout handled by nav.css */

/* ══════════════════════════════
   6. FOOTER
══════════════════════════════ */
footer {
  background: var(--navy);
  padding: 3.5rem 6vw;
  display: grid;
  grid-template-columns: 180px 1fr 180px;
  align-items: center; gap: 2rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.footer-logo { display: flex; align-items: center; }
.footer-logo img {
  height: 44px !important; width: auto !important;
  filter: brightness(0) invert(1) !important;
  opacity: 0.7 !important; display: block !important;
}
@media (max-width: 900px) {
  footer { grid-template-columns: 1fr !important; text-align: center; }
  .footer-logo { justify-content: center; }
  .footer-right { text-align: center; }
}

/* ══════════════════════════════
   7. CEO STRIP
══════════════════════════════ */
.ceo-strip { display: grid; grid-template-columns: 1fr 1fr; min-height: 80vh; overflow: hidden; }
.ceo-photo { overflow: hidden; position: relative; }
.ceo-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
@media (max-width: 900px) { .ceo-strip { grid-template-columns: 1fr; } .ceo-photo { min-height: 60vw; } }

/* ══════════════════════════════
   8. MOSAIC
══════════════════════════════ */
.mosaic {
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 300px 300px; gap: 3px; overflow: hidden;
}
.mosaic-item { overflow: hidden; position: relative; background: var(--cream); }
.mosaic-item:first-child { grid-row: 1 / 3; }
.mosaic-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease, filter 0.4s; filter: grayscale(12%); }
.mosaic-item:hover img { transform: scale(1.05); filter: grayscale(0%); }
@media (max-width: 900px) {
  .mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .mosaic-item:first-child { grid-row: auto; }
  .mosaic-item { min-height: 220px; }
}
@media (max-width: 640px) { .mosaic { grid-template-columns: 1fr; } }

/* ══════════════════════════════
   9. GALLERY PANES
══════════════════════════════ */
.gallery-pane { display: none; }
.gallery-pane.active {
  display: block; min-height: 400px;
  animation: fadePane 0.35s ease;
}
@keyframes fadePane { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.m-item { background: var(--cream); break-inside: avoid; margin-bottom: 6px; overflow: hidden; }
.m-item img { width: 100%; display: block; transition: transform 0.5s ease, filter 0.3s; filter: grayscale(15%); }
.m-item:hover img { transform: scale(1.03); filter: grayscale(0%); }

/* ══════════════════════════════
   10. MOBILE HERO
══════════════════════════════ */
@media (max-width: 860px) {
  /* HOME: stack portrait behind content */
  body:not(.light-hero) #hero {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    height: 100svh !important;
  }
  body:not(.light-hero) .hero-portrait {
    grid-column: 1 !important; grid-row: 1 !important;
    position: absolute !important; inset: 0 !important;
  }
  body:not(.light-hero) .hero-portrait::before {
    background: linear-gradient(
      to bottom,
      rgba(244,241,236,0.75) 0%,
      rgba(244,241,236,0.92) 55%,
      var(--ivory) 100%
    ) !important;
  }
  body:not(.light-hero) .hero-content {
    grid-column: 1 !important; grid-row: 1 !important;
    padding: 72px 6vw 12vh !important;
    justify-content: flex-end !important;
  }
  body:not(.light-hero) .hero-title { font-size: clamp(2.4rem, 9vw, 3.8rem) !important; }
  .hero-dots { display: none !important; }
  .hero-scroll { display: none !important; }
  
  /* INNER: full height */
  body.light-hero #hero { height: 100svh !important; }
}
@media (max-width: 480px) {
  body:not(.light-hero) .hero-title { font-size: 2.3rem !important; }
  .hero-titles { min-height: 9em !important; }
}

/* ══════════════════════════════
   11. DESIGN POLISH
══════════════════════════════ */

/* Smooth lazy image fade-in */
img[loading="lazy"] { opacity: 0; transition: opacity 0.4s ease; }
img[loading="lazy"].loaded { opacity: 1; }

/* Stat cell hover gold line */
.stat-cell { position: relative; overflow: hidden; }
.stat-cell::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 1px; background: var(--gold); transition: width 0.4s ease; }
.stat-cell:hover::after { width: 55%; }

/* Better program card hover */
.program-card:hover .program-number { color: var(--gold-light) !important; }

/* CTA banner diagonal shine */
.cta-banner { position: relative; overflow: hidden; }
.cta-banner::before {
  content: ''; position: absolute; top: -50%; right: -10%;
  width: 35vw; height: 200%;
  background: rgba(255,255,255,0.08);
  transform: skewX(-15deg); pointer-events: none;
}

/* Branch hover glow */
.branch-panel { transition: background 0.35s, box-shadow 0.35s !important; }
.branch-panel:hover { box-shadow: inset 0 0 0 1px rgba(201,162,86,0.18) !important; }

/* Focus styles */
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Skip link */
/* Skip link — defined in award.css */

/* Gallery tab animation */
.gallery-tab { transition: all 0.2s ease !important; }
.gallery-tab.active { font-weight: 500 !important; }

/* Service tile refined hover */
.service-tile-icon { transition: transform 0.3s ease, background 0.3s !important; }
.service-tile:hover .service-tile-icon { transform: scale(1.12) !important; }

/* ══════════════════════════════
   12. HERO TYPOGRAPHY (moved here as single source)
══════════════════════════════ */
.hero-eyebrow {
  font-family: var(--sans);
  font-size: 0.64rem; font-weight: 400;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2rem;
  display: flex; align-items: center; gap: 14px;
}
.hero-eyebrow::before {
  content: ''; display: block;
  width: 26px; height: 1px; background: var(--gold);
  flex-shrink: 0;
}
.hero-tagline {
  font-family: var(--sans);
  font-size: 0.98rem; font-weight: 300;
  color: var(--gray); line-height: 1.8;
  max-width: 440px; margin-bottom: 2.6rem;
}
.hero-actions {
  display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: center;
}
.hero-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gray-lt); cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}
.hero-dot.active { background: var(--navy); transform: scale(1.5); }