/* ==========================================================================
   Golf Simulator page

   Uses the site's own spacing/radius tokens, with a gold accent borrowed from
   The Golf Cabin's brand (--gold: #C8A24B) so the page reads as a sibling of
   thegolfcabin.uk without breaking the house style.
   ========================================================================== */

/* On :root, not .page-golf — this stylesheet is also loaded on the homepage
   (golf card) and the property pages (cross-link banner), where the body class
   is page-home / page-property. Scoping these to .page-golf left var() undefined
   on those pages, which silently collapsed the card's dark background to white
   and made its white heading unreadable. */
:root {
    --golf-gold: #C8A24B;
    --golf-gold-soft: #D8B968;
    --golf-charcoal: #14161A;
    /* Fairway green and warm cream, from the golf site's palette. Used on the
       ported sections so they read as The Golf Cabin without pulling its
       Fraunces display font (which would reshape the whole property site). */
    --golf-green: #0B3D2E;
    --golf-cream: #F4F1EA;
    /* Gold is ~2.2:1 on white — unreadable as text. This is the accessible
       stand-in (~4.6:1) for any gold-coloured copy on a light background. */
    --golf-gold-ink: #8A6E28;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.golf-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: min(60vh, 520px);
    padding: calc(var(--header-height) + var(--spacing-md)) 0 var(--spacing-md);
    overflow: hidden;
    background: var(--golf-charcoal);
    color: var(--text-inverse);
}

.golf-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.golf-hero-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The hero is a wide letterbox and the source is 16:9, so cover crops the
       top and bottom. Bias slightly above centre to keep the horizon and the
       green in frame rather than the empty sky. */
    object-position: center 60%;
}

/* Flat tint rather than a gradient — the vignette muddied the corners and left
   the image looking unevenly lit. An even scrim shows the photograph honestly
   while still holding the white heading at an accessible contrast ratio. */
.golf-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 12, 15, 0.48);
}

.golf-hero .container {
    position: relative;
    z-index: 1;
}

.golf-hero-content {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.golf-hero h1 {
    margin-bottom: 0.875rem;
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.golf-hero-accent {
    color: var(--golf-gold);
}

.golf-hero-subtitle {
    /* auto side margins so the 34rem measure stays centred in the 640px block */
    margin: 0 auto 1.75rem;
    max-width: 34rem;
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.0625rem;
    line-height: 1.6;
}

.golf-hero-subtitle strong {
    color: #fff;
    font-weight: 600;
}

.golf-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    justify-content: center;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn-golf-primary,
.btn-golf-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.95rem 1.6rem;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.btn-golf-primary {
    background: var(--golf-gold);
    border: 1px solid var(--golf-gold);
    color: #14161A;
    box-shadow: 0 6px 20px rgba(200, 162, 75, 0.28);
}

.btn-golf-primary:hover {
    background: var(--golf-gold-soft);
    border-color: var(--golf-gold-soft);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(200, 162, 75, 0.36);
}

.btn-golf-primary svg {
    transition: transform var(--transition-fast);
}

.btn-golf-primary:hover svg {
    transform: translateX(3px);
}

.btn-golf-secondary {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
}

.btn-golf-secondary:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.5);
}


/* --------------------------------------------------------------------------
   "Three steps to your first swing"

   Ported from the golf site's .how-steps. Same anatomy — three medallions
   joined by a dashed rule, each with a step number, title and blurb — retyped
   in Inter and re-tokenised. The icons are the golf site's PNG glyphs, drawn
   as a CSS mask so a single black source recolours to green (and gold on
   hover) rather than shipping three pre-tinted variants.
   -------------------------------------------------------------------------- */

.golf-how {
    padding: var(--spacing-xl) 0;
    background: var(--golf-cream);
}

.golf-how .section-header {
    margin-bottom: var(--spacing-lg);
}

.golf-how h2 {
    font-size: clamp(1.875rem, 4vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--golf-green);
}

.golf-how-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    text-align: center;
}

/* The dashed rule linking the medallions. Insets of 16.66% stop it at the
   centre of the first and last columns rather than running off the edges. */
.golf-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, 0.55) 0 7px, transparent 7px 15px);
}

.golf-how-step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 14px;
}

.golf-how-medallion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(11, 61, 46, 0.14);
    box-shadow: 0 10px 28px rgba(11, 33, 22, 0.10);
    transition: transform var(--transition-normal), border-color var(--transition-normal);
}

.golf-how-ico {
    display: block;
    width: 42px;
    height: 42px;
    background-color: var(--golf-green);
    -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 var(--transition-normal);
}

