/* Hallmark · redesign · genre: editorial · theme: studied-DNA (harvard.edu)
 * pre-emit critique: P5 H5 E4 S5 R5 V4
 * source: harvard.edu — crimson #A51C30 · Source Serif 4 + system sans · black/white/hairline
 * ============================================================
 * blocks.css — homepage editable (Gutenberg) gaya harvard.edu.
 * Palet: krimson dipakai HEMAT sebagai aksen di atas hitam/putih.
 * Serif display + eyebrow sans UPPERCASE + rule tipis + ruang lega.
 * Kelas uh-b-* dipakai pattern → bisa dipakai di halaman mana pun.
 * ============================================================ */
:root{
  --uh-crimson:#A51C30;      /* Harvard Crimson */
  --uh-crimson-dk:#8b1526;
  --uh-ink:#1d1d1b;          /* near-black teks & heading */
  --uh-body:#33332f;
  --uh-muted:#6c6c68;
  --uh-line:#e3e0da;         /* hairline rule */
  --uh-paper:#ffffff;
  --uh-paper-2:#f7f5f1;      /* off-white band */
  --uh-overlay:#1a1512;
  --uh-font-display:"Source Serif 4","Source Serif Pro",Georgia,"Times New Roman",serif;
  --uh-font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* Homepage: lepaskan <main> dari kontainer ber-max-width Astra (.ast-container
   default: max-width 1240, padding 20, kadang display:flex) supaya section
   full-bleed benar & konten tak tergeser. Scoped ke halaman depan (.home). */
body.home #content .ast-container,
body.uh-moment-page #content .ast-container,
body.uh-faculty-page #content .ast-container,
body.uh-about-page #content .ast-container{max-width:none;margin:0;padding:0;display:block;}
body.home .uh-home,
body.uh-moment-page .uh-home,
body.uh-faculty-page .uh-home,
body.uh-about-page .uh-home{width:100%;}
body.home #content .ast-container > .ast-row,
body.home #primary,
body.uh-moment-page #content .ast-container > .ast-row,
body.uh-moment-page #primary,
body.uh-faculty-page #content .ast-container > .ast-row,
body.uh-faculty-page #primary,
body.uh-about-page #content .ast-container > .ast-row,
body.uh-about-page #primary{width:100%;max-width:none;padding:0;margin:0;}

/* <main> kini full-viewport → alignfull = 100% */
.uh-blocks .alignfull{width:100%;max-width:none;margin-left:0;margin-right:0;}
.uh-blocks{overflow-x:clip;color:var(--uh-body);}
.uh-blocks h1,.uh-blocks h2,.uh-blocks h3{font-family:var(--uh-font-display);font-style:normal;color:var(--uh-ink);min-width:0;overflow-wrap:anywhere;}

/* ---------- Eyebrow (UPPERCASE sans, letter-spaced — tanda Harvard) ---------- */
.uh-eyebrow{font-family:var(--uh-font-sans);font-size:12px !important;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--uh-crimson);margin:0 0 16px !important;}

/* ============================================================
   HERO (wp:cover) — editorial, foto terlihat, teks kiri
   ============================================================ */
