/* TiebreakNews guides — builds on /style.css variables (light + dark). */
.guide-container { }
.guide-crumbs { font-size: .8rem; color: var(--ink-3); margin-top: 18px; }
.guide-crumbs a { color: var(--ink-2); }
.guide-crumbs span { margin: 0 4px; }
.guide-meta { font-size: .82rem; color: var(--ink-3); margin-top: 12px; }
.guide-disclosure {
    font-size: .82rem; color: var(--ink-2); background: var(--court-soft);
    border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin: 0 0 18px;
}
.guide-disclosure i { color: var(--court); margin-right: 6px; }
.guide-toc {
    background: var(--card); border: 1px solid var(--line); border-radius: 16px;
    padding: 16px 20px; margin: 0 0 18px; box-shadow: var(--shadow-sm);
}
.guide-toc-title { font-weight: 700; font-size: .9rem; margin-bottom: 8px; color: var(--ink); }
.guide-toc ol { margin: 0 0 0 20px; columns: 2; column-gap: 28px; }
.guide-toc li { font-size: .88rem; margin-bottom: 4px; break-inside: avoid; }
.guide-toc a { color: var(--ink-2); }
.guide-toc a:hover { color: var(--court); }
@media (max-width: 640px) { .guide-toc ol { columns: 1; } }

.guide-prose h2 { scroll-margin-top: 90px; }
.guide-prose ol { margin: 0 0 14px 22px; }
.guide-prose table { width: 100%; border-collapse: collapse; margin: 6px 0 18px; font-size: .9rem; display: block; overflow-x: auto; }
.guide-prose th, .guide-prose td { border-bottom: 1px solid var(--line); padding: 9px 10px; text-align: left; vertical-align: top; color: var(--ink-2); }
.guide-prose th { color: var(--ink); font-weight: 700; background: var(--paper-2); white-space: nowrap; }
.guide-tip {
    border-left: 4px solid var(--gold); background: var(--gold-soft);
    border-radius: 0 12px 12px 0; padding: 12px 16px; margin: 0 0 16px;
}
.guide-tip p { margin: 0; }
.guide-pick {
    border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin: 0 0 14px; background: var(--paper);
}
.guide-pick h3 { margin: 0 0 6px; }
.guide-pick p { margin: 0 0 8px; }
.guide-pick .pick-specs { font-size: .82rem; color: var(--ink-3); }
.shop-link { display: none; }
.shop-link.is-ready {
    display: inline-flex; align-items: center; gap: 6px; font-size: .85rem;
    padding: 6px 12px; border-radius: 999px; background: var(--court); color: #fff !important; text-decoration: none !important;
}
.guide-faq { border-bottom: 1px solid var(--line); padding: 10px 0; }
.guide-faq summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.guide-faq p { margin: 8px 0 0; }

.guide-related { margin: 28px 0 10px; }
.guide-related h2 { font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 12px; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.guide-grid-index { margin-bottom: 30px; }
.guide-card {
    display: flex; flex-direction: column; gap: 6px; background: var(--card); border: 1px solid var(--line);
    border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s;
}
.guide-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.guide-card-kicker { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--court); font-weight: 700; }
[data-theme="dark"] .guide-card-kicker { color: var(--gold); }
.guide-card-title { font-weight: 700; color: var(--ink); line-height: 1.3; }
.guide-card-desc { font-size: .85rem; color: var(--ink-2); line-height: 1.5; }
.guide-card-meta { font-size: .75rem; color: var(--ink-3); margin-top: auto; }

/* ---------- v2: visual layout ---------- */
.guide-hero { position: relative; margin: 6px 0 22px; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-md); background: var(--paper-2); aspect-ratio: 1200 / 560; }
.guide-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.guide-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,16,31,0) 55%, rgba(14,16,31,.55)); pointer-events: none; }
.guide-hero-credit { position: absolute; right: 12px; bottom: 10px; z-index: 1; font-size: .68rem; color: rgba(255,255,255,.85); }
.guide-hero-credit a { color: inherit; text-decoration: underline; }
.guide-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.guide-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: var(--ink-2); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; }
.guide-chip i { color: var(--court); }
[data-theme="dark"] .guide-chip i { color: var(--gold); }

.guide-takeaways { position: relative; background: linear-gradient(135deg, var(--court-soft), var(--gold-soft)); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px 14px; margin: 0 0 18px; }
.guide-takeaways h2 { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.guide-takeaways h2 i { color: var(--court); }
.guide-takeaways ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; }
.guide-takeaways li { position: relative; padding-left: 26px; font-size: .92rem; color: var(--ink-2); line-height: 1.5; }
.guide-takeaways li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: var(--win); color: #fff; font-size: .62rem; display: grid; place-items: center; }
@media (max-width: 640px) { .guide-takeaways ul { grid-template-columns: 1fr; } }