.golf-how-ico--book {
    -webkit-mask-image: url("../img/golf/icon-calendar.edab7be30f3c.png");
    mask-image: url("../img/golf/icon-calendar.edab7be30f3c.png");
    -webkit-mask-size: 80%;
    mask-size: 80%;
}

.golf-how-ico--play {
    -webkit-mask-image: url("../img/golf/icon-golfer.1c158d0a8cab.png");
    mask-image: url("../img/golf/icon-golfer.1c158d0a8cab.png");
    -webkit-mask-size: 100%;
    mask-size: 100%;
}

.golf-how-ico--improve {
    -webkit-mask-image: url("../img/golf/icon-trend.2d7d6b148db7.png");
    mask-image: url("../img/golf/icon-trend.2d7d6b148db7.png");
    -webkit-mask-size: 92%;
    mask-size: 92%;
}

.golf-how-step:hover .golf-how-medallion {
    transform: translateY(-5px);
    border-color: var(--golf-gold);
}

.golf-how-step:hover .golf-how-ico {
    background-color: var(--golf-gold);
}

.golf-how-num {
    margin-bottom: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--golf-gold-ink);
}

.golf-how-title {
    margin: 0 0 10px;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--golf-green);
}

.golf-how-sub {
    margin: 0;
    max-width: 30ch;
    color: var(--text-secondary);
    font-size: 0.98rem;
    line-height: 1.6;
}

.golf-how-cta {
    margin-top: 48px;
    text-align: center;
}

.btn-golf-lg {
    padding: 1.15rem 2.75rem;
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   Google reviews carousel

   Ported from the golf site. The gr__* class names are the source's own and
   are kept verbatim because static/js/reviews.js queries .gr__card and builds
   .gr__dot buttons — leaving both untouched means the JS can be re-synced from
   golf-site without edits. Scoped under .golf-reviews so nothing leaks.
   -------------------------------------------------------------------------- */

.golf-reviews {
    padding: var(--spacing-xl) 0;
    background: var(--golf-charcoal);
    color: var(--text-inverse);
}

.golf-reviews .gr {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}

.golf-reviews .gr__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 26px;
    padding: 8px 16px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    text-decoration: none;
}

.golf-reviews .gr__g {
    display: block;
    flex: none;
    width: 18px;
    height: 18px;
}

.golf-reviews .gr__badge-stars {
    color: var(--golf-gold);
    font-size: 13px;
    letter-spacing: 1.5px;
}

.golf-reviews .gr__badge-rating {
    color: #3c4043;
    font-size: 0.92rem;
}

.golf-reviews .gr__badge-rating strong {
    font-weight: 700;
}

.golf-reviews .gr__title {
    margin: 0 0 18px;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.1;
}

.golf-reviews .gr__title em {
    font-style: normal;
    color: var(--golf-gold);
}

.golf-reviews .gr__lede {
    margin: 0 0 28px;
    max-width: 36ch;
    color: rgba(255, 255, 255, 0.72);
    font-size: 1.05rem;
    line-height: 1.65;
}

.golf-reviews .gr__carousel {
    min-width: 0;
}

.golf-reviews .gr__stage {
    display: flex;
    align-items: center;
    gap: 20px;
}

.golf-reviews .gr__arrow {
    flex: none;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: var(--text-inverse);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast),
                border-color var(--transition-fast), transform var(--transition-fast);
}

.golf-reviews .gr__arrow:hover {
    background: var(--golf-gold);
    border-color: var(--golf-gold);
    color: var(--golf-charcoal);
}

.golf-reviews .gr__arrow:active {
    transform: scale(0.93);
}

.golf-reviews .gr__arrow:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.golf-reviews .gr__arrow svg {
    width: 19px;
    height: 19px;
}

.golf-reviews .gr__viewport {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 2px 8px;   /* room for the card shadow */
}

.golf-reviews .gr__viewport::-webkit-scrollbar {
    display: none;
}

/* Scroll-snap is switched on by reviews.js AFTER load (it adds .is-snap to the
   carousel root). A scroll-snap container present during initial load trips a
   Chromium bug that suppresses Largest Contentful Paint for the whole page. */
.golf-reviews .gr.is-snap .gr__viewport {
    scroll-snap-type: x mandatory;
}

.golf-reviews .gr.is-snap .gr__card {
    scroll-snap-align: start;
}

