@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&display=swap");

/* ==========================================================================
   GastroCare Hospital — Poster theme
   --------------------------------------------------------------------------
   Loaded AFTER css/style.css. This layer re-tunes the palette, typography and
   motion to match the hospital's own printed artwork suite (The Journey,
   Nourishment, Transformation, The Balance, Absorption, The Microbiome,
   Wellness, Asha, Sarve Bhavantu).

   Sampled from the artwork:
     parchment   #f7f1e4 / #efe4d1   (poster paper, warm and cream)
     gold        #b8843b / #c69248   (metallic rule, wheat, sun)
     bronze text #8e5224 / #6d4a1a   (headline ink on parchment)
     teal        #086365 / #2c8d8a   (wordmark, the "+", water)
     plum        #7555a2             (only in the logo gradient)
     sage        #4e7259             (foliage, The Balance stream)

   Nothing here is invented artwork — the poster images are the hospital's own
   files, displayed as supplied.
   ========================================================================== */

/* ---------- 1. Palette overrides ---------- */
:root {
  /* Warm parchment family replaces the cooler greys */
  --cream:      #f7f1e4;
  --cream-deep: #efe4d1;
  --sand:       #f8f2e6;
  --bg-soft:    #faf5ea;   /* section--soft: warm paper, not mint */

  /* Ink picks up the poster's bronze-brown rather than blue-grey */
  --ink:      #2b2118;
  --ink-soft: #3d3128;
  --muted:    #6b5a45;
  --muted-2:  #8a7963;
  --line:      #e6dbc7;
  --line-strong: #d6c7ad;

  /* Gold tuned to the metallic rule in the posters */
  --gold-600: #8e5224;
  --gold-500: #c69248;
  --gold-400: #d9a755;
  --gold-300: #e8c27f;
  --gold-100: #f6e7c8;
  --gold-50:  #fbf3e2;

  /* Teal kept as the clinical anchor colour, warmed very slightly */
  --teal-50:  #eef7f4;
  --teal-100: #d5ebe4;

  --sage-600: #4e7259;
  --sage-100: #e2ebdf;

  /* Softer, warmer shadows — the flat blue-grey shadow looked digital */
  --shadow-xs: 0 1px 2px rgba(74, 56, 30, 0.07);
  --shadow-sm: 0 2px 10px rgba(74, 56, 30, 0.08);
  --shadow:    0 14px 34px -14px rgba(74, 56, 30, 0.26);
  --shadow-lg: 0 30px 64px -28px rgba(74, 56, 30, 0.34);

  /* Editorial serif for display text, matching the posters' headlines */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-head: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --ease-out: cubic-bezier(0.22, 0.68, 0.36, 1);
}

/* ---------- 2. Typography: serif display, calmer body ---------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.002em;
  line-height: 1.14;
  color: var(--teal-900);
}
h1 { font-size: clamp(2.15rem, 4.9vw, 3.5rem); letter-spacing: -0.004em; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); }
h3 { font-size: clamp(1.24rem, 2.1vw, 1.52rem); font-weight: 600; }

/* Small caps labels and UI chrome keep the sans face — they read as
   wayfinding, not as prose, which is exactly how the posters use them.
   Card h3s deliberately stay in the serif so every heading in the site
   shares one voice; only sub-headings and interactive labels switch. */
h4, h5, h6,
.eyebrow,
.btn,
.nav__links > li > a,
.brand__name {
  font-family: var(--font-head);
}

/* Stat numerals are oversized figures, so they take the display serif */
.stat strong { font-family: var(--font-display); }

body {
  background: #fffdf8;
  color: var(--ink-soft);
}

.lead { color: var(--muted); font-size: 1.09rem; }

/* The posters' signature: a thin gold rule with a lotus notch under headings */
.section-head h2::after {
  content: "";
  display: block;
  width: 76px;
  height: 1px;
  margin: 0.75rem 0 0 0;
  background: linear-gradient(90deg, var(--gold-500), rgba(198, 146, 72, 0));
}
.section-head--center h2::after { margin-inline: auto; }

.eyebrow { color: var(--gold-600); letter-spacing: 0.16em; }
.eyebrow::before { background: var(--gold-500); }

/* ---------- 3. Surfaces ---------- */
.section--soft {
  background:
    radial-gradient(880px 420px at 12% 0%, rgba(217, 167, 85, 0.10) 0%, rgba(217, 167, 85, 0) 62%),
    var(--bg-soft);
}
.section--sand { background: var(--sand); }

.card {
  background: #fffdf9;
  border-color: var(--line);
  border-radius: 4px;                 /* squarer, more editorial than 22px */
  box-shadow: none;
  border-width: 1px;
  position: relative;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-500), rgba(198, 146, 72, 0));
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
.card:hover { border-color: var(--gold-300); box-shadow: var(--shadow); }
.card:hover::before { opacity: 1; }

