/* Camino Prep — storefront content styles
   Depends on tokens.css for brand variables and marketing/styles.css for
   shared site chrome (header, footer, buttons, .shell). This file only
   covers storefront-specific content: auth forms, catalog/detail lists,
   checkout summary. */

.storefront-main { padding-block: var(--space-6) var(--space-8); min-height: 60vh; }

.page-title { font-size: var(--fs-800); margin-bottom: var(--space-3); }
.page-sub, .page-intro { color: var(--text-600); font-size: var(--fs-500); max-width: 60ch; margin-bottom: var(--space-6); }

/* Generic content-section headings — covers about.html's <h2>s and the
   otherwise-bare "Sections"/"Sample questions"/"Pricing" headings on
   concours_detail.html, with no per-page markup needed. */
.storefront-main h2 { font-size: var(--fs-700); margin-block: var(--space-6) var(--space-4); }

/* ---------- Legal pages ---------- */
.legal-body { max-width: 68ch; display: flex; flex-direction: column; gap: var(--space-4); }
.legal-body h2 { font-size: var(--fs-500); font-weight: 600; margin-top: var(--space-3); }
.legal-body p { color: var(--text-600); }
.legal-body a { color: var(--horizon-500); font-weight: 600; }
.legal-body a:hover { text-decoration: underline; }

/* ---------- Auth forms (login / signup) ---------- */
.auth-form { display: flex; flex-direction: column; gap: var(--space-4); max-width: 420px; margin-block: var(--space-5); }
.auth-form label { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--fs-300); font-weight: 500; color: var(--text-600); }
.auth-form input {
  font: inherit; font-size: var(--fs-400); padding: .75em 1em;
  border: 1.5px solid var(--border-200); border-radius: var(--radius-sm);
  background: var(--paper-000); color: var(--text-900);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.auth-form input:focus { border-color: var(--ascent-500); }
.auth-switch { color: var(--text-600); }
.auth-switch a { color: var(--horizon-500); font-weight: 600; }
.auth-switch a:hover { text-decoration: underline; }

/* ---------- About ---------- */
.about-section { margin-bottom: var(--space-6); }
.about-exam-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.about-exam-list a {
  display: inline-flex; font-size: var(--fs-300); font-weight: 600; color: var(--ink-900);
  background: var(--paper-100); border-radius: var(--radius-pill); padding: .5em 1.1em;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.about-exam-list a:hover { background: var(--ascent-500); color: var(--ink-900); }
.about-trust-list { display: flex; flex-direction: column; gap: var(--space-4); }
.about-trust-list li { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--text-600); }
.about-trust-list .checkout-features__check { margin-top: .2em; }

/* ---------- Catalog hero ---------- */
.catalog-hero {
  position: relative; overflow: hidden;
  background: var(--ink-900); color: var(--text-on-ink-high);
  margin-inline: calc(-1 * var(--space-5));
  padding: var(--space-7) var(--space-5);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-7);
}
.catalog-hero__atmosphere {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 80% at 85% 0%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 70%),
    radial-gradient(50% 60% at 10% 100%, rgba(255, 106, 61, .25), transparent 70%);
  pointer-events: none;
}
.catalog-hero__inner { position: relative; max-width: 640px; }
.catalog-hero__flag { font-size: 1.1em; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
.catalog-hero__headline {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em;
  font-size: var(--fs-800); margin-block: var(--space-3) var(--space-3);
}
.catalog-hero__sub { color: var(--text-on-ink-mid); font-size: var(--fs-500); max-width: 52ch; }

/* Coach-app promo (US6, specs/007-coach-product-pwa): reuses the marketing
   homepage's existing hero-shot-phone.webp rather than a new asset
   (research.md Decision 12). Hidden below the same 1040px cutoff the
   marketing hero's own collage uses, so it never crowds the headline on
   narrower viewports -- catalog-hero's text column already stacks fine
   without it there. */
.catalog-hero__coach-promo { display: none; }
@media (min-width: 1040px) {
  /* Narrow the text column on the same breakpoint the promo appears at, so
     the two never overlap (same lesson marketing/styles.css's .hero__inner
     already learned the hard way — see its own comment). */
  .catalog-hero__inner { max-width: 440px; }
  .catalog-hero__coach-promo {
    display: block; position: absolute; z-index: 1;
    inset-block-start: var(--space-4); inset-inline-end: var(--space-5);
    width: min(18%, 170px);
    text-decoration: none; transition: transform var(--dur-fast) var(--ease-out);
  }
  .catalog-hero__coach-promo:hover { transform: translateY(-4px); }
}
/* A caption card overlaid on the image's own bottom edge (not stacked
   below it) -- catalog-hero's height is driven by the text column, and a
   below-the-image card made the column taller than the hero box, getting
   silently clipped by .catalog-hero's overflow:hidden (caught by actually
   screenshotting this, not just reading the CSS). */
.catalog-hero__coach-shot {
  display: block; width: 100%; height: auto; border-radius: var(--radius-md);
  filter: drop-shadow(0 24px 40px rgba(5, 9, 18, .45));
}
.catalog-hero__coach-promo__card {
  position: absolute; inset-inline: 4%; inset-block-end: 4%;
  display: flex; flex-direction: column; gap: .15rem; text-align: center;
  padding: var(--space-2); border-radius: var(--radius-sm);
  background: rgba(11, 18, 32, .72); backdrop-filter: blur(6px);
  color: var(--text-on-ink-high); font-size: .65rem; line-height: 1.25;
}
.catalog-hero__coach-promo__card strong { font-size: .7rem; }

/* ---------- Catalog ---------- */
.concours-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-5); }
.concours-card {
  display: flex; flex-direction: column;
  padding: var(--space-5); border-radius: var(--radius-lg);
  background: var(--paper-000); border: 1px solid var(--border-100);
  border-top: 4px solid var(--accent, var(--ascent-500));
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.concours-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.concours-card h2 { font-size: var(--fs-600); margin-bottom: var(--space-2); font-weight: 600; }
.concours-card h2 a:hover { color: var(--ascent-600); }
.concours-card p { color: var(--text-600); margin-bottom: var(--space-4); flex: 1; }
.product-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.product-pill {
  display: inline-flex; align-items: baseline; gap: .5em;
  font-size: var(--fs-200); font-weight: 600; color: var(--text-600);
  background: var(--paper-100); border-radius: var(--radius-pill);
  padding: .4em .9em .4em 1em;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.product-pill:hover { background: var(--accent, var(--ascent-500)); color: var(--text-on-ink-mid); }
.product-pill:hover .product-pill__price { color: inherit; }
.product-pill__price { color: var(--ink-900); font-weight: 700; }

/* ---------- Concours detail ---------- */
.concours-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-6); align-items: start; }
.concours-layout__main { min-width: 0; }
.concours-sidebar { position: sticky; top: calc(76px + var(--space-5)); }
.concours-sidebar__panel {
  padding: var(--space-5); border-radius: var(--radius-lg);
  background: var(--paper-100); border: 1px solid var(--border-100);
}
.concours-sidebar__eyebrow { font-size: var(--fs-200); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ascent-600); margin-bottom: var(--space-3); }
.concours-sidebar .pricing-list { margin-bottom: 0; }
.concours-sidebar .pricing-row { flex-direction: column; align-items: stretch; }
.concours-sidebar .pricing-row .btn { width: 100%; justify-content: center; }