.golf-reviews .gr__card {
    flex: 0 0 calc(50% - 12px);
    margin: 0;   /* reset the UA <figure> margin so two cards fit exactly */
    display: flex;
    flex-direction: column;
    padding: 30px 30px 26px;
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.26);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.golf-reviews .gr__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 54px rgba(0, 0, 0, 0.34);
}

.golf-reviews .gr__quote {
    flex: 1;
    margin: 0 0 24px;
    color: #2a3a32;
    font-size: 1.02rem;
    line-height: 1.6;
}

.golf-reviews .gr__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid #ececec;
}

.golf-reviews .gr__author {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    line-height: 1.3;
}

.golf-reviews .gr__author strong {
    color: var(--golf-green);
    font-size: 0.98rem;
}

.golf-reviews .gr__author span {
    color: #7c8a82;
    font-size: 0.82rem;
}

.golf-reviews .gr__stars {
    color: var(--golf-gold-ink);
    letter-spacing: 2px;
    font-size: 1rem;
    white-space: nowrap;
}

.golf-reviews .gr__dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 30px;
}

.golf-reviews .gr__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    cursor: pointer;
    transition: width var(--transition-fast), background var(--transition-fast);
}

.golf-reviews .gr__dot:hover {
    background: rgba(255, 255, 255, 0.45);
}

.golf-reviews .gr__dot.is-active {
    width: 26px;
    background: var(--golf-gold);
}

.golf-reviews .gr__arrow:focus-visible,
.golf-reviews .gr__dot:focus-visible {
    outline: 2px solid var(--golf-gold);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Closing CTA — the golf site's cta-finale: a rounded dark card on a light band
   -------------------------------------------------------------------------- */

.golf-cta {
    padding: var(--spacing-xl) 0;
    background: var(--golf-cream);
}

.golf-cta-card {
    max-width: 60rem;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-md);
    border-radius: 1.5rem;
    background: var(--golf-charcoal);
    color: var(--text-inverse);
    text-align: center;
    box-shadow: 0 30px 60px rgba(11, 33, 22, 0.18);
}

.golf-cta-card h2 {
    margin-bottom: var(--spacing-sm);
    font-size: clamp(1.875rem, 4vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.025em;
}

.golf-cta-card h2 em {
    font-style: italic;
    color: var(--golf-gold);
}

.golf-cta-card p {
    max-width: 34rem;
    margin: 0 auto var(--spacing-md);
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.0625rem;
    line-height: 1.65;
}

.golf-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    justify-content: center;
}

/* --------------------------------------------------------------------------
   Cross-link banner (used on the property pages that share the premises)
   -------------------------------------------------------------------------- */

.golf-banner-section {
    padding: var(--spacing-md) 0 0;
}

.golf-banner {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin: var(--spacing-md) 0;
    padding: var(--spacing-md);
    border: 1px solid rgba(200, 162, 75, 0.35);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #16181C 0%, #23262C 100%);
    color: var(--text-inverse);
    text-decoration: none;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.golf-banner:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

.golf-banner-logo {
    flex-shrink: 0;
    width: 64px;
    height: auto;
}

.golf-banner-content {
    flex: 1;
    min-width: 0;
}

.golf-banner-eyebrow {
    display: block;
    margin-bottom: 0.25rem;
    color: #C8A24B;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.golf-banner-content h3 {
    margin-bottom: 0.25rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
}

.golf-banner-content p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.9375rem;
    line-height: 1.55;
}

.golf-banner-arrow {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: rgba(200, 162, 75, 0.15);
    color: #C8A24B;
    transition: transform var(--transition-fast), background var(--transition-fast);
}