.card__icon {
  border-radius: 50%;
  background: var(--gold-50);
  color: var(--gold-600);
  border: 1px solid var(--gold-100);
  width: 46px; height: 46px;
}
.card__icon--gold { background: var(--teal-50); color: var(--teal-700); border-color: var(--teal-100); }

.pill-grid li, .aside-card, .stat, .faq details, .map-embed { border-radius: 4px; }
.stat { border-left-color: var(--gold-500); background: #fffdf9; }
.stat strong { color: var(--gold-600); font-family: var(--font-display); font-size: clamp(1.7rem, 2.9vw, 2.2rem); }

.callout { border-radius: 4px; }
.callout--gold { background: var(--gold-50); border-color: var(--gold-100); color: #6d4a1a; }

.tag { border-radius: 3px; background: #fffdf9; border-color: var(--line-strong); color: var(--gold-600); }

.prose blockquote { border-left-color: var(--gold-500); background: var(--gold-50); border-radius: 0 4px 4px 0; }
.prose th { background: var(--gold-50); }

/* ---------- 4. Header & nav ---------- */
.topbar { background: var(--teal-950); color: #a8c4bd; }
.site-header { background: rgba(255, 253, 248, 0.94); border-bottom-color: var(--gold-100); }
.site-header.is-stuck { box-shadow: 0 1px 0 var(--gold-100), var(--shadow-sm); }

.nav__links > li > a { font-size: 0.905rem; letter-spacing: 0.008em; }
.nav__links > li > a:hover,
.nav__links > li > a[aria-current="page"] {
  background: transparent;
  color: var(--gold-600);
  box-shadow: inset 0 -2px 0 var(--gold-500);
}

.btn { border-radius: 3px; letter-spacing: 0.02em; }
.btn--outline { --btn-bd: var(--gold-500); --btn-fg: var(--gold-600); }
.btn--outline:hover { --btn-bg: var(--gold-50); --btn-bd: var(--gold-600); --btn-fg: var(--gold-600); }

.page-head {
  background:
    radial-gradient(720px 300px at 88% -20%, rgba(198, 146, 72, 0.20) 0%, rgba(198, 146, 72, 0) 70%),
    linear-gradient(158deg, var(--teal-950) 0%, var(--teal-900) 62%, var(--teal-700) 100%);
}
.page-head h1 { font-family: var(--font-display); font-weight: 600; }

/* ---------- 5. Poster gallery ---------- */
.poster-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: clamp(0.9rem, 2vw, 1.5rem);
}
.poster-tile {
  margin: 0;
  position: relative;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(74, 56, 30, 0.10);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.poster-tile img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.6s var(--ease-out);
}
.poster-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.poster-tile:hover img { transform: scale(1.025); }
.poster-tile figcaption {
  padding: 0.7rem 0.85rem 0.85rem;
  border-top: 1px solid var(--line);
  background: #fffdf9;
}
.poster-tile figcaption strong {
  display: block;
  font-family: var(--font-head);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-600);
  font-weight: 700;
}
.poster-tile figcaption span { display: block; font-size: 0.845rem; color: var(--muted); margin-top: 0.15rem; }

/* Wide/featured poster variant */
.poster-tile--wide { grid-column: span 2; }
@media (max-width: 620px) { .poster-tile--wide { grid-column: span 1; } }

/* ---------- 6. Scroll reveals (js/site.js adds .is-in) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }

/* Subtle gold hairline that draws itself under the hero rule */
.rule-draw {
  height: 1px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s var(--ease-out) 0.15s;
}
.rule-draw.is-in { transform: scaleX(1); }

/* NOTE: deliberately no image fade-in — see js/site.js initReveal(). */

@media (prefers-reduced-motion: reduce) {
  .reveal, .rule-draw { opacity: 1 !important; transform: none !important; }
  .poster-tile:hover, .poster-tile:hover img { transform: none; }
}

/* Printing must never inherit a scroll state: revealed elements would come out
   as blank space on paper. */
@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* Portrait that sits inside running prose (profile page) */
.figure--inline {
  float: right;
  width: min(300px, 42%);
  margin: 0.35rem 0 1.1rem 1.8rem;
}
.figure--inline img { border-radius: 2px; }
@media (max-width: 700px) {
  .figure--inline { float: none; width: 100%; margin: 1rem 0 1.4rem; }
}

/* ---------- 7. Responsive tweaks for the serif display face ---------- */
@media (max-width: 640px) {
  h1 { font-size: clamp(1.95rem, 8vw, 2.4rem); }
  h2 { font-size: clamp(1.55rem, 6.4vw, 1.95rem); }
  .section-head h2::after { margin-top: 0.6rem; }
}