.topic-list, .sample-list { display: flex; flex-direction: column; gap: 0; margin-bottom: var(--space-6); }
.topic-list li, .sample-list li { padding: var(--space-3) 0; border-top: 1px solid var(--border-100); color: var(--text-600); }
.topic-list li:first-child, .sample-list li:first-child { border-top: none; }
.sample-list strong { color: var(--text-900); }

.pricing-list { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); }
.pricing-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-4); border-radius: var(--radius-md);
  background: var(--paper-000); border: 1px solid var(--border-100);
}
.pricing-row .price { font-weight: 700; color: var(--text-900); }
.pricing-row__title { font-weight: 600; color: var(--text-900); }
.pricing-row__desc { flex-basis: 100%; font-size: var(--fs-200); color: var(--text-600); }

.empty-state { color: var(--text-600); font-size: var(--fs-500); padding-block: var(--space-6); }

/* ---------- Calendar ---------- */
.calendar-list { display: flex; flex-direction: column; gap: var(--space-5); }
.calendar-exam {
  padding: var(--space-5); border-radius: var(--radius-lg);
  background: var(--paper-000); border: 1px solid var(--border-100);
}
.calendar-exam h2 { font-size: var(--fs-600); margin: 0 0 var(--space-3); }
.calendar-exam h2 a:hover { color: var(--ascent-600); }
.calendar-milestones { display: flex; flex-direction: column; }
.calendar-milestone {
  display: flex; align-items: baseline; gap: var(--space-3);
  padding: var(--space-3) 0; border-top: 1px solid var(--border-100);
}
.calendar-milestone:first-child { border-top: none; }
.calendar-milestone__date {
  flex: none; min-width: 9ch;
  font-weight: 700; font-size: var(--fs-300); color: var(--ink-900);
  background: var(--paper-100); border-radius: var(--radius-sm);
  padding: .3em .6em; text-align: center;
}
.calendar-milestone__label { flex: 1; color: var(--text-600); }
.calendar-milestone__label em { color: var(--text-400); font-style: italic; }
.calendar-milestone__source { font-size: var(--fs-200); color: var(--horizon-500); font-weight: 600; flex: none; }
.calendar-milestone__source:hover { text-decoration: underline; }
.calendar-milestone--estimated .calendar-milestone__date { background: transparent; border: 1.5px dashed var(--border-200); color: var(--text-600); }

