/* ==========================================================================
   Bankmed — layout.css
   Page shell, hero variants, in-page TOC layout, grids, responsive rules.
   ========================================================================== */

/* ---------- Page shell ---------- */
body { display: flex; flex-direction: column; }
.site-main { padding-top: var(--header-h); flex: 1 0 auto; }

/* ---------- Grid helpers ---------- */
.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
.split--media-right .split__media { order: 2; }

/* ---------- Hero (homepage) ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 120% at 85% -10%, rgba(1,161,255,.22), transparent 55%),
    linear-gradient(135deg, var(--color-brand-navy), var(--color-primary-dark));
  color: #fff;
}
.hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-8); align-items: center; padding-block: var(--space-9); }
.hero h1 { color: #fff; }
.hero__eyebrow { color: var(--color-secondary); }
.hero p { color: rgba(255,255,255,.85); font-size: var(--fs-md); max-width: 46ch; }
.hero__cta { margin-top: var(--space-6); }
.hero__trust { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-7); }
.hero__trust .stat__value { color: #fff; font-size: var(--fs-xl); }
.hero__trust .stat__label { color: rgba(255,255,255,.7); }

.hero__visual { position: relative; }
.hero-card {
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-lg);
}
.hero-card__chip {
  aspect-ratio: 1.6 / 1;
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--color-secondary), var(--color-primary));
  padding: var(--space-5);
  display: flex; flex-direction: column; justify-content: space-between;
  color: #fff;
}
.hero-card__chip .dots { width: 40px; height: 28px; border-radius: 6px; background: linear-gradient(135deg, #ffe08a, #e0a938); }
.hero-card__num { font-family: var(--font-heading); letter-spacing: .18em; font-size: var(--fs-md); }

.promo-banner {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  margin-top: var(--space-6);
  padding: var(--space-3) var(--space-5);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
}
.promo-banner .badge { background: var(--warning); color: #3a2600; }
.promo-banner a { color: #fff; font-weight: 600; text-decoration: underline; }

/* ---------- Inner page hero ---------- */
.page-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(110% 140% at 100% 0%, rgba(1,161,255,.25), transparent 50%),
    linear-gradient(120deg, var(--color-brand-navy), var(--color-primary-dark));
  color: #fff;
  padding-block: var(--space-8);
}
.page-hero h1 { color: #fff; max-width: 20ch; }
.page-hero p { color: rgba(255,255,255,.85); font-size: var(--fs-md); max-width: 58ch; margin-top: var(--space-4); }
.page-hero .eyebrow { color: var(--color-secondary); }
.page-hero__cta { margin-top: var(--space-6); }
.page-hero__meta { font-size: var(--fs-sm); color: rgba(255,255,255,.65); margin-top: var(--space-4); }
.page-hero__inner { max-width: 760px; }

/* ---------- In-page layout with sticky TOC ---------- */
.page-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.page-layout.no-toc { grid-template-columns: minmax(0, 1fr); }
.page-layout.no-toc .page-content { max-width: 820px; margin-inline: auto; }

.toc {
  position: sticky;
  top: calc(var(--header-h-scrolled) + var(--space-5));
  align-self: start;
  background: var(--surface);
  border: 1px solid rgba(16,33,64,.08);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
  max-height: calc(100vh - var(--header-h-scrolled) - var(--space-7));
  overflow-y: auto;
}
.toc__title { font-family: var(--font-heading); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--accent-grey); margin-bottom: var(--space-3); }
.toc__list { display: grid; gap: 2px; border-left: 2px solid rgba(16,33,64,.1); }
.toc__list a {
  display: block;
  padding: 0.5em 0.9em;
  margin-left: -2px;
  border-left: 2px solid transparent;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.35;
}
.toc__list a:hover { color: var(--color-primary); }
.toc__list a.is-active { color: var(--color-primary); border-left-color: var(--color-primary); font-weight: 600; }
.toc__toggle { display: none; }

.page-content > section { scroll-margin-top: calc(var(--header-h-scrolled) + var(--space-5)); }
.page-content > section + section { margin-top: var(--space-8); }
.section-block__head { margin-bottom: var(--space-5); }

/* CTA band */
.cta-band {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.85); max-width: 52ch; margin: var(--space-3) auto 0; }
.cta-band .btn-row { justify-content: center; margin-top: var(--space-6); }

/* Media placeholder blocks */
.media-frame {
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--color-primary-light), #fff);
  border: 1px solid rgba(16,33,64,.08);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.media-frame .icon { width: 64px; height: 64px; opacity: .6; }
.media-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-frame--navy { background: linear-gradient(135deg, var(--color-brand-navy), var(--color-primary-dark)); color: rgba(255,255,255,.7); }

/* Steps */
.steps { counter-reset: step; display: grid; gap: var(--space-5); }
.steps--row { grid-template-columns: repeat(3, 1fr); }
.step { position: relative; background: var(--surface); border: 1px solid rgba(16,33,64,.08); border-radius: var(--radius-lg); padding: var(--space-6); padding-top: var(--space-7); }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: calc(-1 * var(--space-4)); left: var(--space-6);
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-primary); color: #fff;
  font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-lg);
  box-shadow: var(--shadow-sm);
}
.step h4 { margin-bottom: var(--space-2); }

/* Testimonials */
.quote { background: var(--surface); border-radius: var(--radius-lg); padding: var(--space-6); border: 1px solid rgba(16,33,64,.08); }
.quote__stars { color: var(--warning); letter-spacing: .1em; margin-bottom: var(--space-3); }
.quote p { color: var(--text-primary); font-size: var(--fs-md); }
.quote__by { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.quote__avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--color-secondary), var(--color-primary)); color: #fff; display: grid; place-items: center; font-family: var(--font-heading); font-weight: 700; }
.quote__name { font-weight: 600; color: var(--text-primary); font-size: var(--fs-sm); }
.quote__role { color: var(--text-secondary); font-size: var(--fs-xs); }