.uh-b-hero{position:relative;min-height:clamp(480px,68vh,660px);display:flex;align-items:flex-end;color:#fff;}
/* Scrim = gradien pada BACKGROUND SPAN cover. Span ada sebelum inner-container
   di DOM → teks otomatis di atas scrim (tanpa perang z-index). Alpha di-bake,
   opacity span dipaksa 1. Robust utk foto apa pun & di semua z-index. */
.uh-b-hero .wp-block-cover__background{opacity:1 !important;background:linear-gradient(to top,rgba(14,10,9,.95) 0%,rgba(14,10,9,.86) 40%,rgba(14,10,9,.5) 70%,rgba(14,10,9,.18) 100%) !important;}
.uh-b-hero .wp-block-cover__inner-container{max-width:1200px;width:100%;margin:0 auto;padding:clamp(40px,7vw,86px) clamp(20px,5vw,52px);text-align:left;}
.uh-b-hero .uh-eyebrow{color:#f4bcc3 !important;}
.uh-b-hero h1{color:#fff !important;font-weight:600;font-size:clamp(38px,6.4vw,74px);line-height:1.03;letter-spacing:-.015em;margin:0;max-width:20ch;overflow-wrap:anywhere;text-shadow:0 2px 30px rgba(0,0,0,.4);}
.uh-b-hero .uh-b-lead{color:#f1e9e4 !important;font-size:clamp(17px,2vw,21px);line-height:1.55;max-width:58ch;margin:22px 0 0;font-family:var(--uh-font-sans);}
.uh-b-hero .wp-block-buttons{margin-top:34px;gap:12px;}

/* ---------- Tombol: krimson solid + ghost (persegi, editorial) ---------- */
.uh-blocks .wp-block-button__link{border-radius:2px;font-family:var(--uh-font-sans);font-weight:600;font-size:15px;letter-spacing:.01em;padding:14px 26px;transition:background .15s var(--ease-out,ease),color .15s,border-color .15s;}
.uh-b-btn-crimson .wp-block-button__link{background:var(--uh-crimson);color:#fff;border:1px solid var(--uh-crimson);}
.uh-b-btn-crimson .wp-block-button__link:hover{background:var(--uh-crimson-dk);border-color:var(--uh-crimson-dk);}
.uh-b-btn-ghost .wp-block-button__link{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.65);}
.uh-b-btn-ghost .wp-block-button__link:hover{background:rgba(255,255,255,.14);}

/* ---------- INTRO / lead editorial ---------- */
.uh-b-intro{max-width:900px;margin:0 auto;padding:clamp(52px,8vw,96px) clamp(20px,4vw,40px);text-align:center;border-bottom:1px solid var(--uh-line);}
.uh-b-intro p{font-family:var(--uh-font-display);font-size:clamp(23px,3.1vw,34px);line-height:1.4;color:var(--uh-ink);margin:0;letter-spacing:-.01em;}

/* ============================================================
   FOKUS — kartu berita gaya Harvard: gambar, eyebrow kategori,
   judul serif, garis tipis. Tanpa kartu kotak/rounded.
   ============================================================ */
.uh-b-focus{max-width:1200px;margin:0 auto;padding:clamp(48px,7vw,86px) clamp(20px,4vw,40px);gap:clamp(28px,4vw,48px);}
.uh-b-focus .wp-block-column{background:transparent;border:0;border-top:2px solid var(--uh-ink);border-radius:0;overflow:visible;display:flex;flex-direction:column;padding-top:22px;}
.uh-b-focus .wp-block-image{margin:0 0 20px;order:-1;}
.uh-b-focus .wp-block-image img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;border-radius:0;}
.uh-b-focus .uh-b-cat{font-family:var(--uh-font-sans);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--uh-crimson);margin:0 0 10px;}
.uh-b-focus h3{font-size:24px;line-height:1.18;font-weight:600;margin:0 0 10px;letter-spacing:-.01em;}
.uh-b-focus p{color:var(--uh-muted);font-family:var(--uh-font-sans);font-size:15px;line-height:1.55;margin:0;}

/* ============================================================
   STATISTIK — band off-white, angka serif krimson (bukan blok warna)
   ============================================================ */
.uh-b-stats{background:var(--uh-paper-2);color:var(--uh-ink);padding:clamp(52px,7vw,88px) clamp(20px,4vw,40px);border-top:1px solid var(--uh-line);border-bottom:1px solid var(--uh-line);text-align:center;}
.uh-b-stats .uh-eyebrow{color:var(--uh-crimson);}
.uh-b-stats h2{color:var(--uh-ink);font-size:clamp(26px,3.6vw,42px);font-weight:600;margin:0 0 10px;letter-spacing:-.015em;}
.uh-b-stats .uh-b-note{color:var(--uh-muted);font-family:var(--uh-font-sans);font-size:13px;margin:6px auto 40px;max-width:60ch;}
.uh-b-stats .wp-block-columns{max-width:1000px;margin:0 auto;gap:clamp(24px,4vw,44px);}
.uh-b-stats .uh-b-statnum{font-family:var(--uh-font-display);font-size:clamp(46px,5.2vw,68px);line-height:1;font-weight:600;color:var(--uh-crimson);margin:0;letter-spacing:-.02em;white-space:nowrap;}
.uh-b-stats .uh-b-statlbl{font-family:var(--uh-font-sans);font-size:15px;line-height:1.5;color:var(--uh-body);margin:14px auto 0;max-width:26ch;}
.uh-b-stats .wp-block-column + .wp-block-column{border-left:1px solid var(--uh-line);}

/* ============================================================
   KUTIPAN — serif besar hitam di atas putih, aksen rule krimson
   ============================================================ */
.uh-b-quote{max-width:940px;margin:0 auto;padding:clamp(52px,8vw,96px) clamp(20px,4vw,40px);text-align:center;}
.uh-b-quote .uh-b-qtext{font-family:var(--uh-font-display);font-size:clamp(25px,3.6vw,40px);line-height:1.3;color:var(--uh-ink);margin:0;letter-spacing:-.015em;}
.uh-b-quote .uh-b-qcite{display:block;margin-top:26px;font-family:var(--uh-font-sans);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--uh-crimson);}

/* ============================================================
   BERITA (wp:query) — featured stories gaya Harvard
   ============================================================ */
.uh-b-news{max-width:1200px;margin:0 auto;padding:clamp(48px,7vw,86px) clamp(20px,4vw,40px);border-top:1px solid var(--uh-line);}
.uh-b-news .uh-b-newshead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:30px;}
.uh-b-news .uh-b-newshead h2{font-size:clamp(26px,3vw,36px);font-weight:600;margin:0;letter-spacing:-.015em;}
.uh-b-news .uh-b-newshead a{color:var(--uh-crimson);font-family:var(--uh-font-sans);font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap;}
.uh-b-news .uh-b-newshead a:hover{text-decoration:underline;}
.uh-b-news .wp-block-post-template{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,44px);list-style:none;margin:0;padding:0;}
.uh-b-news .wp-block-post-template li{margin:0;border-top:2px solid var(--uh-ink);padding-top:18px;}
.uh-b-news .wp-block-post-featured-image{margin:0 0 16px;order:-1;}
.uh-b-news .wp-block-post-featured-image img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:0;display:block;background:#eee;}
.uh-b-news .wp-block-post-title{font-family:var(--uh-font-display);font-size:20px;line-height:1.24;font-weight:600;margin:0 0 10px;letter-spacing:-.01em;}
.uh-b-news .wp-block-post-title a{color:var(--uh-ink);text-decoration:none;}
.uh-b-news .wp-block-post-title a:hover{color:var(--uh-crimson);}
.uh-b-news .wp-block-post-date{color:var(--uh-muted);font-family:var(--uh-font-sans);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;}