.calendar-telegram-cta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--paper-100); border: 1px solid var(--border-100);
}
.calendar-telegram-cta p { margin: 0; color: var(--text-600); }

.calendar-search { margin-bottom: var(--space-5); }
.calendar-search__input {
  width: 100%; max-width: 28rem;
  padding: .7em 1em; border-radius: var(--radius-md);
  border: 1.5px solid var(--border-200); background: var(--paper-000);
  font-size: var(--fs-400); color: var(--text-900);
}
.calendar-search__input::placeholder { color: var(--text-400); }
.calendar-search__input:focus { outline: none; border-color: var(--ascent-500); }

.calendar-bucket { margin-bottom: var(--space-6); }
.calendar-bucket__heading {
  font-size: var(--fs-500); font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--ascent-600); margin-bottom: var(--space-4);
}

.calendar-exam__verified { font-size: var(--fs-200); color: var(--text-400); margin: 0 0 var(--space-3); }

.calendar-facts { display: flex; flex-direction: column; margin-bottom: var(--space-3); }
.calendar-facts__item {
  display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-2) 0; border-top: 1px solid var(--border-100);
}
.calendar-facts__item:first-child { border-top: none; }
.calendar-facts__label { flex: none; min-width: 9ch; font-weight: 700; font-size: var(--fs-300); color: var(--ink-900); }
.calendar-facts__value { flex: 1; color: var(--text-600); }

/* ---------- Blog ---------- */
.blog-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-5); }
.blog-card {
  display: flex; flex-direction: column;
  padding: var(--space-5); border-radius: var(--radius-lg);
  background: var(--paper-000); border: 1px solid var(--border-100);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.blog-card__date { font-size: var(--fs-200); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ascent-600); margin-bottom: var(--space-2); }
.blog-card h2 { font-size: var(--fs-600); margin-bottom: var(--space-2); font-weight: 600; }
.blog-card h2 a:hover { color: var(--ascent-600); }
.blog-card p:not(.blog-card__date) { color: var(--text-600); margin-bottom: var(--space-3); flex: 1; }
.blog-card__cta {
  position: relative; display: inline-block; align-self: flex-start;
  font-weight: 600; font-size: var(--fs-300); color: var(--ink-900);
}
.blog-card__cta::after {
  content: ""; position: absolute; inset-inline-start: 0; inset-inline-end: 100%; bottom: -.2em; height: 2px;
  background: var(--ascent-500); transition: inset-inline-end var(--dur-med) var(--ease-out);
}
.blog-card__cta:hover::after { inset-inline-end: 0; }

.blog-post { max-width: 68ch; }
.blog-post__date { font-size: var(--fs-300); font-weight: 600; color: var(--text-400); margin-bottom: var(--space-2); }
.blog-post__summary { font-size: var(--fs-500); color: var(--text-600); margin-bottom: var(--space-5); }
.blog-post__body p { margin-bottom: var(--space-4); color: var(--text-900); }
.blog-post__body h2 { font-size: var(--fs-600); margin-block: var(--space-5) var(--space-3); }
.blog-post__body h3 { font-size: var(--fs-500); margin-block: var(--space-4) var(--space-2); }
.blog-post__body strong { font-weight: 700; }
.blog-post__body a { color: var(--horizon-500); font-weight: 600; }
.blog-post__body a:hover { text-decoration: underline; }
.blog-post__body ul, .blog-post__body ol { margin-bottom: var(--space-4); padding-left: 1.25em; color: var(--text-900); }
.blog-post__body li { margin-bottom: var(--space-2); }
.blog-post__body blockquote {
  margin: var(--space-4) 0; padding-left: var(--space-4);
  border-left: 3px solid var(--border-200); color: var(--text-600);
}
.blog-post__body code { font-size: .9em; background: var(--paper-100); padding: .1em .35em; border-radius: var(--radius-sm); }
.blog-post__back { margin-top: var(--space-6); }
.blog-post__back a { color: var(--horizon-500); font-weight: 600; }
.blog-post__back a:hover { text-decoration: underline; }

/* ---------- Blog sidebar (aprovare.pt-style recommended-exam + related-posts rail) ---------- */
.blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-6); align-items: start; }
.blog-layout__main { min-width: 0; }
.blog-layout .blog-list { grid-template-columns: 1fr; }