.golf-banner:hover .golf-banner-arrow {
    background: rgba(200, 162, 75, 0.28);
    transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   Homepage card

   Sits in the property grid but is not a house. It inherits .property-card's
   white background and shadow so the row reads as one set; the gold "On site"
   badge and the CTA link are the only things marking it as different, in place
   of the sleeps/bedrooms meta the house cards carry.
   -------------------------------------------------------------------------- */

.property-card-golf {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    overflow: hidden;
}

/* 200px to match .property-carousel on the sibling house cards — an
   aspect-ratio here made the golf image noticeably taller and broke the row. */
.property-card-golf .golf-card-media {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.property-card-golf .golf-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.property-card-golf:hover .golf-card-media img {
    transform: scale(1.05);
}

.property-card-golf .golf-card-badge {
    position: absolute;
    top: 0.875rem;
    left: 0.875rem;
    z-index: 1;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: var(--golf-gold);
    color: #14161A;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.property-card-golf .property-content {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-sm) 1.25rem;
}

/* Heading, tagline and feature tags all inherit the house-card styling —
   nothing to override now the card is light. */

.property-card-golf .golf-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.875rem;
    /* Darker than --golf-gold: #C8A24B on white is only ~2.2:1, which fails
       contrast for text. This holds the gold accent at ~4.6:1. */
    color: #8A6E28;
    font-size: 0.9375rem;
    font-weight: 600;
}

.property-card-golf:hover .golf-card-cta svg {
    transform: translateX(3px);
}

.property-card-golf .golf-card-cta svg {
    transition: transform var(--transition-fast);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
    /* Reviews stack: intro centred above the cards, arrows give way to
       swipe + dots on touch. */
    .golf-reviews .gr {
        grid-template-columns: 1fr;
        gap: 26px;
        text-align: center;
    }

    .golf-reviews .gr__intro {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .golf-reviews .gr__title,
    .golf-reviews .gr__lede {
        align-self: stretch;
        width: 100%;
    }

    .golf-reviews .gr__lede {
        max-width: 48ch;
        margin-inline: auto;
    }

    .golf-reviews .gr__arrow {
        display: none;
    }

    .golf-reviews .gr__dots {
        margin-top: 26px;
    }
}

/* Tablet: move the Google badge below the lede so it leads straight into the
   cards. Flex order only — no DOM change, so desktop and mobile are untouched. */
@media (min-width: 561px) and (max-width: 980px) {
    .golf-reviews .gr__title { order: 1; margin-bottom: 14px; }
    .golf-reviews .gr__lede { order: 2; margin: 0 auto 24px; }
    .golf-reviews .gr__badge { order: 3; margin: 0; }
}

/* One full card at a time — never a cropped peek. */
@media (max-width: 760px) {
    .golf-reviews .gr__card {
        flex: 0 0 100%;
    }

    /* Steps stack; the horizontal dashed rule no longer applies. */
    .golf-how-steps {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .golf-how-steps::before {
        display: none;
    }

    .golf-how-sub {
        max-width: 42ch;
    }
}

@media (max-width: 768px) {
    .golf-hero {
        min-height: auto;
        padding: calc(var(--header-height) + var(--spacing-sm)) 0 var(--spacing-md);
    }

    /* A touch heavier on small screens: the copy wraps over more of the frame,
       so there's less clear background for it to sit against. Still flat. */
    .golf-hero-overlay {
        background: rgba(10, 12, 15, 0.58);
    }

    .golf-hero-cta,
    .golf-cta-actions {
        flex-direction: column;
    }

    .golf-hero-cta a,
    .golf-cta-actions a {
        width: 100%;
    }

    .golf-banner {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
    }

    .golf-cta-card {
        padding: var(--spacing-lg) var(--spacing-sm);
        border-radius: 1.25rem;
    }
}

@media (max-width: 560px) {
    .golf-reviews .gr__badge { margin-bottom: 22px; }
    .golf-reviews .gr__lede { font-size: 1rem; }
    .golf-reviews .gr__card { flex-basis: 100%; padding: 26px 24px 22px; }
    .golf-reviews .gr__viewport { gap: 16px; }

    /* Steps go to a two-column layout: medallion beside the copy, left-aligned. */
    .golf-how-steps {
        gap: 24px;
        max-width: 23rem;
        margin-inline: auto;
    }

    .golf-how-step {
        display: grid;
        grid-template-columns: 56px 1fr;
        column-gap: 16px;
        align-items: start;
        padding: 0;
        text-align: left;
    }

    .golf-how-medallion {
        grid-column: 1;
        grid-row: 1 / span 3;
        align-self: start;
        width: 56px;
        height: 56px;
        margin-bottom: 0;
    }

    .golf-how-ico { width: 30px; height: 30px; }
    .golf-how-num { grid-column: 2; margin-bottom: 4px; }
    .golf-how-title { grid-column: 2; font-size: 1.3rem; margin-bottom: 6px; }
    .golf-how-sub { grid-column: 2; max-width: none; font-size: 0.95rem; line-height: 1.55; }
}

@media (prefers-reduced-motion: reduce) {
    .golf-reviews .gr__viewport {
        scroll-behavior: auto;
    }

    .golf-reviews .gr__card,
    .golf-how-medallion,
    .golf-how-ico {
        transition: none;
    }

    .golf-reviews .gr__card:hover,
    .golf-how-step:hover .golf-how-medallion {
        transform: none;
    }

    .golf-banner,
    .property-card-golf .golf-card-media img {
        transition: none;
    }

    .golf-banner:hover {
        transform: none;
    }
}