/* ==========================================================================
   Data parameters grid (Trackman page)
   ========================================================================== */

/* Bay specs — photo + editorial spec list */
.bay-specs-layout {
    display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: stretch;
}
.bay-specs__media {
    position: relative; border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow-lg); border: 1px solid rgba(200,162,75,.18); min-height: 440px;
}
.bay-specs__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 80%; }
.bay-specs__media::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(115deg, rgba(7,18,13,.55), transparent 55%);
}
.bay-specs__badge {
    position: absolute; z-index: 1; left: 22px; bottom: 22px;
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700;
    color: var(--bg-deep); background: var(--gold); padding: 7px 14px; border-radius: 100px;
}
.bay-specs__list { display: flex; flex-direction: column; justify-content: center; }
.spec-row {
    display: flex; align-items: center; gap: 18px;
    padding: 17px 6px; border-bottom: 1px solid var(--line);
    transition: background .2s var(--ease);
}
.spec-row:last-child { border-bottom: 0; }
.spec-row__text { display: flex; flex-direction: column; gap: 4px; }
.spec-row__label {
    font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--text-muted); font-weight: 600;
}
.spec-row__value { font-size: 1rem; color: var(--text); font-weight: 500; line-height: 1.35; }
@media (max-width: 860px) {
    .bay-specs-layout { grid-template-columns: 1fr; gap: 28px; }
    .bay-specs__media { min-height: 0; aspect-ratio: 16/9; }
}

/* Ways to play — a "by the numbers" stat band over three pillar cards.
   (Reuses .stat__num / .stat__label typography from components.css.) */
.play-stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    margin-top: 6px;
}
.play-stats__item {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 7px; padding: 30px 18px;
}
.play-stats__item:not(:last-child) { border-right: 1px solid var(--line); }
.play-stats .stat__label { white-space: normal; }   /* let labels wrap in narrow cells */

.play-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
    margin-top: 52px;
}
.play-card {
    display: flex; flex-direction: column;
    background: var(--bg-card); border: 1px solid var(--line);
    border-radius: var(--radius-lg); overflow: hidden;
    text-decoration: none; color: inherit;
    transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.play-card:hover { transform: translateY(-6px); border-color: rgba(200, 162, 75, .4); }
.play-card__media {
    position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0f1a14;
}
.play-card__media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .6s var(--ease);
}
.play-card:hover .play-card__media img { transform: scale(1.06); }
/* Placeholder slot shown until the venue's own photos land. */
.play-card__media--ph {
    display: flex; align-items: center; justify-content: center;
    background: #16261c; position: relative;
}
/* Framed "photo here" zone so the empty slot reads as intentional, not unfinished. */
.play-card__media--ph::before {
    content: ''; position: absolute; inset: 16px;
    border: 1px solid rgba(200, 162, 75, .14); border-radius: 10px;
    transition: border-color .35s var(--ease);
}
.play-card:hover .play-card__media--ph::before { border-color: rgba(200, 162, 75, .3); }
.play-card__ph {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; gap: 9px;
}
.play-card__ph-ico {
    width: 38px; height: 38px; color: rgba(200, 162, 75, .5);
    transition: color .35s var(--ease);
}
.play-card:hover .play-card__ph-ico { color: rgba(200, 162, 75, .72); }
.play-card__ph-label {
    font-size: .66rem; letter-spacing: .18em; text-transform: uppercase;
    color: rgba(244, 241, 234, .38);
}
.play-card__body {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 10px; padding: 26px 24px 28px; flex: 1;
}
.play-card__title {
    font-family: var(--font-display); font-size: 1.35rem; color: var(--text);
    margin: 0; letter-spacing: -.01em;
}
.play-card__desc { color: var(--text-muted); font-size: .94rem; line-height: 1.6; margin: 0; max-width: 30ch; }

