/* ===========================================================================
   Marroquin Markedsføring — pages.css
   Subpage-specific components (om-meg · prosjekter · hvem-jeg-jobber-med ·
   artikler + case/article detail). Reuses the same tokens, radii, shadows and
   type scale as the landing page. Load AFTER sections.css, BEFORE responsive.css.
   Responsive collapse for these components is co-located at the bottom of this
   file so each new pattern's behaviour stays in one place.
   Depends on tokens.css / base.css / components.css.
   =========================================================================== */

/* ---- Page hero · quiet sub-page intro on white -------------------------- */
.page-hero {
  position: relative;
  background: var(--color-paper);
  padding-block: calc(var(--nav-height) + clamp(2.25rem, 4vw, 3.75rem)) clamp(1.75rem, 3.5vw, 3rem);
}
.page-hero__inner { max-width: 54rem; }
.page-hero--center .page-hero__inner { max-width: 48rem; margin-inline: auto; text-align: center; }
.page-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-optical-sizing: auto;
  font-size: var(--text-4xl);
  line-height: 1.08;
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
  margin-top: var(--space-md);
}
.page-hero__title em { font-style: italic; font-weight: 600; color: var(--color-accent); }
.page-hero__lede {
  margin-top: var(--space-lg);
  font-size: clamp(1.075rem, 0.4vw + 1rem, 1.25rem);
  line-height: 1.58;
  color: var(--color-muted);
  max-width: 48ch;
}
.page-hero--center .page-hero__lede { margin-inline: auto; }
.page-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-top: var(--space-xl); }
.page-hero--center .page-hero__actions { justify-content: center; }

/* Breadcrumb (detail pages) */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem;
  font-size: var(--text-sm); color: var(--color-faint);
}
.crumbs a { color: var(--color-faint); transition: color var(--dur-short) var(--ease-out); }
.crumbs a:hover { color: var(--color-accent); }
.crumbs__sep { opacity: 0.55; }
.crumbs [aria-current="page"] { color: var(--color-ink-soft); }

/* Meta list (case facts: rolle · marked · kanaler · år) */
.meta-list { display: flex; flex-wrap: wrap; gap: clamp(1.25rem, 3vw, 2.75rem); margin-top: var(--space-xl); }
.meta-list__item { display: grid; gap: 0.2rem; }
.meta-list__label {
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-faint);
}
.meta-list__value { font-family: var(--font-body); font-weight: 600; font-size: var(--text-md); color: var(--color-ink); }

/* ---- Full-bleed light band (section rhythm without an inset panel) ------ */
.section--alt { background: var(--color-paper-2); }

/* ---- Left-aligned section head (subpage variant of .section-head) ------- */
.head-left { max-width: 44rem; }
.head-left .t-lead { margin-top: var(--space-md); }
.head-left .section-title { text-align: left; }

/* ---- Stats strip · real numbers only ------------------------------------ */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: var(--space-2xl);
}
.stat {
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 2.5vw, 2rem);
  box-shadow: var(--shadow-xs);
}
.stat__num {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-stat); line-height: 1.05;
  letter-spacing: var(--tracking-tight); color: var(--color-ink);
}
.stat__num em { font-style: normal; color: var(--color-accent); }
.stat__label { margin-top: 0.45rem; color: var(--color-muted); font-size: var(--text-sm); line-height: 1.4; }