/* ============================================================
   CTA — band krimson (satu-satunya blok warna penuh, sebagai penutup)
   ============================================================ */
.uh-b-cta{background:var(--uh-crimson);color:#fff;padding:clamp(52px,7vw,90px) clamp(20px,4vw,40px);text-align:center;}
.uh-b-cta h2{color:#fff;font-size:clamp(28px,3.8vw,46px);font-weight:600;margin:0 auto 16px;letter-spacing:-.015em;max-width:20ch;}
.uh-b-cta p{color:#f6dfe2;font-family:var(--uh-font-sans);font-size:17px;line-height:1.55;margin:0 auto 28px;max-width:56ch;}
.uh-b-cta .wp-block-buttons{justify-content:center;}
.uh-b-cta .wp-block-button__link{background:#fff;color:var(--uh-crimson);border:1px solid #fff;}
.uh-b-cta .wp-block-button__link:hover{background:transparent;color:#fff;}

/* ============================================================
   FAKULTAS — direktori fakultas & sekolah (halaman Fakultas/Faculty)
   Kisi kartu: gambar bertaut + nama serif. Gaya Harvard: garis tipis,
   tanpa kotak rounded, aksen krimson pada hover.
   ============================================================ */
.uh-b-faculties{max-width:1200px;margin:0 auto;padding:clamp(48px,7vw,86px) clamp(20px,4vw,40px);border-bottom:1px solid var(--uh-line);}
.uh-b-faculties > .uh-eyebrow{color:var(--uh-crimson);}
.uh-b-faculties > h2{font-size:clamp(26px,3.4vw,40px);font-weight:600;margin:0 0 clamp(28px,4vw,44px);letter-spacing:-.015em;max-width:22ch;}
.uh-fac-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:clamp(22px,3vw,36px);}
/* Netralkan block-gap flow-layout: WP menaruh margin-block-start:24px pada tiap
   kartu SELAIN yang pertama (is-layout-flow) → di grid, margin itu menggeser
   kartu turun sehingga thumbnail tak sejajar tingginya. Jarak antar-kartu sudah
   dari `gap` grid, jadi margin ini dinolkan. */
.uh-fac-grid > .uh-fac{margin-top:0;margin-block-start:0;}
.uh-fac{display:flex;flex-direction:column;background:transparent;border:0;border-top:2px solid var(--uh-ink);padding-top:16px;}
.uh-fac-img{margin:0 0 14px;overflow:hidden;}
.uh-fac-img img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:0;transition:transform .4s var(--ease-out,ease);}
.uh-fac:hover .uh-fac-img img{transform:scale(1.04);}
.uh-fac-name{font-family:var(--uh-font-display);font-size:17px;line-height:1.28;font-weight:600;margin:0;letter-spacing:-.005em;}
.uh-fac-name a{color:var(--uh-ink);text-decoration:none;display:inline-block;}
.uh-fac-name a:hover{color:var(--uh-crimson);}

/* ============================================================
   PILAR — nilai/keunggulan penutup (band off-white, 3 kolom)
   ============================================================ */
.uh-b-pillars{background:var(--uh-paper-2);color:var(--uh-ink);padding:clamp(52px,7vw,88px) clamp(20px,4vw,40px);border-bottom:1px solid var(--uh-line);}
.uh-b-pillars > h2{font-size:clamp(26px,3.6vw,42px);font-weight:600;margin:0 auto clamp(30px,4vw,48px);letter-spacing:-.015em;max-width:22ch;}
.uh-b-pillars .wp-block-columns{max-width:1080px;margin:0 auto;gap:clamp(24px,4vw,44px);}
.uh-b-pillar{border-top:2px solid var(--uh-crimson);padding-top:20px;}
.uh-b-pillar h3{font-size:22px;line-height:1.2;font-weight:600;margin:0 0 10px;letter-spacing:-.01em;}
.uh-b-pillar p{color:var(--uh-body);font-family:var(--uh-font-sans);font-size:15px;line-height:1.6;margin:0;}

/* ============================================================
   ABOUT — Sejarah (2 kolom), Visi (band), Sambutan Rektor (2 kolom)
   ============================================================ */
/* --- Sejarah --- */
.uh-b-history{max-width:1180px;margin:0 auto;padding:clamp(52px,7vw,90px) clamp(20px,4vw,40px);border-bottom:1px solid var(--uh-line);}
.uh-b-history-cols{gap:clamp(28px,5vw,64px);}
.uh-b-history .uh-eyebrow{color:var(--uh-crimson);}
.uh-b-history h2{font-size:clamp(26px,3.4vw,40px);font-weight:600;margin:0 0 18px;letter-spacing:-.015em;max-width:20ch;}
.uh-b-history p{font-family:var(--uh-font-sans);font-size:15.5px;line-height:1.72;color:var(--uh-body);margin:0 0 24px;text-align:justify;}
.uh-b-history-mark{display:flex;align-items:center;justify-content:center;}
.uh-b-history-mark .wp-block-image{margin:0;max-width:280px;}
.uh-b-history-mark img{width:100%;height:auto;object-fit:contain;border-radius:0;}

/* --- Visi --- */
.uh-b-vision{background:var(--uh-paper-2);border-top:1px solid var(--uh-line);border-bottom:1px solid var(--uh-line);text-align:center;padding:clamp(56px,8vw,100px) clamp(20px,4vw,40px);}
.uh-b-vision .uh-eyebrow{color:var(--uh-crimson);}
.uh-b-vision-text{font-family:var(--uh-font-display);font-size:clamp(23px,3vw,34px);line-height:1.4;color:var(--uh-ink);margin:0 auto;max-width:900px;letter-spacing:-.01em;}
.uh-b-vision .wp-block-buttons{justify-content:center;margin-top:32px;}

/* --- Sambutan Rektor --- */
.uh-b-rektor{max-width:1120px;margin:0 auto;padding:clamp(52px,7vw,90px) clamp(20px,4vw,40px);border-bottom:1px solid var(--uh-line);}
.uh-b-rektor-cols{gap:clamp(28px,5vw,60px);align-items:flex-start;}
.uh-b-rektor-photo .wp-block-image{margin:0;}
.uh-b-rektor-photo img{width:100%;height:auto;border-radius:0;display:block;}
.uh-b-rektor .uh-eyebrow{color:var(--uh-crimson);}
.uh-b-rektor h2{font-size:clamp(24px,3vw,34px);font-weight:600;margin:0 0 20px;letter-spacing:-.015em;}
.uh-b-rektor-quote{font-family:var(--uh-font-display);font-size:clamp(18px,2.1vw,23px);line-height:1.5;color:var(--uh-ink);font-style:italic;margin:0 0 22px;}
.uh-b-rektor-name{font-family:var(--uh-font-sans);font-weight:700;font-size:15px;color:var(--uh-ink);margin:0;}
.uh-b-rektor-role{font-family:var(--uh-font-sans);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--uh-muted);margin:5px 0 22px;}

/* ---------- Responsif ---------- */
@media(max-width:860px){
  .uh-b-focus,.uh-b-stats .wp-block-columns,.uh-b-news .wp-block-post-template{grid-template-columns:1fr;display:grid;}
  .uh-b-focus .wp-block-column,.uh-b-stats .wp-block-column{flex-basis:100% !important;}
  .uh-b-stats .wp-block-column + .wp-block-column{border-left:0;border-top:1px solid var(--uh-line);padding-top:28px;}
  /* Hero mobile: scrim kuat merata (teks panjang → terbaca di posisi mana pun) */
  .uh-b-hero{min-height:80vh;align-items:center;}
  .uh-b-hero .wp-block-cover__background{background:linear-gradient(to top,rgba(14,10,9,.95) 0%,rgba(14,10,9,.85) 55%,rgba(14,10,9,.68) 100%) !important;}
  .uh-b-hero h1{font-size:clamp(32px,9vw,44px);}
  /* Pilar → tumpuk 1 kolom (wp:columns jadi flex column di layar sempit) */
  .uh-b-pillars .wp-block-columns{flex-direction:column;}
  .uh-b-pillars .wp-block-column{flex-basis:100% !important;}
}
@media(max-width:560px){
  .uh-fac-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
  .uh-fac-name{font-size:15px;}
}
/* About: wp:columns (Sejarah/Rektor) menumpuk di <=781px (default core) → rapikan */
@media(max-width:781px){
  .uh-b-history p{text-align:left;}
  .uh-b-history-mark{margin-top:8px;}
  .uh-b-history-mark .wp-block-image{max-width:220px;}
  .uh-b-rektor-photo .wp-block-image{max-width:300px;margin:0 auto 10px;}
  .uh-b-rektor-cols{gap:8px;}
}