/* ============================================================
   franco-media.com - home page (hero, category grid, articles, rail)
   TASK-N05 Block B3, 05-09-2026. Values from BUILD-SPEC.md sections
   2, 3, 4 and 10, and reference/01-home-desktop-1440.html. Only
   loaded on the front page (see gpcf_enqueue_styles()). Uses the
   same tokens.css variables as header-footer.css - no new colours,
   sizes or radii invented here.
   ============================================================ */

.hero,
.sect{
  border-radius:var(--radius-band);
}
.sect{ border-radius:0; }

.hero .wrap,
.sect .wrap{
  max-width:var(--content-max);
  margin:0 auto;
  padding-left:var(--page-gutter);
  padding-right:var(--page-gutter);
}

/* ---------- 2 · Hero band ---------- */

.hero{
  background:var(--os-band);
  color:#fff;
}
.hero .wrap{
  padding-top:70px;
  padding-bottom:74px;
}
.hero .stamp{
  display:inline-block;
  white-space:nowrap;
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-stamp);
  letter-spacing:var(--ls-stamp);
  text-transform:uppercase;
  background:var(--on-dark-fill);
  padding:6px 13px;
  border-radius:var(--radius-pill);
  margin-bottom:var(--space-9);
}
.hero h1{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-hero-h1);
  line-height:var(--lh-hero-h1);
  letter-spacing:var(--ls-hero-h1);
  max-width:20ch;
  color:#fff;
}
.hero p{
  margin:var(--space-9) 0 0;
  font-family:var(--font-body);
  font-size:var(--size-hero-sub);
  line-height:1.45;
  color:var(--on-dark-hero-sub);
  max-width:46ch;
}

/* ---------- Section shell (grid + articles) ---------- */

.sect{ padding:56px 0 0; }
.eyebrow{
  margin:0 0 6px;
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-eyebrow);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--os-link);
}
.sect h2{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-section-h2);
  line-height:1.15;
  color:var(--os-heading);
}
.sect .lead{
  margin:10px 0 0;
  font-family:var(--font-body);
  font-size:var(--size-lead);
  line-height:1.5;
  color:var(--os-muted);
  max-width:56ch;
}

/* ---------- 3 · Category grid ----------
   .cats/.cat/.badge moved to shared-components.css in Block N19
   slice 5, unchanged, so the launcher panel and the mobile overlay
   can reuse them sitewide. No value changed - this file now keeps
   only the home page's own mobile override below. */

/* ---------- 4 + 5 · Articles grid ----------
   .split, .rail, .slot, .widget, .chip moved to shared-components.css
   in Block B4 - now reused by the client profile template too. No
   value changed, this file keeps only what is specific to the home
   article grid (.cards, .card). */

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--card-gap);
}
.card{
  background:var(--os-card);
  border:1px solid var(--os-line);
  border-radius:var(--radius-card);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  color:inherit;
  transition:box-shadow var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);
}
.card:hover{
  box-shadow:var(--shadow-floating);
  transform:translateY(-2px);
}
.card .ph{
  aspect-ratio:16 / 10;
  background:var(--os-sunken);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-label);
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--os-text); /* N28 (DY3C): muted on sunken measures 4.42:1 */
}
.card .ph.ph-photo{ padding:0; }
.card .ph.ph-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.card .body{
  padding:14px 16px 16px;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.chip{
  align-self:flex-start;
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-label);
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--os-link);
  background:var(--os-tint);
  padding:4px 10px;
  border-radius:var(--radius-pill);
}
.card h3{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-card-title);
  line-height:var(--lh-card-title);
  color:var(--os-heading);
}
.card time{
  font-family:var(--font-body);
  font-size:var(--size-caption);
  color:var(--os-muted);
}

/* ---------- Mobile (390px), BUILD-SPEC section 12 ---------- */

