/* seo-editorial.css — responsive layout for the three editorial SEO sections.
   Uses container queries so each section reflows based on its own width —
   the same component renders at 1440px desktop and 390px mobile from one
   source. Inline styles in seo-editorial.jsx handle everything else;
   this file owns only the grid/typography choices that change with width. */

/* ============================================================
   1. Magazine feature
   ============================================================ */
.seo-feat {
  container-type: inline-size;
  container-name: feat;
}
.seo-feat-spread {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 64px;
  align-items: start;
}
.seo-feat-h2          { font-size: 62px; line-height: 1.02; }
.seo-feat-dek         { font-size: 22px; max-width: 640px; }
.seo-feat-dropcap     { font-size: 92px; padding: 6px 12px 0 0; }
.seo-feat-body        { font-size: 18px; line-height: 1.65; }
.seo-feat-pullquote   { font-size: 30px; }
.seo-feat-subhead     { font-size: 26px; }
.seo-feat-sidebar     { padding: 28px 26px 26px; position: sticky; top: 24px; }
.seo-feat-stat        { font-size: 30px; }
.seo-feat-section-pad { padding: 88px 40px 96px; }
.seo-feat-header-bar  { padding-bottom: 18px; margin-bottom: 36px; }
.seo-feat-sidebar-row { grid-template-columns: 92px 1fr; gap: 14px; }

@container feat (max-width: 760px) {
  .seo-feat-section-pad { padding: 44px 20px 52px; }
  .seo-feat-header-bar  { padding-bottom: 12px; margin-bottom: 22px; flex-wrap: wrap; gap: 6px; }
  .seo-feat-spread      { grid-template-columns: 1fr; gap: 28px; }
  .seo-feat-h2          { font-size: 34px; line-height: 1.08; }
  .seo-feat-dek         { font-size: 17px; max-width: none; }
  .seo-feat-dropcap     { font-size: 56px; padding: 2px 8px 0 0; }
  .seo-feat-body        { font-size: 15.5px; }
  .seo-feat-pullquote   { font-size: 20px; line-height: 1.3; }
  .seo-feat-subhead     { font-size: 20px; }
  .seo-feat-sidebar     { padding: 20px 18px; position: static; }
  .seo-feat-stat        { font-size: 24px; }
  .seo-feat-sidebar-row { grid-template-columns: 64px 1fr; gap: 10px; }
}

/* ============================================================
   2. Booking journey — three phases with mini timelines
   ============================================================ */
.seo-journey {
  container-type: inline-size;
  container-name: journey;
}
.seo-journey-pad        { padding: 80px 40px 88px; }
.seo-journey-head       { grid-template-columns: 1.2fr 1fr; gap: 56px; }
.seo-journey-h2         { font-size: 52px; line-height: 1.05; }
.seo-journey-dek        { font-size: 19px; }
.seo-journey-card       { padding: 32px 36px 28px; }
.seo-journey-card-head  { grid-template-columns: 160px 1fr; gap: 32px; padding-bottom: 24px; }
.seo-journey-label      { font-size: 32px; }
.seo-journey-intro      { font-size: 15.5px; }
.seo-journey-step       { grid-template-columns: 72px 32px 1fr; gap: 16px; }
.seo-journey-rail       { left: 88px; }
.seo-journey-step-time  { font-size: 12px; }
.seo-journey-step-title { font-size: 17px; }
.seo-journey-step-body  { font-size: 14px; }
.seo-journey-closing    { flex-wrap: nowrap; }

@container journey (max-width: 760px) {
  .seo-journey-pad        { padding: 44px 20px 28px; }
  .seo-journey-head       { grid-template-columns: 1fr; gap: 16px; align-items: start; }
  .seo-journey-h2         { font-size: 28px; line-height: 1.1; }
  .seo-journey-dek        { font-size: 15px; }
  .seo-journey-card       { padding: 18px 16px 16px; }
  .seo-journey-card-head  { grid-template-columns: 1fr; gap: 10px; padding-bottom: 16px; }
  .seo-journey-label      { font-size: 22px; }
  .seo-journey-intro      { font-size: 14px; line-height: 1.55; }
  .seo-journey-step       { grid-template-columns: 60px 22px 1fr; gap: 10px; }
  .seo-journey-rail       { left: 70px; }
  .seo-journey-step-time  { font-size: 11px; }
  .seo-journey-step-title { font-size: 15px; }
  .seo-journey-step-body  { font-size: 13.5px; }
  .seo-journey-closing    { flex-wrap: wrap; gap: 14px; }
  .seo-journey-closing button { width: 100%; justify-content: center; }
}

/* ============================================================
   3. FAQ — grouped questions desk
   ============================================================ */
.seo-faq {
  container-type: inline-size;
  container-name: faq;
}
.seo-faq-pad        { padding: 80px 40px 92px; }
.seo-faq-head       { grid-template-columns: 1.2fr 1fr; gap: 56px; }
.seo-faq-h2         { font-size: 48px; line-height: 1.05; }
.seo-faq-dek        { font-size: 18px; }
.seo-faq-grid       { grid-template-columns: repeat(2, 1fr); gap: 24px 56px; }
.seo-faq-label      { font-size: 22px; }
.seo-faq-q          { font-size: 16px; }
.seo-faq-a          { font-size: 14px; }
.seo-faq-foot       { flex-wrap: nowrap; }

@container faq (max-width: 760px) {
  .seo-faq-pad        { padding: 44px 20px 52px; }
  .seo-faq-head       { grid-template-columns: 1fr; gap: 16px; align-items: start; }
  .seo-faq-h2         { font-size: 28px; line-height: 1.1; }
  .seo-faq-dek        { font-size: 15px; }
  .seo-faq-grid       { grid-template-columns: 1fr; gap: 28px; }
  .seo-faq-label      { font-size: 18px; }
  .seo-faq-q          { font-size: 15px; }
  .seo-faq-a          { font-size: 13.5px; }
  .seo-faq-foot       { flex-wrap: wrap; gap: 14px; }
  .seo-faq-foot .seo-faq-foot-actions { width: 100%; flex-wrap: wrap; }
  .seo-faq-foot .seo-faq-foot-actions button { flex: 1; min-width: 140px; justify-content: center; }
}