/* Logo / trust strip */
.trust-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-6) var(--space-8); }
.trust-badge { display: flex; align-items: center; gap: var(--space-3); color: var(--text-secondary); font-weight: 600; font-family: var(--font-heading); }
.trust-badge .icon { color: var(--color-primary); width: 32px; height: 32px; }

/* Calculator */
.calc-types {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  padding: var(--space-1);
  background: var(--bg);
  border-radius: var(--radius-pill);
  border: 1px solid rgba(16,33,64,.08);
  width: fit-content;
  max-width: 100%;
}
.calc-type {
  padding: 0.65em 1.25em;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  border-radius: var(--radius-pill);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.calc-type:hover { color: var(--color-primary); }
.calc-type.is-active {
  background: var(--surface);
  color: var(--color-primary-dark);
  box-shadow: var(--shadow-xs);
}
.calc { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-7); background: var(--surface); border: 1px solid rgba(16,33,64,.08); border-radius: var(--radius-xl); padding: var(--space-7); box-shadow: var(--shadow-sm); }
.calc__controls .field { margin-bottom: var(--space-5); }
.calc__val { font-family: var(--font-heading); font-weight: 700; color: var(--color-primary-dark); }
.calc__result { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); color: #fff; border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; justify-content: center; }
.calc__result .big { font-family: var(--font-heading); font-weight: 800; font-size: var(--fs-3xl); line-height: 1; }
.calc__result .sub { color: rgba(255,255,255,.8); font-size: var(--fs-sm); }
.calc__meta { display: flex; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid rgba(255,255,255,.2); }

/* Contact / two-col */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.info-list { display: grid; gap: var(--space-4); }
.info-list li { display: flex; gap: var(--space-4); align-items: flex-start; }
.info-list .icon-badge { flex: none; width: 46px; height: 46px; border-radius: var(--radius-md); background: var(--color-primary-light); color: var(--color-primary); display: grid; place-items: center; }
.info-list strong { display: block; color: var(--text-primary); font-family: var(--font-heading); }
.info-list span { color: var(--text-secondary); font-size: var(--fs-sm); }

/* Download list */
.downloads { display: grid; gap: var(--space-3); }
.download-item { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--surface); border: 1px solid rgba(16,33,64,.08); border-radius: var(--radius-md); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.download-item:hover { border-color: rgba(23,105,223,.3); box-shadow: var(--shadow-xs); }
.download-item .icon-badge { flex: none; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--error-light); color: var(--error); display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 700; font-family: var(--font-heading); }
.download-item__meta { flex: 1; }
.download-item__meta strong { display: block; color: var(--text-primary); }
.download-item__meta span { font-size: var(--fs-xs); color: var(--text-secondary); }

/* News list */
.news-card { overflow: hidden; padding: 0; }
.news-card__media { aspect-ratio: 16/9; background: linear-gradient(135deg, var(--color-primary-light), var(--color-secondary-light)); display: grid; place-items: center; color: var(--color-primary); }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-card__body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; }
.news-card__date { font-size: var(--fs-xs); color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--space-2); }

/* FAQ search */
.faq-search { position: relative; max-width: 520px; margin-bottom: var(--space-6); }
.faq-search .input { padding-left: 2.8em; }
.faq-search .icon { position: absolute; left: 1em; top: 50%; transform: translateY(-50%); color: var(--text-secondary); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .mega__inner { grid-template-columns: 1fr; }
  .mega__cols { grid-template-columns: repeat(3, 1fr); }
  .mega__feature { flex-direction: row; align-items: center; }
  .footer__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .footer__cols { grid-template-columns: repeat(3, 1fr); max-width: 100%; justify-self: stretch; margin-left: 0; }
}

@media (max-width: 960px) {
  :root { --header-h: 64px; }
  .site-header__utility { display: none; }
  .primary-nav, .header-login { display: none; }
  .nav-toggle { display: flex; }
  .header-bar { height: 64px; }

  .page-layout { grid-template-columns: 1fr; gap: var(--space-5); }
  .toc {
    position: static; max-height: none;
    top: auto;
  }
  .toc__title { display: none; }
  .toc__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; font-family: var(--font-heading); font-weight: 600; color: var(--text-primary); }
  .toc__toggle .icon { transition: transform var(--dur) var(--ease); }
  .toc.is-collapsed .toc__list { display: none; }
  .toc.is-collapsed .toc__toggle .icon { transform: rotate(-90deg); }

  .hero__grid { grid-template-columns: 1fr; gap: var(--space-6); padding-block: var(--space-8); }
  .hero__visual { display: none; }
  .split { grid-template-columns: 1fr; gap: var(--space-5); }
  .split--media-right .split__media { order: 0; }
  .calc { grid-template-columns: 1fr; padding: var(--space-5); }
  .contact-grid { grid-template-columns: 1fr; gap: var(--space-6); }
}

@media (max-width: 760px) {
  .site-main,
  .page-layout,
  .page-content {
    max-width: 100%;
  }

  .page-content {
    min-width: 0;
  }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .steps--row { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); }
  .section { padding-block: var(--space-7); }
  .cta-band { padding: var(--space-6); }
  .form-grid { grid-template-columns: 1fr; }
  .footer__bottom-bar { flex-direction: column; align-items: flex-start; }
  .calc-types {
    width: 100%;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
  }
  .calc-type {
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
  }
}

@media (max-width: 480px) {
  .footer__cols { grid-template-columns: 1fr; }
  .hero__trust { gap: var(--space-5); }
  .btn-row .btn { width: 100%; }
}