/* ==========================================================================
   Guides and News listings.

   The old cards were the generic .card: a date, a title, an excerpt and a link,
   with no image at all, which on a content hub reads as a page that has nothing
   to show. These use the post's own banner, so the card and the article a reader
   lands on are visibly the same thing.

   Prefix ac- (article card) and gd- (guides page).
   ========================================================================== */

/* --- hero ---------------------------------------------------------------- */
.gd-hero{position:relative;padding:clamp(72px,8.5vw,110px) 0 clamp(44px,5vw,64px)}
/* Single column on purpose. A two-column version put the newest guide beside
   the headline, which printed the same post twice on a hub that has one. */
.gd-hero-in{max-width:900px}
/* Sized against the real line box: at 64px the first line needed 1003px of a
   732px column and broke into three. */
.gd-hero h1{margin:20px 0 18px;font-size:clamp(38px,4.8vw,60px);line-height:1.05}
.gd-hero .lead{max-width:660px}

/* Topic chips: what the guides are about, stated rather than implied. */
.gd-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.gd-chips span{
  display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 11px;
  border:1px solid var(--line-dark);border-radius:100px;background:rgba(255,255,255,.045);
  font-size:13px;font-weight:600;color:var(--night-ink-2);
}
.gd-chips span::before{
  content:'';width:7px;height:7px;border-radius:50%;background:var(--ac,var(--violet-2));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ac,#9B8CFF) 20%,transparent);
}

/* --- the article card ---------------------------------------------------- */
.ac{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);
  box-shadow:var(--shadow-sm);
  transition:transform .28s cubic-bezier(.2,.8,.3,1),box-shadow .28s ease,border-color .28s ease;
}
.ac:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}

.ac-media{position:relative;overflow:hidden;background:var(--paper-3);aspect-ratio:16/9}
.ac-media img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.8,.3,1);
}
.ac:hover .ac-media img{transform:scale(1.045)}
/* A hairline over the image so a pale banner still ends somewhere. */
.ac-media::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 -1px 0 var(--line-2);
}

/* Stands in for a missing featured image. */
.ac-tile{
  position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--a),var(--b));
}
.ac-tile::before{
  content:'';position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.35) 1px,transparent 1px);
  background-size:14px 14px;
}
.ac-tile span{
  position:relative;font-size:44px;font-weight:800;color:rgba(255,255,255,.92);
  letter-spacing:-.03em;text-shadow:0 2px 18px rgba(0,0,0,.22);
}

.ac-body{display:flex;flex-direction:column;flex:1;padding:20px 22px 18px}
.ac-meta{
  display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink-3);margin-bottom:11px;
}
.ac-dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.55;flex:none}
.ac h3{
  font-size:19px;line-height:1.32;margin:0 0 9px;
  transition:color .2s ease;
}
.ac:hover h3{color:var(--violet)}
.ac-body p{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0}
.ac-link{
  display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:16px;
  font-size:14px;font-weight:650;color:var(--violet);
}
.ac-link .ar{transition:transform .22s ease}
.ac:hover .ac-link .ar{transform:translateX(4px)}

/* The lead article: image beside the copy rather than above it.
 *
 * The media keeps 16:9 and is inset as a framed thumbnail rather than being
 * stretched to the card's full height. Filling the height made the box 1.47:1
 * against a 1.78:1 banner, and object-fit:cover then shaved both sides off
 * artwork that has words in it. Centring the columns means the shorter of the
 * two never has to stretch to match the taller one. */
.ac-feat{display:grid;grid-template-columns:1.08fr 1fr;align-items:center}
.ac-feat .ac-media{
  aspect-ratio:16/9;height:auto;min-height:0;
  margin:clamp(14px,1.5vw,18px);border-radius:14px;border:1px solid var(--line-2);
}
.ac-feat .ac-media::after{box-shadow:none}
.ac-feat .ac-body{padding:clamp(20px,2.6vw,34px) clamp(24px,3vw,38px) clamp(20px,2.6vw,34px) clamp(8px,1vw,14px)}
.ac-feat h3{font-size:clamp(22px,2.5vw,30px);line-height:1.22;margin-bottom:12px}
.ac-feat .ac-body p{font-size:15.5px}

/* --- layout -------------------------------------------------------------- */
.gd-lead-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-bottom:20px;
}
.gd-lead-head h2{font-size:clamp(20px,2.2vw,25px);margin:0}
.gd-lead-head span{
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
.gd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.gd-feat-wrap{margin-bottom:clamp(34px,4.5vw,56px)}

/* Pagination, restyled from the bare links paginate_links() emits. */
.gd-pages{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:clamp(34px,4vw,52px)}
.gd-pages .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 13px;
  border:1px solid var(--line);border-radius:10px;background:var(--paper);
  font-size:14px;font-weight:600;color:var(--ink-2);transition:all .2s ease;
}
.gd-pages .page-numbers:hover{border-color:var(--violet);color:var(--violet)}
.gd-pages .page-numbers.current{background:var(--ink);border-color:var(--ink);color:#fff}
.gd-pages .dots{border-color:transparent;background:transparent}

/* --- empty state --------------------------------------------------------- */
.gd-empty{
  max-width:760px;margin:0 auto;text-align:center;padding:clamp(34px,5vw,56px) clamp(24px,4vw,44px);
  border:1px dashed var(--line);border-radius:var(--r-xl);background:var(--paper-2);
}
.gd-empty .ic{
  width:52px;height:52px;margin:0 auto 18px;display:grid;place-items:center;border-radius:15px;
  background:var(--grad);color:#fff;font-size:22px;
}
.gd-empty h3{font-size:21px;margin-bottom:10px}
.gd-empty p{color:var(--ink-2);margin-bottom:20px}

/* --- responsive ---------------------------------------------------------- */
@media (max-width:1000px){
  .gd-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .gd-hero .lead{max-width:none}
  /* The featured card's side-by-side split needs both columns to stay readable;
     below this it stacks like every other card, image first. */
  .ac-feat{grid-template-columns:1fr}
  .ac-feat .ac-media{aspect-ratio:16/9;min-height:0;margin:14px 14px 0}
  .ac-feat .ac-body{padding:18px 20px 18px}
}
@media (max-width:640px){
  .gd-grid{grid-template-columns:1fr}
  .ac-feat h3{font-size:22px}
}

/* Shown when the lead card is the only guide, in place of an empty grid. */
.gd-more{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:clamp(26px,3vw,38px);padding:20px 24px;
  border:1px dashed var(--line);border-radius:var(--r-lg);background:var(--paper-2);
}
.gd-more p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:620px}
.gd-more b{color:var(--ink)}