/* ---- Career timeline (om-meg) ------------------------------------------- */
.timeline { margin-top: var(--space-2xl); max-width: 52rem; }
.timeline__item { display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 2vw, 1.5rem); }
.timeline__rail { display: flex; flex-direction: column; align-items: center; }
.timeline__dot {
  width: 1rem; height: 1rem; flex: none; border-radius: 50%;
  background: var(--color-accent); box-shadow: 0 0 0 5px var(--color-accent-tint);
  margin-top: 0.35rem;
}
.timeline__line { flex: 1; width: 2px; background: var(--color-rule-strong); margin-top: 0.35rem; }
.timeline__item:last-child .timeline__line { display: none; }
.timeline__body { padding-bottom: clamp(1.5rem, 3vw, 2.4rem); }
.timeline__item:last-child .timeline__body { padding-bottom: 0; }
.timeline__phase {
  font-family: var(--font-body); font-weight: 500; font-size: var(--text-sm);
  letter-spacing: 0.02em; color: var(--color-accent);
}
.timeline__role { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); margin-top: 0.15rem; }
.timeline__role span { color: var(--color-faint); font-weight: 500; }
.timeline__desc { margin-top: 0.45rem; color: var(--color-muted); font-size: var(--text-base); line-height: 1.6; max-width: 56ch; }

/* ---- 4-up feature grid (audience segments etc.) ------------------------- */
.features--quad { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---- Service list (who I work with) ------------------------------------- */
.service-list { border-top: 1px solid var(--color-rule); }
.service-row {
  display: grid;
  grid-template-columns: minmax(10rem, 0.55fr) 2.75rem minmax(0, 1.45fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: center;
  padding-block: clamp(1.25rem, 2.4vw, 1.9rem);
  border-bottom: 1px solid var(--color-rule);
  transition: color var(--dur-short) var(--ease-out),
              background-color var(--dur-short) var(--ease-out);
}
.service-row:hover { background: var(--color-paper-2); }
.service-row:hover .service-row__ic { background: var(--color-accent); color: var(--color-accent-ink); }
.service-row__name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 0.55vw + 1.1rem, 1.55rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-ink);
}
.service-row__ic {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--color-accent-tint);
  color: var(--color-accent);
  transition: color var(--dur-short) var(--ease-out),
              background-color var(--dur-short) var(--ease-out);
}
.service-row__ic svg {
  width: 1.25rem;
  height: 1.25rem;
}
.service-row__desc {
  max-width: 56ch;
  color: var(--color-muted);
  font-size: var(--text-base);
  line-height: 1.6;
}

/* ---- Project / work cards (prosjekter) ---------------------------------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: var(--space-2xl);
}
.work-card {
  display: flex; flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.work-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.work-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  display: grid; place-items: center;
  border-bottom: 1px solid var(--color-rule);
  overflow: hidden;
}
.work-card__body { display: flex; flex-direction: column; gap: 0.65rem; flex: 1; padding: clamp(1.35rem, 2.5vw, 1.9rem); }
.work-card__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.work-card__tag {
  font-size: var(--text-xs); font-weight: 500; color: var(--color-accent-hover);
  background: var(--color-accent-tint); padding: 0.25rem 0.65rem; border-radius: var(--radius-pill);
}
.work-card__title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); letter-spacing: var(--tracking-snug); }
.work-card__desc { color: var(--color-muted); font-size: var(--text-base); line-height: 1.55; flex: 1; }
.work-card__cta { margin-top: 0.3rem; }

/* Featured project: full-width, media beside body on wide screens */
.work-card--feature { grid-column: 1 / -1; }
.work-card--feature .work-card__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); height: 100%; }
.work-card--feature .work-card__media { aspect-ratio: auto; min-height: 22rem; border-bottom: 0; border-right: 1px solid var(--color-rule); }
.work-card--feature .work-card__body { padding: clamp(1.75rem, 3.5vw, 3rem); justify-content: center; gap: 0.85rem; }
.work-card--feature .work-card__title { font-size: var(--text-2xl); }
.work-card--feature .work-card__desc { max-width: 46ch; font-size: var(--text-md); }