/* numbered section headings */
.guide-prose { counter-reset: gsec; }
.guide-prose > h2:not(#faq) { counter-increment: gsec; display: flex; align-items: baseline; gap: 12px; margin-top: 34px; }
.guide-prose > h2:not(#faq)::before { content: counter(gsec, decimal-leading-zero); flex: none; font-family: var(--font-display); font-size: .8rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--court), var(--court-2)); border-radius: 9px; padding: 4px 8px; transform: translateY(-3px); }
.guide-prose > p:first-child::first-letter { float: left; font-family: var(--font-display); font-size: 3.1rem; line-height: .9; font-weight: 800; margin: 6px 10px 0 0; color: var(--court); }

/* tables */
.guide-prose table { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm); background: var(--card); }
.guide-prose tbody tr:nth-child(even) td { background: var(--paper); }
.guide-prose td:first-child { font-weight: 600; color: var(--ink); }

/* figures */
.guide-figure, .guide-photo { margin: 18px 0 24px; }
.guide-figure { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px 16px 10px; box-shadow: var(--shadow-sm); }
.guide-figure svg { display: block; width: 100%; height: auto; }
.guide-photo img { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: var(--shadow-md); aspect-ratio: 3 / 2; object-fit: cover; background: var(--paper-2); }
.guide-figure figcaption, .guide-photo figcaption { font-size: .8rem; color: var(--ink-3); margin-top: 8px; text-align: center; }
.guide-photo figcaption a { color: inherit; }

/* svg theme */
.fx text { font-family: var(--font-body); }
.fx .fx-h { font: 700 15px var(--font-display); fill: var(--ink); }
.fx .fx-label, .fx-label text { font-size: 14px; fill: var(--ink-2); }
.fx .fx-label-b { font-size: 14px; font-weight: 700; fill: var(--ink); }
.fx .fx-small, .fx-small text { font-size: 12px; fill: var(--ink-3); }
.fx .fx-label-light { font-size: 13px; font-weight: 700; fill: #fff; }
.fx .fx-label-dark { font-size: 13px; font-weight: 700; fill: #3a3a10; }
.fx .fx-pointer, .fx-dim line { stroke: var(--ink-3); stroke-width: 1.2; stroke-dasharray: 3 3; }
.fx-dim text { font-size: 12px; fill: var(--ink-3); }
.fx .fx-frame { fill: none; stroke: var(--court); stroke-width: 12; }
.fx .fx-bed { fill: var(--court-soft); }
.fx-strings line { stroke: var(--ink-3); stroke-width: 1.2; opacity: .7; }
.fx .fx-sweet { fill: var(--gold-soft); stroke: var(--gold); stroke-width: 2; stroke-dasharray: 5 4; }
.fx .fx-throat { fill: var(--court); }
.fx .fx-throat-in { fill: var(--card); }
.fx .fx-handle { fill: var(--ink); }
.fx-grip line { stroke: var(--ink-3); stroke-width: 2; }
.fx .fx-cap { fill: var(--court-2); }
.fx .fx-panel { fill: var(--paper); }
.fx-grid line { stroke: var(--line-strong); stroke-dasharray: 4 4; }
.fx-axis line { stroke: var(--ink-3); stroke-width: 1.5; }
.fx .fx-arrowhead, .fx-arrowhead path { fill: var(--ink-3); }
.fx .fx-dot { opacity: .92; }
.fx .fx-dot-t { font-size: 12px; font-weight: 700; fill: #fff; }
.fx .fx-c1 { fill: #E0A030; } .fx .fx-c2 { fill: #2E9E5B; } .fx .fx-c3 { fill: #2E6ED6; } .fx .fx-c4 { fill: #7C3AED; } .fx .fx-c5 { fill: #C96342; }
.fx-scale line { stroke: var(--line-strong); stroke-width: 2; }
.fx-scale text { font-size: 12px; fill: var(--ink-3); }
.fx .fx-hand { fill: #F2C7A5; stroke: #C8916A; stroke-width: 1.5; }
.fx .fx-ring { fill: #F6D2B6; }
.fx .fx-crease { fill: none; stroke: #9C6A47; stroke-width: 2.4; }
.fx .fx-crease-light { fill: none; stroke: #C8916A; stroke-width: 1.4; }
.fx .fx-measure { stroke: var(--court); stroke-width: 3; }
.fx .fx-measure-head { fill: var(--court); }
.fx .fx-chip { fill: var(--paper); stroke: var(--line-strong); }
.fx .fx-chip-on { fill: var(--court-soft); stroke: var(--court); }
.fx-chip-t text { font-size: 13px; font-weight: 700; fill: var(--ink); }
.fx-chip-s text { font-size: 11px; fill: var(--ink-3); }
.fx-track rect { fill: var(--paper-2); }
.fx-zone rect, .fx .fx-zone-swatch { fill: #2E9E5B; opacity: .45; }
.fx-knob circle { fill: #2E9E5B; stroke: var(--card); stroke-width: 3; }
.fx-legend text { font-size: 12px; fill: var(--ink-3); }
.fx .fx-sole { fill: #3B3F5C; }
[data-theme="dark"] .fx .fx-sole { fill: #2A2E4E; }
.fx .fx-sole-edge { fill: none; stroke: var(--court); stroke-width: 3; }
.fx .fx-tread { fill: none; stroke: #C9CCE0; stroke-width: 2.2; }
.fx .fx-tread-fill { fill: #C9CCE0; }
.fx .fx-tread-faint { stroke: #6B7090; stroke-width: 1; }
.fx .fx-ball-red { fill: #E5484D; } .fx .fx-ball-orange { fill: #F59E0B; } .fx .fx-ball-green { fill: #84CC16; } .fx .fx-ball-yellow { fill: #E3F542; }
.fx .fx-seam { fill: none; stroke: #fff; stroke-width: 2; opacity: .85; }
.fx .fx-court-bar { opacity: .9; }
.fx .fx-red { fill: #E5484D; } .fx .fx-orange { fill: #F59E0B; } .fx .fx-green { fill: #3E8E5A; } .fx .fx-yellow { fill: #D9EC3C; }
.fx .fx-ground { stroke: var(--line-strong); stroke-width: 2; }
.fx-kid circle, .fx-kid rect { fill: var(--court); opacity: .85; }
.fx-kid .fx-kid-racket { fill: var(--gold); opacity: 1; }
.fx-node rect { fill: var(--court-soft); stroke: var(--court); stroke-width: 1.5; }
.fx-node-t text, .fx .fx-node-t { font-size: 15px; font-weight: 700; fill: var(--ink); }
.fx .fx-node-win { fill: #2E9E5B; }
.fx .fx-node-win-t { font: 800 16px var(--font-display); fill: #fff; letter-spacing: .06em; }
.fx .fx-node-alt { fill: var(--gold-soft); stroke: var(--gold); stroke-width: 1.5; }
.fx .fx-arrow, .fx-arrow line { stroke: var(--ink-3); stroke-width: 2; fill: none; }
.fx .fx-dash { stroke-dasharray: 5 4; }
.fx .fx-court-t { fill: #2E6ED6; }
.fx .fx-court-p { fill: #2E6ED6; }
.fx-court-lines rect, .fx-court-lines line { fill: none; stroke: #fff; stroke-width: 2; }
.fx .fx-net { stroke: #fff; stroke-width: 4; opacity: .9; }
.fx .fx-wall { fill: none; stroke: #C8F542; stroke-width: 10; }
.fx .fx-court-ghost { fill: rgba(200,245,66,.18); stroke: #C8F542; stroke-width: 2.5; stroke-dasharray: 8 5; }
.fx .fx-ghost-swatch { fill: rgba(200,245,66,.35); stroke: #8BB31C; stroke-dasharray: 4 3; }
.fx .fx-wall-swatch { fill: #C8F542; }
.fx .fx-bar { opacity: .92; }
.fx-val text { font-size: 13px; font-weight: 700; fill: var(--ink); }

/* video */
.guide-video { margin: 22px 0 26px; }
.guide-video-head { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--live); margin-bottom: 8px; }
.guide-video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; box-shadow: var(--shadow-md); }
.guide-video-frame button { all: unset; cursor: pointer; position: absolute; inset: 0; display: block; }
.guide-video-frame img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .92; transition: opacity .2s, transform .3s; }
.guide-video-frame button:hover img { opacity: 1; transform: scale(1.02); }
.guide-video-play { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: rgba(229,72,77,.95); display: grid; place-items: center; color: #fff; font-size: 1.5rem; box-shadow: 0 8px 30px rgba(0,0,0,.4); }
.guide-video-play i { margin-left: 4px; }
.guide-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.guide-video-meta { font-size: .85rem; color: var(--ink-2); margin-top: 8px; }
.guide-video-meta strong { color: var(--ink); }
.guide-video-note { font-size: .72rem; color: var(--ink-3); }

/* picks & tips polish */
.guide-pick { background: var(--card); box-shadow: var(--shadow-sm); border-left: 4px solid var(--court); }
.guide-tip { box-shadow: var(--shadow-sm); }
.guide-tip p::before { content: "\f0eb"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--gold); margin-right: 8px; }
.guide-faq { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; margin-bottom: 10px; }
.guide-faq[open] { box-shadow: var(--shadow-sm); }

/* cards with images */
.guide-card { padding: 0; overflow: hidden; }
.guide-card-img { aspect-ratio: 16 / 9; background: var(--paper-2); overflow: hidden; }
.guide-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.guide-card:hover .guide-card-img img { transform: scale(1.04); }
.guide-card-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; }
.guide-index-hero { position: relative; border-radius: 24px; overflow: hidden; margin: 16px 0 24px; min-height: 260px; display: flex; align-items: flex-end; box-shadow: var(--shadow-md); }
.guide-index-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.guide-index-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,16,31,.05), rgba(14,16,31,.82)); z-index: 1; }
.guide-index-hero .page-head { position: relative; z-index: 2; padding: 26px 26px 22px; margin: 0; }
.guide-index-hero .section-title, .guide-index-hero .page-sub { color: #fff; }
.guide-index-hero .section-kicker { color: var(--gold-bright); }
.guide-grid-index .guide-card:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1.3fr 1fr; }
.guide-grid-index .guide-card:first-child .guide-card-img { aspect-ratio: auto; min-height: 220px; }
.guide-grid-index .guide-card:first-child .guide-card-title { font-size: 1.35rem; }
@media (max-width: 640px) { .guide-grid-index .guide-card:first-child { display: flex; } .guide-grid-index .guide-card:first-child .guide-card-img { aspect-ratio: 16 / 9; min-height: 0; } }
@media (max-width: 640px) {
    .guide-figure { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 12px 10px 8px; }
    .guide-figure svg { min-width: 600px; }
    .guide-figure figcaption::after { content: " · swipe to see more →"; }
    .guide-video-play { width: 56px; height: 56px; margin: -28px 0 0 -28px; font-size: 1.2rem; }
}

/* v3: full site width, article + sticky sidebar */
.guide-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.guide-layout .guide-prose { max-width: none; grid-column: 1; grid-row: 1; min-width: 0; }
.guide-side { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--header-h) + 16px); display: flex; flex-direction: column; gap: 14px; max-height: calc(100vh - var(--header-h) - 32px); overflow-y: auto; }
.guide-side .guide-toc { margin: 0; }
.guide-side .guide-toc ol { columns: 1; }
.guide-more { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 20px; box-shadow: var(--shadow-sm); }
.guide-more ul { list-style: none; margin: 0; padding: 0; }
.guide-more li { font-size: .86rem; padding: 6px 0; border-bottom: 1px solid var(--line); }
.guide-more li:last-child { border-bottom: 0; }
.guide-more a { color: var(--ink-2); }
.guide-more a:hover, .guide-toc a.is-active { color: var(--court); }
.guide-toc a.is-active { font-weight: 700; }
.guide-takeaways ul { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .guide-takeaways ul { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1024px) {
    .guide-layout { grid-template-columns: 1fr; gap: 0; }
    .guide-side { grid-column: 1; grid-row: auto; position: static; max-height: none; overflow: visible; }
    .guide-layout .guide-prose { grid-row: auto; }
    .guide-more { display: none; }
    .guide-side .guide-toc ol { columns: 2; }
}
@media (max-width: 640px) { .guide-takeaways ul { grid-template-columns: 1fr; } .guide-side .guide-toc ol { columns: 1; } }
.guide-hero { aspect-ratio: auto; height: clamp(200px, 30vw, 400px); }

/* Homepage "Tennis guides" block (index.html) */
.home-guides { margin: 28px 0 8px; }
.home-guides-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.home-guides-head h2 { font-family: var(--font-display); font-size: 1.4rem; margin: 2px 0 4px; }
.home-guides-head p { color: var(--ink-2); font-size: .92rem; margin: 0; }
.home-guides-all { flex: none; font-weight: 700; font-size: .9rem; color: var(--court); white-space: nowrap; }
.home-guides .guide-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .home-guides .guide-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .home-guides .guide-card-desc { display: none; } }
.home-guides .guide-card-title { font-size: .95rem; }
.home-guides-more { font-size: .85rem; color: var(--ink-3); margin-top: 12px; }
.home-guides-more a { color: var(--ink-2); }
@media (max-width: 640px) { .home-guides-head { flex-direction: column; align-items: flex-start; } }