/* Home + archive pages. Reference: ui_kits/blog/HomeScreen.jsx */

.home{padding-bottom:var(--space-8)}
.section-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:32px}
.section-title{margin:0;font:var(--fw-display) 32px/1 var(--font-display);letter-spacing:var(--tracking-heading);color:var(--fg-1)}

/* ---------- Hero ---------- */
.home-hero{padding:96px 0 72px;display:grid;gap:24px}
.home-hero__title{margin:0;font:var(--fw-display) 88px/.96 var(--font-display);letter-spacing:var(--tracking-display);color:var(--fg-1);max-width:1000px;text-wrap:balance}
.home-hero__title--sm{font-size:52px;line-height:1.02}
.home-hero__lead{margin:0;max-width:620px;font:var(--type-lead);color:var(--fg-3);text-wrap:pretty}
.home-hero--compact{padding:72px 0 40px;gap:16px}

/* ---------- Featured ---------- */
.featured__inner{padding:32px}
.featured__inner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:center}
.featured__cover{position:relative;display:grid;align-content:end;gap:16px;aspect-ratio:16/11;padding:32px;border-radius:18px;overflow:hidden;isolation:isolate;background:var(--surface-raised)}
.featured__img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;filter:var(--img-feature)}
.featured__scrim{position:absolute;inset:0;z-index:-1;background:var(--scrim-card)}
.featured__overlay{display:grid;gap:16px}
.featured__title{margin:0;font:var(--fw-display) clamp(32px,3.6vw,48px)/1.02 var(--font-display);letter-spacing:var(--tracking-display);color:var(--fg-1);text-wrap:balance;text-shadow:0 1px 24px rgba(0,0,0,.5)}
.featured__body{display:grid;gap:20px;padding-right:16px}
.featured__excerpt{margin:0;font-size:18px;line-height:1.55;color:var(--fg-2);text-wrap:pretty}
.featured__meta{display:flex;flex-wrap:wrap;align-items:center;column-gap:20px;row-gap:14px;margin-top:8px}

/* ---------- Recent ---------- */
.recent{margin-top:120px}
.recent__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.recent__grid>.post-card{height:100%}

/* ---------- Archive ---------- */
.archive{margin-top:96px}
.archive__title{margin-bottom:8px}
.archive__list{display:grid}
.archive__more{display:flex;justify-content:center;gap:12px;padding-top:40px;margin-top:0;border-top:1px solid var(--border-subtle)}
.load-more[aria-busy="true"]{opacity:.5;pointer-events:none}
.home--archive .archive{margin-top:24px}

/* ---------- Subscribe ---------- */
.subscribe{margin-top:120px}
.subscribe__inner{padding:56px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.subscribe__copy{display:grid;gap:14px}
.subscribe__title{margin:0;font:var(--fw-display) 44px/1.02 var(--font-display);letter-spacing:var(--tracking-display);color:var(--fg-1)}
.subscribe__lead{margin:0;font-size:17px;line-height:1.55;color:var(--fg-3)}
.subscribe__form{display:grid;gap:12px}
.subscribe__success,.subscribe__error{display:none;margin:0}
.subscribe__success{font:italic 400 24px/1.3 var(--font-serif);color:var(--fg-1)}
.subscribe__error{font-size:14px;color:var(--danger)}
.subscribe__form.success .field{display:none}
.subscribe__form.success .subscribe__success{display:block}
.subscribe__form.error .subscribe__error{display:block}
.subscribe__form.loading .field{opacity:.6}

/* ---------- Breakpoints ---------- */
@media (max-width:1100px){
  .recent__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .featured__meta .btn .icon{display:none}
}
@media (max-width:760px){
  .home-hero{padding:56px 0 48px}
  .home-hero__title{font-size:clamp(44px,13vw,60px);line-height:.98}
  .home-hero__title--sm{font-size:clamp(34px,9vw,44px)}
  .home-hero__lead{font-size:19px}
  .featured__inner{grid-template-columns:minmax(0,1fr);gap:24px;padding:16px}
  .featured__cover{aspect-ratio:auto;min-height:380px;padding:20px;gap:12px}
  .featured__body{padding:0 4px 8px}
  .recent,.archive,.subscribe{margin-top:72px}
  .recent__grid{grid-template-columns:minmax(0,1fr)}
  .post-card--cover .post-card__inner{padding:22px}
  .subscribe__inner{grid-template-columns:minmax(0,1fr);gap:24px;padding:24px}
  .subscribe__title{font-size:clamp(30px,8.5vw,40px)}
}