/* The seven category hubs (hub-*.html), builder 4. Shared tokens and components come from site.css,
   listing.css and article.css; only hub-page layout lives here. */

/* featured card on the hero photo: the title is a <p> (the page's first H2 comes later) */
.gg-feat__t{margin-top:.15rem;font:650 1.06rem/1.25 var(--gg-display);color:var(--gg-ink)}
.gg-feat__t a{color:var(--gg-ink);text-decoration:none}
.gg-feat__t a::after{content:"";position:absolute;inset:0}
.gg-feat__t a:hover{color:var(--gg-green-800)}
.gg-feat .gg-byline{margin:0;gap:.35rem .6rem}
.gg-hubhero .gg-disclose{margin-top:1.1rem}
.gg-hubhero .gg-finder{max-width:40rem}
.gg-hubhero .gg-subtopics .gg-chips{gap:.45rem}

/* a planned page (an idea from the plan with no page yet) shown on its own hub: no link, no lift */
.gg-card--planned:hover,.gg-vs--planned:hover{transform:none;box-shadow:var(--gg-sh-1);border-color:var(--gg-line)}
.gg-card--planned:hover .gg-card__media img{transform:none}
.gg-mini--planned:hover{box-shadow:none;border-color:var(--gg-line)}
.gg-mini--planned .sample-chip,.gg-vs--planned .sample-chip{margin-top:.35rem;align-self:flex-start}
.gg-mini--planned :is(h2,h3,h4){color:var(--gg-ink-2)}

/* hub section extras */
.gg-hub__vs+.gg-hub__minis{margin-top:1rem}
.gg-hub__callout{margin-top:1rem}
.gg-hub__gift h2{margin-top:.1rem}
.gg-hub__btns{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem}
.gg-hub__end .gg-endgrid{margin-top:2rem}
.gg-value p a{font-weight:700}

/* putting-mat hub: the six picks as a rail (phones) and a 3 x 2 grid (desktop) */
.hub-picks{display:grid;grid-auto-flow:column;grid-auto-columns:80%;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:1.2rem .1rem .9rem;scrollbar-width:thin;counter-reset:none}
@media (min-width:640px){.hub-picks{grid-auto-columns:44%}}
@media (min-width:1024px){.hub-picks{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;padding:1.2rem 0 0;gap:1.75rem 1.25rem}}
.hub-pick{position:relative;display:flex;flex-direction:column;scroll-snap-align:start;background:#fff;border:1px solid var(--gg-line);border-radius:var(--gg-r-l);box-shadow:var(--gg-sh-1)}
.hub-pick__media{position:relative;aspect-ratio:16/10;border-radius:var(--gg-r-l) var(--gg-r-l) 0 0;overflow:hidden;background:var(--gg-green-100)}
.hub-pick__media img{width:100%;height:100%;object-fit:cover}
.hub-pick__media .gg-hole{position:absolute;left:.85rem;top:.85rem;box-shadow:0 0 0 3px rgb(255 255 255/.85)}
.hub-pick__body{display:flex;flex-direction:column;align-items:flex-start;gap:.45rem;flex:1;padding:.95rem 1.05rem 1.1rem}
.hub-pick h3{font-size:1.08rem;line-height:1.25}
.hub-pick h3 a{color:var(--gg-ink);text-decoration:none}
.hub-pick h3 a:hover{color:var(--gg-green-800);text-decoration:underline}
.hub-pick p{font-size:.94rem;line-height:1.5;color:var(--gg-ink-2)}
.hub-pick__foot{margin-top:auto;padding-top:.5rem}
@media (max-width:639px){.hub-pick__foot .gg-btn{min-height:44px}}

.hub-later{margin-top:0;align-content:start}
.hub-table{margin-top:1.25rem}
.hub-table .gg-table td,.hub-table .gg-table th{vertical-align:top}
.hub-sizes{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;margin-top:1.25rem;align-items:start}
.hub-sizes .gg-tablewrap{margin:0}
.hub-giftband .gg-cta__body{max-width:38rem}
.hub-giftband__list{display:grid;gap:.45rem;margin:.2rem 0 .3rem}
.hub-giftband__list li{display:flex;gap:.5rem;align-items:flex-start;color:#fff;line-height:1.45}
.hub-giftband__list .gg-ic{flex:none;margin-top:.2rem;color:var(--gg-gold-on-green)}

/* gift hub */
.hub-counts{margin-top:1.25rem}
.hub-store{margin-top:1.25rem}
.hub-store a{font-weight:700}
.hub-sizesgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem}
@media (min-width:768px){.hub-sizesgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}}
.hub-size ul{display:grid;gap:.15rem;margin-top:.35rem}
.hub-size li a{display:flex;align-items:center;gap:.4rem;min-height:40px;font-weight:700;font-size:.95rem;text-decoration:none;color:var(--gg-green-800)}
.hub-size li a:hover{text-decoration:underline}
.gg-hub__btns .gg-btn{white-space:normal;max-width:100%;text-align:center}
.gg-feat>div{min-width:0}
/* photos fill their ratio box even inside a stretched flex card */
.hub-pick__media img{position:absolute;inset:0;width:100%;height:100%}
.gg-vs__media{overflow:hidden}
.gg-vs__media img{position:absolute;inset:0;width:100%;height:100%}
.gg-endgrid--team{grid-template-columns:minmax(0,1fr)!important}
@media (max-width:899px){.gg-hub__gift .gg-split__media{aspect-ratio:16/9}}