/* Emblem visual placeholder (no fake screenshots — abstract, on-brand) */
.emblem { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.emblem__mark {
  display: grid; place-items: center;
  width: clamp(4.5rem, 9vw, 6.5rem); height: clamp(4.5rem, 9vw, 6.5rem);
  border-radius: 24px;
  background: color-mix(in srgb, var(--color-paper) 78%, transparent);
  border: 1px solid var(--color-rule);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 2.9rem); color: var(--color-accent);
}
.emblem__tag {
  position: absolute;
  padding: 0.4rem 0.85rem; border-radius: var(--radius-pill);
  background: var(--color-surface); border: 1px solid var(--color-rule);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500; color: var(--color-ink);
  white-space: nowrap;
}
.emblem__tag--1 { top: 16%; left: 10%; }
.emblem__tag--2 { bottom: 18%; right: 9%; }
.emblem__tag--accent { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); box-shadow: var(--shadow-accent); }

/* Soft visual tints (kept within the blue/neutral system; one green for growth) */
.viz-a { background: linear-gradient(155deg, #eef1fc 0%, #dfe6fb 100%); }
.viz-b { background: linear-gradient(155deg, #eaf7f0 0%, #d7efe4 100%); }
.viz-c { background: linear-gradient(155deg, #f1eefb 0%, #e4ddf7 100%); }
.viz-d { background: linear-gradient(155deg, #f6f7fb 0%, #e9ecf6 100%); }
.viz-blue { background: linear-gradient(155deg, var(--color-accent) 0%, #2f49d6 100%); }
.viz-blue .emblem__mark { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.28); color: #fff; }
.viz-blue .emblem__tag { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.28); color: #fff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

/* ---- Fit columns (hvem-jeg-jobber-med: passer / passer ikke) ------------ */
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 1.75rem); margin-top: var(--space-2xl); }
.fit__col {
  background: var(--color-surface); border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.35rem); box-shadow: var(--shadow-xs);
}
.fit__col--yes { border-color: color-mix(in srgb, var(--color-success) 30%, var(--color-rule)); }
.fit__head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: var(--space-lg); }
.fit__badge { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; flex: none; border-radius: 50%; }
.fit__badge svg { width: 1.25rem; height: 1.25rem; }
.fit__badge--yes { background: var(--color-success-tint); color: var(--color-success); }
.fit__badge--no { background: var(--color-danger-tint); color: var(--color-danger); }
.fit__title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); }
.fit__list { display: grid; gap: 0.9rem; }
.fit__list li { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; color: var(--color-ink-soft); font-size: var(--text-base); line-height: 1.5; }
.fit__list svg { width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; flex: none; }
.fit__col--yes .fit__list svg { color: var(--color-success); }
.fit__col--no .fit__list svg { color: var(--color-faint); }

/* ---- Process steps ------------------------------------------------------ */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin-top: var(--space-2xl); }
.step {
  position: relative; background: var(--color-surface); border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg); padding: clamp(1.5rem, 2.5vw, 2rem); box-shadow: var(--shadow-xs);
}
.step__num {
  display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: 50%;
  background: var(--color-accent-tint); color: var(--color-accent-hover);
  font-family: var(--font-body); font-weight: 700; font-size: 1.15rem; margin-bottom: var(--space-md);
}
.step__title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); }
.step__desc { margin-top: 0.4rem; color: var(--color-muted); font-size: var(--text-base); line-height: 1.55; }

/* ---- Article cards (artikler) ------------------------------------------- */
.article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); margin-top: var(--space-2xl); }
.article-card {
  display: flex; flex-direction: column;
  background: var(--color-surface); border: 1px solid var(--color-rule);
  border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-xs);
  transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.article-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.article-card__media { aspect-ratio: 16 / 9; display: grid; place-items: center; border-bottom: 1px solid var(--color-rule); overflow: hidden; }
.article-card__body { display: flex; flex-direction: column; gap: 0.55rem; flex: 1; padding: clamp(1.35rem, 2.5vw, 1.75rem); }
.article-card__cat { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-accent); }
.article-card__title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); line-height: 1.22; letter-spacing: var(--tracking-snug); }
.article-card__excerpt { color: var(--color-muted); font-size: var(--text-base); line-height: 1.55; flex: 1; }
.article-card__meta { display: flex; align-items: center; gap: 0.5rem; margin-top: auto; padding-top: 0.5rem; font-size: var(--text-sm); color: var(--color-faint); }
.article-card__meta span { display: inline-flex; }
.article-card__dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }

/* Featured article: full-width, media beside body */
.article-card--feature { grid-column: 1 / -1; flex-direction: row; }
.article-card--feature .article-card__media { aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--color-rule); flex: 1 1 46%; min-height: 20rem; }
.article-card--feature .article-card__body { flex: 1 1 54%; justify-content: center; padding: clamp(1.75rem, 3.5vw, 3rem); gap: 0.75rem; }
.article-card--feature .article-card__title { font-size: var(--text-2xl); }
.article-card--feature .article-card__excerpt { font-size: var(--text-md); max-width: 48ch; }

/* Category filter */
.filter { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: var(--space-xl); }
.filter__chip {
  padding: 0.5rem 1.1rem; border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500;
  background: var(--color-surface); border: 1px solid var(--color-rule-strong); color: var(--color-ink-soft);
  transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.filter__chip:hover { border-color: var(--color-accent); color: var(--color-accent); }
.filter__chip.is-active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }

/* ---- Long-form prose (article + case body) ------------------------------ */
.prose { max-width: 44rem; margin-inline: auto; }
.prose > * + * { margin-top: var(--space-lg); }
.prose h2 { font-size: var(--text-xl); letter-spacing: var(--tracking-snug); margin-top: var(--space-2xl); }
.prose h3 { font-size: var(--text-lg); margin-top: var(--space-xl); }
.prose p { color: var(--color-ink-soft); font-size: var(--text-md); line-height: 1.72; }
.prose ul { display: grid; gap: 0.7rem; }
.prose ul li { position: relative; padding-left: 1.6rem; color: var(--color-ink-soft); font-size: var(--text-md); line-height: 1.6; }
.prose ul li::before { content: ""; position: absolute; left: 0.25rem; top: 0.62em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-accent); }
.prose blockquote {
  border-left: 3px solid var(--color-accent); padding: 0.35rem 0 0.35rem 1.5rem;
  font-family: var(--font-display); font-weight: 600; font-style: italic;
  font-size: var(--text-xl); line-height: 1.3; color: var(--color-ink);
}
.prose a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--color-accent-hover); }
.prose strong { color: var(--color-ink); font-weight: 700; }
.prose figure { margin-block: var(--space-xl); }
.prose figcaption { margin-top: 0.65rem; font-size: var(--text-sm); color: var(--color-faint); text-align: center; }

/* Lead paragraph inside prose */
.prose__lead { font-size: var(--text-lg) !important; color: var(--color-ink-soft) !important; line-height: 1.6 !important; }

/* ---- Qualitative result tiles (case — no fabricated metrics) ------------ */
.results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin-top: var(--space-xl); }
.result { background: var(--color-surface); border: 1px solid var(--color-rule); border-radius: var(--radius-lg); padding: clamp(1.4rem, 2.5vw, 1.9rem); box-shadow: var(--shadow-xs); }
.result__ic { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: var(--radius-sm); background: var(--color-success-tint); color: var(--color-success); margin-bottom: var(--space-md); }
.result__ic svg { width: 1.35rem; height: 1.35rem; }
.result__title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); }
.result__desc { margin-top: 0.4rem; color: var(--color-muted); font-size: var(--text-base); line-height: 1.55; }

/* Big pull figure that is honest (real portfolio number) */
.figure-band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); }
.figure__num { font-family: var(--font-display); font-weight: 700; font-size: var(--text-stat); color: var(--color-accent); line-height: 1; }
.figure__label { margin-top: 0.5rem; color: var(--color-on-blue-muted); font-size: var(--text-sm); }