@media (max-width:768px){
  .hero .wrap{ padding:30px 18px 34px; }
  .hero .stamp{ margin-bottom:14px; }
  .hero h1{ font-size:var(--m-size-hero-h1); letter-spacing:var(--m-ls-hero-h1); }
  .hero p{ font-size:16px; }

  .sect{ padding:34px 0 0; }
  .sect .wrap{ padding-left:var(--page-gutter-mobile); padding-right:var(--page-gutter-mobile); }
  .sect h2{ font-size:var(--m-size-h2); }

  .cats{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .cat{ padding:16px 12px 14px; gap:9px; min-height:110px; }
  .cat b{ font-size:15px; }
  .sect .cat > span:not(.badge){ font-size:12px; } /* N37 (DF2): the note line of the home grid tiles only; the badge, the launcher tiles and the mobile menu keep the sitewide rules */

  /* .split/.rail/.slot mobile rules now in shared-components.css. */
  .cards{ grid-template-columns:1fr; gap:14px; }
  .card .ph{ aspect-ratio:16 / 9; }
}

/* ============================================================
   TASK-N40 (A, B, F, ruling HI2): intro (trust strip removed in N40e), spotlight, article cards
   with excerpts, text band to the rates page. Existing tokens only.
   The .hero rules above are no longer printed (the hero is the page header now,
   page-header.css); they stay one more build.
   ============================================================ */

.sect.intro{ padding-top:40px; }
.sect.intro .lead{
  max-width:68ch;
  font-size:var(--size-lead);
  line-height:1.6;
  color:var(--os-text);
}
.spots{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--card-gap);
  margin-top:26px;
}
.spot{
  background:var(--os-card);
  border:1px solid var(--os-line);
  border-radius:var(--radius-card);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  color:inherit;
  transition:box-shadow var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);
}
.spot, .spot:hover, .spot:focus{ text-decoration:none; }
.spot:hover{ box-shadow:var(--shadow-floating); transform:translateY(-2px); }
.spot .ph{ aspect-ratio:16 / 9; background:var(--os-sunken); overflow:hidden; }
.spot .ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.spot .ph.ph-accent{ background:var(--acc,var(--os-link)); }
.spot .body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:9px; }
.spot[style] .chip{ color:var(--acc); background:var(--acc-tint); }
.spot h3{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-card-title);
  line-height:var(--lh-card-title);
  color:var(--os-heading);
}
.spot p{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--size-small);
  line-height:var(--lh-body);
  color:var(--os-muted);
}

.card, .card:hover, .card:focus{ text-decoration:none; }
.card .excerpt{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--size-small);
  line-height:var(--lh-body);
  color:var(--os-muted);
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  line-clamp:3;
  overflow:hidden;
}

.ratesband-sect{ padding-bottom:56px; }
.ratesband{
  background:var(--os-band);
  border-radius:var(--radius-band);
  padding:36px 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}
.ratesband .eyebrow{ color:var(--on-dark-hero-sub); }
.ratesband-sect .ratesband h2{ color:#fff; }
.ratesband p:not(.eyebrow){
  margin:10px 0 0;
  font-family:var(--font-body);
  font-size:var(--size-lead);
  line-height:1.5;
  color:var(--on-dark-hero-sub);
  max-width:54ch;
}
.ratesband .btn{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  box-sizing:border-box;
  background:var(--os-cta);
  color:var(--os-cta-ink);
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:18px;
  line-height:1.2;
  padding:13px 26px;
  border-radius:var(--radius-sm);
  white-space:nowrap;
  text-decoration:none;
  transition:background var(--duration-base) var(--ease);
}
.ratesband .btn:hover{ background:var(--os-cta-hover); }
.ratesband .btn svg{ stroke:currentColor; display:block; }
.ratesband .btn:focus-visible{ outline:3px solid #fff; outline-offset:3px; }

@media (max-width:768px){
  .sect.intro{ padding-top:26px; }
  .spots{ grid-template-columns:repeat(2,1fr); gap:12px; margin-top:20px; }
  .spot .body{ padding:12px 12px 14px; gap:7px; }
  .spot h3{ font-size:15px; }
  .spot p{ font-size:13px; }
  .ratesband-sect{ padding-bottom:34px; }
  .ratesband{ flex-direction:column; align-items:flex-start; padding:26px 20px; gap:20px; }
  .ratesband .btn{ width:100%; min-height:var(--tap-comfortable); white-space:normal; }
}