/* /guides hub only (releases/lib/hub.mjs markup). Loads after guide.css and reuses its :root tokens, fonts, header and footer.
   Holds no words. Layout: hero with the goal finder, then one band per goal (heading left, cards right at 960px+). */
.hub{--edge:max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)))}
.hub ul{list-style:none;margin:0;padding:0}

/* hero: the title, one line of intro, then the goals. Kept short so the featured card starts inside the first screen.
   At 960px+ the title spans the row and the goals sit right of the intro, so the hero has no empty half. */
.hub__head{padding:clamp(40px,5vw,56px) var(--edge) clamp(32px,4vw,48px);background:var(--wash);border-bottom:1px solid var(--line)}
.hub__head h1{font:700 clamp(40px,5vw,64px)/1.02 var(--serif);letter-spacing:-.02em;max-width:14ch}
.hub__intro{margin:16px 0 0;max-width:52ch;font-size:clamp(17px,1.5vw,20px);color:var(--text)}
.hub-goals{margin-top:clamp(24px,4vw,40px)}
.hub-goals__label{margin:0 0 10px;font-weight:700;color:var(--ink)}
@media (min-width:960px){
  .hub__head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:48px;align-items:end}
  .hub__head h1{grid-column:1/-1;max-width:none}
  .hub-goals{margin:0}
}
/* full finder (some goal has 2+ guides): big tap targets with their guide count */
.hub-goals__big{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.hub-goals__big a{display:flex;flex-direction:column;gap:6px;height:100%;padding:18px 20px;border:2px solid var(--ink);border-radius:14px;background:var(--white);color:var(--ink);text-decoration:none}
.hub-goals__big .hub-goals__goal{font:700 clamp(19px,1.8vw,22px)/1.2 var(--serif)}
.hub-goals__n{font-size:15px;color:var(--muted)}
/* compact chip row (every goal has 1 guide) */
.hub-goals__chips{display:flex;flex-wrap:wrap;gap:8px}
.hub-goals__chips a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1.5px solid var(--ink);border-radius:var(--r-pill);background:var(--white);color:var(--ink);font-weight:600;font-size:16px;text-decoration:none}
.hub-goals a:hover{background:var(--lilac)}

/* one band per goal */
.hub-group{display:grid;gap:24px 56px;padding:clamp(40px,4.5vw,64px) var(--edge);border-bottom:1px solid var(--line)}
.hub-group__head h2{font:700 clamp(28px,3vw,38px)/1.1 var(--serif);letter-spacing:-.01em;scroll-margin-top:96px}
.hub-group__head p{margin:10px 0 0;max-width:36ch;color:var(--muted)}
.hub-cards{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
@media (min-width:960px){
  .hub-group{grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:start}
  .hub-group__head{position:sticky;top:96px}
}

/* card: the merchant's question is the headline and the link; the whole card is clickable */
.hub-card{position:relative;display:flex;flex-direction:column;padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--white)}
.hub-card:hover{border-color:var(--purple)}
.hub-card:focus-within{outline:2px solid var(--purple-2);outline-offset:3px}
.hub-card__q{font:700 22px/1.25 var(--serif)}
.hub-card__q a{color:var(--ink);text-decoration:none}
.hub-card__q a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.hub-card__q a:focus-visible{outline:none}
.hub-card:hover .hub-card__q a{text-decoration:underline;text-decoration-color:var(--purple);text-underline-offset:4px}
.hub-card__title{margin:10px 0 0;font-size:15px;font-weight:700;color:var(--purple)}
.hub-card__text{margin:10px 0 0;font-size:15px;color:var(--muted)}
.hub-card__meta{display:grid;gap:6px;margin:auto 0 0;padding-top:20px;font-size:14px}
.hub-card__meta div{display:flex;gap:8px}
.hub-card__meta dt{min-width:9.5em;color:var(--muted)}
.hub-card__meta dd{margin:0;color:var(--ink)}

/* a goal with a single guide: the card takes the full row */
.hub-group--one .hub-card{grid-column:1/-1}
/* full-row cards (featured or alone in their band): facts in one horizontal row */
@media (min-width:720px){
  .hub-card--featured .hub-card__meta,.hub-group--one .hub-card__meta{grid-template-columns:repeat(3,auto);justify-content:start;gap:8px 40px}
  .hub-card--featured .hub-card__meta div,.hub-group--one .hub-card__meta div{flex-direction:column;gap:2px}
  .hub-card--featured .hub-card__meta dt,.hub-group--one .hub-card__meta dt{min-width:0}
  .hub-card--featured .hub-card__meta dd,.hub-group--one .hub-card__meta dd{max-width:30ch}
}

/* the featured guide: full row, bigger question, its short answer, the site's ink sticker shadow */
.hub-card--featured{grid-column:1/-1;padding:clamp(24px,3vw,36px);border:2px solid var(--ink);border-radius:24px;background:var(--wash);box-shadow:var(--sticker);margin:0 0 10px}
.hub-card__flag{margin:0 0 12px;align-self:start;padding:4px 12px;border-radius:var(--r-pill);background:var(--ink);color:var(--white);font-size:14px;font-weight:700}
.hub-card--featured .hub-card__q{font-size:clamp(26px,2.6vw,38px);line-height:1.12;max-width:30ch}
.hub-card__answer{margin:14px 0 0;max-width:62ch;font-size:17px;color:var(--text)}
.hub-card__answer span{font-weight:700;color:var(--ink)}

/* one quiet Discount Genie note at the end */
.hub-cta{margin:clamp(48px,6vw,80px) var(--edge);max-width:640px}
.hub-cta h2{font:700 24px/1.2 var(--serif)}
.hub-cta p{margin:10px 0 14px;color:var(--text)}
.hub-cta__link{display:inline-block;padding:8px 0;font-weight:700;text-underline-offset:4px}

/* the one motion: the featured card's sticker shadow drops in once */
@media (prefers-reduced-motion:no-preference){
  .hub-card--featured{animation:hub-drop .6s cubic-bezier(.2,.8,.2,1) .25s both}
  @keyframes hub-drop{from{box-shadow:0 0 0 var(--ink);transform:translate(11px,10px)}to{box-shadow:var(--sticker);transform:none}}
}