/* ---- round 2: planned pages (ideas with no page yet): chip by the title, muted, no link, no lift ---- */
.gg-planned-row{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .6rem;margin:0}
.gg-card--planned,.gg-vs--planned,.gg-mini--planned,.gg-gmini--planned{background:#fbfcfa;box-shadow:none}
.gg-card--planned .gg-card__media img,.gg-vs--planned .gg-vs__media img,.gg-mini--planned img,.gg-gmini--planned img{filter:grayscale(.55);opacity:.72}
.gg-card--planned:hover,.gg-vs--planned:hover{transform:none;box-shadow:none;border-color:var(--gg-line)}
.gg-card--planned:hover .gg-card__media img{transform:none}
.gg-mini--planned:hover{box-shadow:none;border-color:var(--gg-line)}
.gg-card--planned .gg-card__title,.gg-vs--planned :is(h2,h3,h4),.gg-mini--planned :is(h2,h3,h4),.gg-gmini--planned b{color:var(--gg-ink-2)}
.gg-gmini--planned:hover b{color:var(--gg-ink-2)}
/* the "Coming next" list (.gg-coming) lives in listing.css */
/* round 2 hub blocks */
.gg-rtile--soon img{filter:grayscale(.7);opacity:.6}
.gg-rtile--soon .gg-rtile__go{color:var(--gg-green-100)}
.hub-practice{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;align-items:start}
.hub-practice__h{display:flex;align-items:center;gap:.45rem;margin-bottom:.6rem;font:650 1.05rem var(--gg-display);color:var(--gg-ink)}
.hub-practice__h .gg-ic{color:var(--gg-brass)}
.hub-comingbox{margin-top:1.5rem}
.hub-guidefeat__chips{margin-top:.2rem}
@media (min-width:1024px){.hub-guidefeat{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}}
.gg-grid--2>.gg-card .gg-card__media,.gg-grid--2>.gg-vs .gg-vs__media{aspect-ratio:16/9}
/* No lone card: a third related category or a fifth question spans the row */
@media (min-width:640px){.gg-steps>.gg-step:last-child:nth-child(odd){grid-column:1/-1}}

/* ---- tidy pass 2026-10-18: shorter photos on phones, FAQ beside its heading, planned pages folded ---- */
@media (max-width:639px){
  .gg-hubhero__photo{aspect-ratio:16/10}
  .gg-hub__gift .gg-split__media{height:44vw}
  .gg-reviews .gg-revfeat__media{aspect-ratio:16/9}
  #mat-or-green .gg-split__media{height:40vw}
}
.gg-reviews>.gg-soon{align-self:start}
/* the money box left "before you buy": the steps take the whole row */
#before .gg-method{grid-template-columns:minmax(0,1fr)}
.hub-guidefeat .gg-btn{align-self:flex-start;margin-top:.35rem}

/* ---- review fixes 2026-10-18 ---- */
/* P2-4: the planned pages sit as one folded row under the "Read now" cards (no "Coming next" band of its own) */
.hub-readsoon{margin-top:1.25rem}
/* P2-5: the drills row on the mat hub fills the row: the how-to card lies on its side, the planned row sits under it */
@media (min-width:640px){
  .hub-practice>.gg-card{flex-direction:row}
  .hub-practice>.gg-card .gg-card__media{flex:0 0 min(44%,26rem);aspect-ratio:16/10}
  .hub-practice>.gg-card .gg-card__media img{position:absolute;inset:0}
  .hub-practice>.gg-card .gg-card__body{justify-content:center;padding:1.25rem 1.5rem}
}
/* P3-17: the backyard teaser is a folded planned row under the mat-or-green table */
.hub-yardsoon{margin-top:1rem}
/* P3-14: on phones the mat hub's three stats are one row of counters */
@media (max-width:639px){
  .gg-hubhero .gg-statrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
  .gg-hubhero .gg-statrow span{display:block;padding:.5rem .6rem;border-radius:12px;background:#fff;border:1px solid var(--gg-line);font-size:.8125rem;line-height:1.3}
  .gg-hubhero .gg-statrow b{display:block;font-size:1.1rem;line-height:1.2}
  .gg-hubhero .gg-statrow .gg-ic{display:none}
}
/* P3-18: from 640 to 1023 px a three-card rail shows whole cards (two side by side, the third across the row), no sliver */
@media (min-width:640px) and (max-width:1023px){
  .gg-grid--3.gg-grid--rail{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;scroll-snap-type:none;padding:0}
  .gg-grid--3.gg-grid--rail>:last-child:nth-child(odd){grid-column:1/-1;flex-direction:row}
  .gg-grid--3.gg-grid--rail>:last-child:nth-child(odd) :is(.gg-card__media,.gg-vs__media){flex:0 0 46%;aspect-ratio:auto}
}