/* Tablet: one column of horizontal cards (image left) so they fill the width. */
@media (min-width: 601px) and (max-width: 900px) {
    .play-grid { grid-template-columns: 1fr; gap: 16px; max-width: 660px; margin-inline: auto; }
    .play-card { flex-direction: row; }
    .play-card__media { aspect-ratio: auto; width: 42%; min-height: 196px; flex-shrink: 0; }
    .play-card__body { justify-content: center; }
}
/* Phones: stacked cards, image on top. */
@media (max-width: 600px) {
    .play-grid { grid-template-columns: 1fr; gap: 18px; }
}
/* Stat band wraps to 2x2 on phones. */
@media (max-width: 720px) {
    .play-stats { grid-template-columns: 1fr 1fr; }
    .play-stats__item:nth-child(2n) { border-right: 0; }
    .play-stats__item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* How it works — three connected steps (icon medallions + dashed connector) */
.how-steps {
    position: relative;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
    margin-top: 14px; text-align: center;
}
/* Dashed gold line linking the three medallions; sits behind them. */
.how-steps::before {
    content: ''; position: absolute; top: 40px; left: 16.66%; right: 16.66%;
    height: 2px; z-index: 0;
    background: repeating-linear-gradient(90deg, rgba(200,162,75,.55) 0 7px, transparent 7px 15px);
}
.how-step {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; padding: 0 14px;
}
.how-step__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 80px; height: 80px; border-radius: 50%;
    background: #fff; border: 1px solid rgba(11,61,46,.14); color: var(--fairway);
    margin-bottom: 18px; box-shadow: 0 10px 28px rgba(11,33,22,.10);
    transition: transform .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.how-step__icon svg { width: 32px; height: 32px; }
/* Icons are black PNG glyphs recoloured to brand green via CSS mask. */
.how-step__ico {
    display: block; width: 42px; height: 42px;
    background-color: var(--fairway);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
    transition: background-color .3s var(--ease);
}
/* Per-glyph optical sizing: the three source PNGs share a square canvas but
   have different internal padding (chunky calendar, tall golfer, wide arrow),
   so nudge each so they read as the same visual weight in the medallions. */
.how-step__ico--book {
    -webkit-mask-image: url("../images/calendar.edab7be30f3c.png"); mask-image: url("../images/calendar.edab7be30f3c.png");
    -webkit-mask-size: 80%; mask-size: 80%;
}
.how-step__ico--play {
    -webkit-mask-image: url("../images/golfer.1c158d0a8cab.png"); mask-image: url("../images/golfer.1c158d0a8cab.png");
    -webkit-mask-size: 100%; mask-size: 100%;
}
.how-step__ico--improve {
    -webkit-mask-image: url("../images/trend.2d7d6b148db7.png"); mask-image: url("../images/trend.2d7d6b148db7.png");
    -webkit-mask-size: 92%; mask-size: 92%;
}
.how-step:hover .how-step__ico { background-color: var(--gold); }
.how-step:hover .how-step__icon { transform: translateY(-5px); border-color: var(--gold); color: var(--gold); }
.how-step__num {
    font-family: var(--font-display); font-weight: 700; font-size: .72rem;
    letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px;
}
/* Scoped to beat the global `.section--light h3` colour. */
.how-step .how-step__title {
    font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
    color: var(--fairway); margin: 0 0 10px; letter-spacing: -.01em;
}
.how-step__sub { margin: 0; color: #4a5058; font-size: .98rem; line-height: 1.6; max-width: 30ch; }
.how-cta { text-align: center; margin-top: 44px; }

/* "home" variant: no eyebrow, tighter padding and a prouder, arrow-less CTA.
   Used on the home, simulators and memberships pages (all pass home=True) so the
   "How it works" section renders identically across the site. */
.how--home { padding-top: 56px; padding-bottom: 56px; }
.how--home .section-header { margin-bottom: 44px; }
.how--home .how-cta { margin-top: 48px; }
.how--home .how-cta .btn {
    padding: 20px 46px; font-size: 1.08rem; font-weight: 700; letter-spacing: .04em;
}
.how--home .how-cta .btn:hover {
    transform: translateY(-3px);
}
@media (max-width: 700px) {
    .how--home { padding-top: 40px; padding-bottom: 40px; }
}
@media (max-width: 820px) {
    .how-steps { grid-template-columns: 1fr; gap: 32px; }
    .how-steps::before { display: none; }
    .how-step__sub { max-width: 42ch; }
}

/* Phones: switch the centred stacks to compact icon-left / text-right rows,
   with a vertical dashed connector linking the medallions (mirrors the desktop
   horizontal connector). Shared by every page that uses this partial. */
@media (max-width: 600px) {
    .how-steps { gap: 24px; max-width: 23rem; margin-left: auto; margin-right: auto; }
    .how-step {
        display: grid; grid-template-columns: 56px 1fr; column-gap: 16px;
        text-align: left; padding: 0; align-items: start;
    }
    .how-step__icon {
        grid-column: 1; grid-row: 1 / span 3; align-self: start;
        position: relative; z-index: 1;
        width: 56px; height: 56px; margin-bottom: 0;
    }
    .how-step__ico { width: 30px; height: 30px; }
    .how-step__num { grid-column: 2; margin-bottom: 4px; }
    .how-step .how-step__title { grid-column: 2; font-size: 1.3rem; margin-bottom: 6px; }
    .how-step__sub { grid-column: 2; max-width: none; font-size: .95rem; line-height: 1.55; }
    /* Dashed line from each medallion down to the next. Runs from just below
       this medallion to under the next one's circle (which hides the overlap),
       so the connector reads as one continuous run with no gap. */
    .how-step:not(:last-child)::before {
        content: ''; position: absolute; left: 28px; top: 52px; bottom: -48px;
        width: 2px; transform: translateX(-50%); z-index: 0;
        background: repeating-linear-gradient(180deg, rgba(200,162,75,.55) 0 6px, transparent 6px 13px);
    }
    .how--home .how-cta { margin-top: 36px; }
}

/* Tablet portrait: same icon-left / text-right timeline as phones, but sized up
   and held in a centred column so it doesn't sprawl as three big centred blocks
   across the width. Larger medallions/type than the phone tier. */
@media (min-width: 601px) and (max-width: 820px) {
    .how-steps { gap: 30px; max-width: 31rem; margin-left: auto; margin-right: auto; }
    .how-step {
        display: grid; grid-template-columns: 72px 1fr; column-gap: 22px;
        text-align: left; padding: 0; align-items: start;
    }
    .how-step__icon {
        grid-column: 1; grid-row: 1 / span 3; align-self: start;
        position: relative; z-index: 1;
        width: 72px; height: 72px; margin-bottom: 0;
    }
    .how-step__ico { width: 38px; height: 38px; }
    .how-step__num { grid-column: 2; margin-bottom: 5px; }
    .how-step .how-step__title { grid-column: 2; font-size: 1.5rem; margin-bottom: 8px; }
    .how-step__sub { grid-column: 2; max-width: none; font-size: 1rem; line-height: 1.6; }
    /* Vertical connector tucked under the next medallion (see phone note). */
    .how-step:not(:last-child)::before {
        content: ''; position: absolute; left: 36px; top: 68px; bottom: -44px;
        width: 2px; transform: translateX(-50%); z-index: 0;
        background: repeating-linear-gradient(180deg, rgba(200,162,75,.55) 0 6px, transparent 6px 13px);
    }
}

/* Simulator data layout */
.sim-data-layout {
    display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: start;
}
.sim-data-left { position: sticky; top: 100px; }
.data-hero__title {
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(2rem, 3.4vw, 2.8rem); color: var(--fairway);
    margin: 4px 0 18px; letter-spacing: -.02em; line-height: 1.05;
}
.data-hero__hl { color: var(--gold); }
.data-points {
    list-style: none; padding: 0; margin: 26px 0 30px;
    display: flex; flex-direction: column; gap: 13px;
}
.data-points li {
    display: flex; align-items: center; gap: 12px;
    color: #4a5058; font-size: .95rem; font-weight: 500;
}
.data-points li::before {
    content: '\2713'; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: rgba(11,61,46,.08); color: var(--fairway);
    font-size: .72rem; font-weight: 700;
}
@media (max-width: 900px) {
    .sim-data-layout { grid-template-columns: 1fr; gap: 36px; }
    .sim-data-left { position: static; text-align: center; }
    .sim-data-left .data-points { align-items: center; }
}

/* Trackman "readout" data panel */
.sim-data-panel {
    position: relative;
    background: linear-gradient(180deg, #13211a 0%, var(--bg-dark) 40%);
    border: 1px solid rgba(200,162,75,.22);
    border-radius: var(--radius-lg);
    overflow: hidden; box-shadow: var(--shadow-lg);
}
.sim-data-panel__head {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 22px; border-bottom: 1px solid rgba(244,241,234,.08);
}
.sim-data-panel__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--gold); box-shadow: 0 0 0 4px rgba(200,162,75,.18);
}
.sim-data-panel__label {
    font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
    color: var(--text-muted); font-weight: 600;
}
.sim-data-panel__label b { color: var(--gold); font-weight: 700; }
.sim-data-panel__brand {
    margin-left: auto; font-size: .62rem; letter-spacing: .24em; text-transform: uppercase;
    color: rgba(244,241,234,.4); font-weight: 700;
}
.data-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 1px; background: rgba(200,162,75,.14); counter-reset: param;
}
/* Scoped to beat the global `.section--light .data-pill` rule. */
.sim-data-panel .data-pill {
    position: relative; display: flex; align-items: center; gap: 12px;
    background: var(--bg-dark); border: 0; border-radius: 0;
    padding: 13px 18px; color: var(--text);
    transition: background .2s var(--ease);
}
.sim-data-panel .data-pill::before {
    counter-increment: param; content: counter(param, decimal-leading-zero);
    font-family: var(--font-display); font-weight: 700; font-size: .7rem;
    color: var(--gold); opacity: .7; min-width: 1.4em;
}
.data-pill__name {
    flex: 1; font-size: .78rem; letter-spacing: .02em;
    color: rgba(244,241,234,.78); white-space: nowrap;
}
.data-pill__val {
    font-size: .92rem; font-weight: 600; color: #fff;
    font-variant-numeric: tabular-nums; letter-spacing: .01em;
    transition: color .2s var(--ease);
}
.data-pill__unit { font-size: .62rem; color: var(--gold); margin-left: 3px; font-weight: 600; }
.sim-data-panel .data-pill:hover { background: #17271e; }
.sim-data-panel .data-pill:hover .data-pill__val { color: var(--gold-soft); }
@media (max-width: 600px) {
    .data-grid { grid-template-columns: 1fr; }
    .sim-data-panel .data-pill { padding: 12px 16px; }
}

/* Nav book btn large variant */
.nav-book-btn--lg { padding: 14px 28px; font-size: .8rem; }


/* ==========================================================================
   Video grid (Simulators page)
   ========================================================================== */
/* Tighter than a standard section so it tucks up under the hero with less
   surrounding cream. */
.section--videos {
    border-top: 1px solid rgba(200,162,75,.12);
    padding-top: 54px; padding-bottom: 72px;
}
.section--videos .section-header { margin-bottom: 36px; }
/* Tablet & mobile: pull it in further so it sits snugly under the hero. */
@media (max-width: 1024px) {
    .section--videos { padding-top: 38px; padding-bottom: 56px; }
    .section--videos .section-header { margin-bottom: 28px; }
}
.video-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 8px;
}
.video-embed--featured { grid-column: 1 / -1; }
.video-embed {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid rgba(200,162,75,.12);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.video-embed:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(200,162,75,.45); }
.video-embed__ratio {
    aspect-ratio: 16 / 9;
    position: relative;
}
.video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* YouTube facade (click-to-play) */
.yt-facade {
    position: absolute;
    inset: 0;
    cursor: pointer;
    overflow: hidden;
    background: #000;
}
.yt-facade__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s var(--ease);
}
/* Scrim so the overlaid title stays legible */
.yt-facade::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(7,18,13,.92) 0%, rgba(7,18,13,.15) 45%, rgba(7,18,13,.25) 100%);
}
.yt-facade:hover .yt-facade__thumb { transform: scale(1.04); }
/* Branded gold play button */
.yt-play {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 64px; height: 64px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--gold); color: var(--bg-deep); border: none; padding: 0;
    cursor: pointer; z-index: 2;
    box-shadow: 0 6px 24px rgba(0,0,0,.45);
    transition: transform .25s var(--ease), background .25s var(--ease);
}
.yt-play svg { width: 26px; height: 26px; margin-left: 3px; }
.yt-facade:hover .yt-play { transform: translate(-50%, -50%) scale(1.08); background: var(--gold-soft); }
.video-embed--featured .yt-play { width: 80px; height: 80px; }
.video-embed--featured .yt-play svg { width: 32px; height: 32px; }
/* Overlaid title + tag */
.yt-facade__meta {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
    padding: 24px 26px; pointer-events: none;
}
.yt-facade__tag {
    display: inline-block; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
    font-weight: 700; color: var(--bg-deep); background: var(--gold);
    padding: 4px 12px; border-radius: 100px; margin-bottom: 12px;
}
.yt-facade__title {
    margin: 0; color: #fff; font-family: var(--font-display); font-weight: 700;
    font-size: 1.05rem; line-height: 1.3; letter-spacing: -.01em;
    text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.video-embed--featured .yt-facade__title { font-size: clamp(1.4rem, 2.6vw, 2rem); }
@media (max-width: 700px) {
    .video-grid { grid-template-columns: 1fr; }
    .video-embed--featured { grid-column: 1; }
}