.blog-sidebar { position: sticky; top: calc(76px + var(--space-5)); display: flex; flex-direction: column; gap: var(--space-5); }

.blog-promo {
  padding: var(--space-5); border-radius: var(--radius-lg);
  background: var(--paper-000); border: 1px solid var(--border-100);
  border-top: 4px solid var(--ascent-500);
}
.blog-promo__eyebrow { font-size: var(--fs-200); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ascent-600); margin-bottom: var(--space-2); }
.blog-promo__title { font-size: var(--fs-500); font-weight: 600; margin-bottom: var(--space-3); }
.blog-promo__title a:hover { color: var(--ascent-600); }
.blog-promo__facts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.blog-promo__facts li {
  font-size: var(--fs-200); font-weight: 600; color: var(--text-600);
  background: var(--paper-100); border-radius: var(--radius-pill); padding: .35em .9em;
}
.blog-promo__products { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-4); }
.blog-promo__product { padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-100); }
.blog-promo__product:last-child { border-bottom: none; padding-bottom: 0; }
.blog-promo__product-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-1); }
.blog-promo__product-kind { font-size: var(--fs-300); font-weight: 700; color: var(--text-900); }
.blog-promo__product-price { font-size: var(--fs-300); font-weight: 700; color: var(--text-600); }
.blog-promo__product-feature { font-size: var(--fs-200); color: var(--text-600); margin-bottom: var(--space-1); }
.blog-promo__product-access { font-size: var(--fs-200); font-weight: 600; color: var(--ascent-600); margin-bottom: var(--space-3); }
.blog-promo__product .btn { width: 100%; justify-content: center; }
.blog-promo__link { display: inline-block; font-size: var(--fs-300); font-weight: 600; color: var(--horizon-500); }
.blog-promo__link:hover { text-decoration: underline; }

/* ---------- Blog post exam-facts panel (topics + key dates) ---------- */
.exam-facts {
  padding: var(--space-5); border-radius: var(--radius-lg);
  background: var(--paper-100); margin-bottom: var(--space-5);
}
.exam-facts h2:first-child { margin-top: 0; }
.exam-facts .calendar-milestone { padding: var(--space-2) 0; }
.exam-facts__calendar-link a { color: var(--horizon-500); font-weight: 600; }
.exam-facts__calendar-link a:hover { text-decoration: underline; }

.blog-related {
  padding: var(--space-5); border-radius: var(--radius-lg);
  background: var(--paper-100);
}
.blog-related__heading { font-size: var(--fs-300); font-weight: 700; color: var(--text-900); margin-bottom: var(--space-3); }
.blog-related__list { display: flex; flex-direction: column; gap: var(--space-2); }
.blog-related__list a { font-size: var(--fs-300); font-weight: 600; color: var(--text-600); }
.blog-related__list a:hover { color: var(--ascent-600); }

/* ---------- Checkout ---------- */
.checkout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: start; }
.checkout-summary {
  padding: var(--space-5); border-radius: var(--radius-lg);
  background: var(--paper-100); margin-top: var(--space-5);
}
.checkout-summary .price { font-size: var(--fs-600); font-weight: 700; color: var(--ink-900); display: block; margin-top: var(--space-2); }

.checkout-features {
  display: flex; flex-direction: column; gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.checkout-features li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--fs-300); color: var(--text-600); }
.checkout-features__check {
  flex: none; width: 1.3em; height: 1.3em; margin-top: .1em;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--paper-100); color: var(--signal-500);
  font-size: .8em; font-weight: 700;
}
.checkout-auth-prompt { color: var(--text-600); }
.checkout-auth-prompt a { color: var(--horizon-500); font-weight: 600; }
.checkout-auth-prompt a:hover { text-decoration: underline; }

/* ---------- Locale toggle (specs/008-hindi-site-locale) ---------- */
.locale-toggle { display: flex; gap: 2px; border: 1px solid var(--line-200, #e2e2e2); border-radius: 999px; padding: 2px; }
.locale-toggle__option {
  border: none; background: transparent; cursor: pointer;
  font-size: var(--fs-200, .8rem); font-weight: 600; letter-spacing: .02em;
  padding: .3em .7em; border-radius: 999px; color: var(--text-600, #555);
}
.locale-toggle__option--active { background: var(--horizon-500, #2f6fed); color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .checkout-grid { grid-template-columns: 1fr; }
  .calendar-milestone { flex-wrap: wrap; }
  .catalog-hero { padding: var(--space-6) var(--space-3); }
  .blog-layout { grid-template-columns: 1fr; }
  .blog-sidebar { position: static; }
  .concours-layout { grid-template-columns: 1fr; }
  .concours-sidebar { position: static; }
}