/* ---- Author byline + post foot nav -------------------------------------- */
.byline { display: flex; align-items: center; gap: 0.85rem; }
.byline__av { width: 2.9rem; height: 2.9rem; flex: none; border-radius: 50%; overflow: hidden; background: var(--color-paper-2); }
.byline__av img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.byline__name { font-family: var(--font-body); font-weight: 700; color: var(--color-ink); }
.byline__meta { font-size: var(--text-sm); color: var(--color-faint); }

.post-foot {
  max-width: 44rem; margin: var(--space-2xl) auto 0; padding-top: var(--space-xl);
  border-top: 1px solid var(--color-rule);
  display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; justify-content: space-between;
}

/* Share / tag row */
.tag-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag {
  font-size: var(--text-xs); font-weight: 500; color: var(--color-ink-soft);
  background: var(--color-paper-2); border: 1px solid var(--color-rule); padding: 0.3rem 0.75rem; border-radius: var(--radius-pill);
}

/* ---- Detail page cover banner (case / article) -------------------------- */
.page-hero .crumbs { margin-bottom: var(--space-md); }
.page-hero__dek { margin-top: var(--space-lg); }
.page-hero .byline { margin-top: var(--space-xl); }
.case-cover {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  aspect-ratio: 16 / 6.2;
  display: grid; place-items: center;
  border: 1px solid var(--color-rule);
}

/* Author panel (article foot) */
.author {
  display: flex; gap: var(--space-lg); align-items: flex-start;
  max-width: 44rem; margin: var(--space-2xl) auto 0;
  background: var(--color-paper-2); border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.author__av { width: 3.75rem; height: 3.75rem; flex: none; border-radius: 50%; overflow: hidden; background: var(--color-surface); }
.author__av img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.author__name { font-family: var(--font-body); font-weight: 700; font-size: var(--text-md); }
.author__bio { margin-top: 0.35rem; color: var(--color-muted); font-size: var(--text-base); line-height: 1.55; }
.author__link { margin-top: var(--space-sm); }

/* ---- Contact strip (compact CTA → canonical form on index) -------------- */
.contact-strip {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
}
.contact-strip__links { display: flex; flex-wrap: wrap; gap: 0.85rem 1.75rem; margin-top: var(--space-md); }

/* =========================================================================
   Responsive — subpage components (mirrors the 60/48/40rem system)
   ========================================================================= */
@media (max-width: 60rem) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .features--quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-grid { grid-template-columns: 1fr; }
  .work-card--feature .work-card__inner { grid-template-columns: 1fr; }
  .work-card--feature .work-card__media { min-height: 15rem; border-right: 0; border-bottom: 1px solid var(--color-rule); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-card--feature { flex-direction: column; }
  .article-card--feature .article-card__media { border-right: 0; border-bottom: 1px solid var(--color-rule); min-height: 14rem; }
  .results { grid-template-columns: 1fr; }
  .figure-band { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact-strip { grid-template-columns: 1fr; }
}

@media (max-width: 48rem) {
  .fit { grid-template-columns: 1fr; }
  .article-grid { grid-template-columns: 1fr; }
  .figure-band { grid-template-columns: 1fr; gap: var(--space-lg); }
  .case-cover { aspect-ratio: 16 / 9; }
  .author { flex-direction: column; gap: var(--space-md); }
}

@media (max-width: 40rem) {
  .stats { grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
  .features--quad { grid-template-columns: 1fr; }
  .service-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-sm) var(--space-md);
  }
  .service-row__ic { grid-column: 2; grid-row: 1; }
  .service-row__desc { grid-column: 1 / -1; }
  .steps { grid-template-columns: 1fr; }
  .meta-list { gap: 1.1rem 1.75rem; }
  .page-hero__actions .btn { flex: 1 1 auto; }
  .post-foot { flex-direction: column; align-items: stretch; }
  .post-foot .btn, .post-foot .link-cta { justify-content: center; }
}

@media (max-width: 30rem) {
  .stats { grid-template-columns: 1fr; }
}