/* Perfect Practice Putting Mat review: page-only styles (prefix pp-). The sections, fit lines, pros/cons card,
   tiles, tip / safety / source lines, slim quotes, key chips and the article foot are article.css's TIDY KIT;
   this file holds only what is particular to this page. */

/* hero photo: keep the putter and the balls in frame on every crop */
.pp-hero .gg-arthero__photo img{object-position:50% 0}
@media (min-width:640px) and (max-width:1023px){.pp-hero .gg-arthero__photo{aspect-ratio:16/9}}

/* the verdict box opens the body (the mobile TOC sits above it, hidden on desktop) */
.gg-tsec.pp-first{margin-top:0}
.pp-fit{margin-top:.9rem}

/* shared specs under the editions table: icon tiles, two per row on phones */
.pp-specs{margin-top:.75rem}
@media (max-width:639px){.pp-specs{grid-template-columns:repeat(2,minmax(0,1fr))}.pp-specs>div{flex-direction:column;gap:.3rem}}
@media (min-width:1024px){.pp-specs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gg-tsec>.pp-specs+.gg-srcline{margin-top:.5rem}

/* room-length drawing (inline SVG, top-down) with its key */
.pp-room{display:grid;gap:.6rem;margin:0;padding:.9rem 1rem;border-radius:var(--gg-r-l);background:#fff;border:1px solid var(--gg-line)}
.pp-room>svg{width:100%;height:auto}
.pp-room__svg--narrow{display:none}
@media (max-width:639px){.pp-room__svg--wide{display:none}.pp-room__svg--narrow{display:block}}
.pp-r-floor{fill:#efe4d2}
.pp-r-wall{stroke:#b9a88c;stroke-width:4;stroke-linecap:round}
.pp-r-stance{fill:var(--gg-brass-100);stroke:var(--gg-brass);stroke-width:1.5;stroke-dasharray:4 4}
.pp-r-foot{fill:#fff;stroke:#9aa79e;stroke-width:1.5}
.pp-r-putter{stroke:#55665b;stroke-width:3;stroke-linecap:round}
.pp-r-mat{fill:var(--gg-green-600)}
.pp-r-line{stroke:#fff;stroke-width:2;stroke-dasharray:8 8}
.pp-r-ramp{fill:#e9efe9}
.pp-r-hole{fill:var(--gg-green-950)}
.pp-r-ball{fill:#fff;stroke:#9aa79e;stroke-width:1.5}
.pp-r-run{fill:var(--gg-green-100);stroke:var(--gg-green-300);stroke-width:1.5;stroke-dasharray:4 4}
.pp-r-dim{fill:none;stroke:var(--gg-muted);stroke-width:1.5}
.pp-room__key{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem}
.pp-room__key li{display:flex;gap:.45rem;align-items:center;font-size:.9rem;font-weight:650;line-height:1.35;color:var(--gg-ink-2)}
.pp-key{flex:none;width:1rem;height:1rem;border-radius:5px}
.pp-key--stance{background:var(--gg-brass-100);box-shadow:inset 0 0 0 1.5px var(--gg-brass)}
.pp-key--mat{background:var(--gg-green-600)}
.pp-key--run{background:var(--gg-green-100);box-shadow:inset 0 0 0 1.5px var(--gg-green-300)}
.pp-room figcaption{font-size:.8125rem;color:var(--gg-muted)}

/* the kit's slim quote sets margin:0, which cancels the section rhythm when it follows the pros/cons card */
.gg-tsec>*+.gg-quote--slim{margin-top:1rem}

/* the ramp-cup diagram (inline SVG, side views): both sides of the argument in its two panels */
.pp-diagram{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem;margin:0;padding:.9rem;border-radius:var(--gg-r-l);background:#fff;border:1px solid var(--gg-line)}
@media (min-width:640px){.pp-diagram{grid-template-columns:1fr 1fr;gap:1rem;padding:1.1rem}}
.pp-diagram__panel{display:grid;grid-template-columns:minmax(0,1fr);min-width:0;gap:.3rem;align-content:start;padding:.75rem;border-radius:var(--gg-r-m);background:var(--gg-green-50)}
.pp-diagram__panel>svg{width:100%;height:auto;border-radius:10px;background:#fff}
.pp-diagram b{font:650 1rem/1.3 var(--gg-display);color:var(--gg-ink)}
.pp-diagram p{font-size:.93rem;line-height:1.45;color:var(--gg-ink-2)}
.pp-side{display:flex;gap:.4rem;align-items:flex-start;margin-top:.2rem;padding-top:.45rem;border-top:1px dashed var(--gg-line-2)}
.pp-side .gg-ic{flex:none;margin-top:.15rem}
.pp-side--ok .gg-ic{color:var(--gg-ok)}
.pp-side--no .gg-ic{color:var(--gg-bad)}
.pp-diagram figcaption{grid-column:1/-1;font-size:.8125rem;color:var(--gg-muted)}
.pp-d-floor{fill:#e9dcc6}
.pp-d-turf{fill:var(--gg-green-600)}
.pp-d-wood{fill:#b07c45}
.pp-d-hole{fill:var(--gg-green-950)}
.pp-d-cup{fill:var(--gg-green-950)}
.pp-d-ball{fill:#fff;stroke:#9aa79e;stroke-width:1.5}
.pp-d-path{fill:none;stroke:var(--gg-brass);stroke-width:2;stroke-dasharray:3 5;stroke-linecap:round}
/* the quote and "want real drops?" side by side from tablets */
.pp-ramp-foot{display:grid;grid-template-columns:minmax(0,1fr);gap:.8rem}
@media (min-width:768px){.pp-ramp-foot{grid-template-columns:1.2fr 1fr;align-items:start}}

/* setup tips: on phones each tile is a row (icon left), so three one-liners stay short */
@media (max-width:767px){
  .pp-tiles{grid-template-columns:minmax(0,1fr)}
  .pp-tiles>.gg-ktile{grid-template-columns:auto minmax(0,1fr);column-gap:.8rem;row-gap:.15rem}
  .pp-tiles>.gg-ktile>.gg-ktile__ico{grid-row:span 2}
}

/* alternatives: cards link to the top list's #pick-N; the exact award sits in the card body, free to wrap */
.pp-alts .gg-card__dek{font-size:.93rem}
@media (min-width:640px){.pp-alts .gg-card__media{aspect-ratio:2/1}}
.pp-alts__award{align-self:flex-start;white-space:normal;line-height:1.3;padding-block:.3rem}
/* titles line up across a row when one award wraps to two lines (review r2 P3-3) */
@media (min-width:640px){
  .pp-alts .gg-card__body{display:grid;grid-template-rows:minmax(2.7rem,auto) auto auto 1fr;align-content:start}
  .pp-alts__award{align-self:start;justify-self:start}
}
/* phones: the four cards become a swipe rail, like the homepage rails */
@media (max-width:639px){.pp-alts{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;padding:.2rem .1rem .9rem;scrollbar-width:thin}.pp-alts>*{scroll-snap-align:start}.pp-alts .gg-card:hover{transform:none}}
.gg-tsec>.pp-alts+.gg-srcline{margin-top:.4rem}

/* gift: one soft card, an icon tile and three checks */
.pp-gift{display:grid;grid-template-columns:minmax(0,1fr);gap:.9rem;padding:1.1rem;border-radius:var(--gg-r-xl);background:var(--gg-brass-100);border:1px solid var(--gg-brass-200)}
@media (min-width:640px){.pp-gift{grid-template-columns:auto minmax(0,1fr);gap:1.1rem;padding:1.3rem}}
.pp-gift__ico{display:grid;place-items:center;width:3.2rem;height:3.2rem;border-radius:16px;background:#fff;color:var(--gg-brass-700);box-shadow:inset 0 0 0 1.5px var(--gg-brass-200)}
.pp-gift h2{font-size:clamp(1.3rem,1.15rem + .8vw,1.7rem);line-height:1.2}
.pp-gift__checks{display:grid;grid-template-columns:minmax(0,1fr);gap:.4rem;margin:.75rem 0 .35rem}
@media (min-width:1024px){.pp-gift__checks{grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}}
.pp-gift__checks li{display:flex;gap:.45rem;align-items:flex-start;font-size:.95rem;line-height:1.45;color:var(--gg-ink)}
.pp-gift__checks .gg-ic{flex:none;margin-top:.2rem;color:var(--gg-brass-700)}
.pp-gift__checks b{font-weight:750}
.pp-gift .gg-more{min-height:44px}

/* article foot: the method in one line between the byline and the links */
.pp-artfoot__line{flex:1 1 16rem;font-size:.9rem;line-height:1.45}

/* desktop aside: a small store card under the table of contents */
.pp-buy{display:grid;gap:.6rem;padding:1rem;border-radius:var(--gg-r-l);background:#fff;border:1px solid var(--gg-line)}
.pp-buy .gg-verdict{justify-self:start}
.pp-buy p{font-size:.9rem;line-height:1.45;color:var(--gg-ink-2)}
.pp-buy p b{display:block;font:650 1rem/1.3 var(--gg-display);color:var(--gg-ink)}