/* ============================================================
   PADEL LOGAN — shared furniture for the content pages
   (court hire, contact, corporate). Loads after site.css.
   ============================================================ */

/* ── PAGE HERO ── */
.p-hero {
    position: relative; background: var(--mgc-ink);
    background-image: linear-gradient(rgba(15,59,89,0.80), rgba(15,59,89,0.93)), url('/assets/img/hero.jpg');
    background-size: cover; background-position: center;
    padding: 10rem 2.5rem 4.5rem; color: var(--cream);
}
.p-hero-inner { max-width: 1140px; margin: 0 auto; }
.p-eyebrow {
    display: inline-flex; align-items: center; gap: 0.7rem;
    font-family: 'Barlow Condensed', sans-serif; font-size: 0.75rem; font-weight: 700;
    letter-spacing: 0.28em; text-transform: uppercase; color: var(--white); margin-bottom: 1.2rem;
}
.p-eyebrow::before { content: ''; width: 2.2rem; height: 1px; background: var(--white); opacity: 0.55; }
.p-title {
    font-family: 'Cormorant Garamond', serif; font-weight: 300;
    font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.05; color: var(--white); margin-bottom: 1.2rem;
}
.p-title em { font-style: italic; }
.p-sub { font-size: 0.95rem; line-height: 1.8; max-width: 60ch; color: var(--cream-dim); }
.p-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }

/* ── RATE CARDS ── */
.rate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-top: 2.6rem; }
.rate-card {
    border: 1px solid rgba(234,241,246,0.16); border-radius: 3px;
    background: linear-gradient(160deg, rgba(46,147,190,0.14), rgba(15,59,89,0.1));
    padding: 2.4rem 2rem;
}
.rate-band {
    font-family: 'Barlow Condensed', sans-serif; font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.26em; text-transform: uppercase; color: var(--white);
}
.rate-name {
    font-family: 'Barlow Condensed', sans-serif; font-size: 2rem; font-weight: 800;
    letter-spacing: 0.05em; text-transform: uppercase; color: var(--white); margin: 0 0 0.2rem;
}
.rate-time { font-size: 0.82rem; letter-spacing: 0.1em; color: var(--cream-dim); margin-bottom: 1.8rem; }
.rate-line {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    padding: 0.95rem 0; border-top: 1px solid rgba(234,241,246,0.12);
}
.rate-line-label { font-size: 0.82rem; color: var(--cream-dim); }
.rate-line-sub { display: block; font-size: 0.7rem; letter-spacing: 0.08em; color: rgba(234,241,246,0.6); margin-top: 0.15rem; }
.rate-line-val {
    font-family: 'Barlow Condensed', sans-serif; font-size: 2rem; font-weight: 800;
    color: var(--white); line-height: 1; white-space: nowrap;
}
.rate-line-val sup { font-size: 0.45em; vertical-align: super; }
.rate-line.is-member { border-top-color: rgba(190,232,255,0.4); }
.rate-line.is-member .rate-line-val { color: #BEE8FF; }
.rate-line.is-member .rate-line-label { color: #BEE8FF; }

/* ── FEATURE GRID ── */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 2.8rem; }
.feat {
    border: 1px solid var(--border-dark); border-radius: 3px; padding: 2rem 1.7rem;
    background: #ffffff;
}
.sec-navy .feat { border-color: rgba(234,241,246,0.16); background: rgba(255,255,255,0.03); }
.feat-num {
    font-family: 'Barlow Condensed', sans-serif; font-size: 0.75rem; font-weight: 700;
    letter-spacing: 0.24em; color: var(--green-court);
}
.sec-navy .feat-num { color: #BEE8FF; }
.feat-title {
    font-family: 'Barlow Condensed', sans-serif; font-size: 1.25rem; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase; margin: 0.5rem 0 0.7rem; color: var(--green-deep);
}
.sec-navy .feat-title { color: var(--white); }
.feat-body { font-size: 0.86rem; line-height: 1.75; color: var(--body-grey); }
.sec-navy .feat-body { color: var(--cream-dim); }

/* ── STEPS ── */
.steps { list-style: none; counter-reset: s; margin-top: 2.4rem; display: flex; flex-direction: column; gap: 1.5rem; }
.steps li {
    counter-increment: s; position: relative; padding-left: 3.4rem;
    font-size: 0.9rem; line-height: 1.75; color: var(--cream-dim);
}
.steps li::before {
    content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: -0.15rem;
    font-family: 'Barlow Condensed', sans-serif; font-size: 1.1rem; font-weight: 700;
    letter-spacing: 0.1em; color: #BEE8FF;
}
.steps strong { color: var(--white); font-weight: 500; }

/* ── CONTACT ── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.c-detail-list { display: flex; flex-direction: column; gap: 1.6rem; margin-top: 2.2rem; }
.c-detail { display: flex; gap: 1rem; align-items: flex-start; }
.c-detail svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; fill: var(--green-court); }
.c-detail-label {
    display: block; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--body-grey); margin-bottom: 0.3rem;
}
.c-detail a, .c-detail span.c-val { font-size: 0.95rem; color: var(--green-deep); text-decoration: none; line-height: 1.6; }
.c-detail a:hover { border-bottom: 1px solid var(--green-court); }

.c-map { margin-top: 3rem; border: 1px solid var(--border-dark); border-radius: 3px; overflow: hidden; }
.c-map-frame { position: relative; aspect-ratio: 16 / 7; background: var(--green-deep); }
.c-map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

.c-form { display: flex; flex-direction: column; gap: 1.3rem; }
.c-success {
    display: none; padding: 1.4rem 1.5rem; border-left: 3px solid var(--green-court);
    background: rgba(30,111,148,0.07); font-size: 0.9rem; line-height: 1.7; color: var(--green-deep);
}
.c-success.show { display: block; }
.c-error {
    display: none; padding: 1rem 1.2rem; border-left: 3px solid var(--error);
    background: rgba(192,57,43,0.07); color: var(--error); font-size: 0.85rem; line-height: 1.6;
}
.c-error.show { display: block; }

/* ── CTA BAND ── */
.cta-band { padding: 5.5rem 2.5rem; text-align: center; }
.cta-inner { max-width: 720px; margin: 0 auto; }
.cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2.2rem; }
.cta-fine { margin-top: 1.8rem; font-size: 0.78rem; color: var(--body-grey); }
.sec-navy .cta-fine { color: rgba(234,241,246,0.75); }
.cta-fine a { color: inherit; }

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
    .rate-grid, .contact-grid { grid-template-columns: 1fr; }
    .contact-grid { gap: 3rem; }
    .feat-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .p-hero { padding: 8rem 1.5rem 3.2rem; }
    .cta-band { padding: 4rem 1.5rem; }
    .rate-card { padding: 1.9rem 1.4rem; }
    .p-hero-actions .btn-primary, .p-hero-actions .btn-ghost,
    .cta-actions .btn-primary, .cta-actions .btn-ghost { width: 100%; text-align: center; }
}

/* ── LEGAL / POLICY PAGES ── */
.legal { max-width: 76ch; }
.legal-updated {
    font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--green-court); margin-bottom: 2.4rem;
}
.legal-intro { font-size: 0.95rem; line-height: 1.85; color: var(--body-grey); }
.legal-intro p + p { margin-top: 1rem; }
.legal h2 {
    font-family: 'Barlow Condensed', sans-serif; font-size: 1.3rem; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--green-deep);
    margin: 3rem 0 1rem; padding-top: 2rem; border-top: 1px solid var(--border-dark);
}
.legal h2 .legal-num { color: var(--green-court); margin-right: 0.6rem; }
.legal p { font-size: 0.9rem; line-height: 1.85; color: var(--body-grey); }
.legal p + p { margin-top: 0.9rem; }
.legal ul { list-style: none; margin: 1.1rem 0; display: flex; flex-direction: column; gap: 0.5rem; }
.legal ul li {
    position: relative; padding-left: 1.4rem;
    font-size: 0.88rem; line-height: 1.7; color: var(--body-grey);
}
.legal ul li::before {
    content: ''; position: absolute; left: 0; top: 0.62rem;
    width: 5px; height: 5px; border-radius: 50%; background: var(--green-court);
}
.legal a { color: var(--green-court); }
.legal-contact {
    margin-top: 1.2rem; padding: 1.5rem 1.6rem;
    border-left: 3px solid var(--green-court); background: rgba(30,111,148,0.06);
    font-size: 0.9rem; line-height: 1.9; color: var(--green-deep);
}
.legal-contact strong { font-weight: 500; }

/* ── CORPORATE ENQUIRY FORM ── */
.corp-form { max-width: 760px; margin-top: 2.6rem; }
.corp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
.corp-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
/* the form sits on navy, so labels and helper text invert */
.sec-navy .field-label { color: var(--cream); }
.sec-navy .field-label .req { color: #BEE8FF; }
.sec-navy .field-hint { color: rgba(234,241,246,0.75); }
.sec-navy .choice { border-color: rgba(234,241,246,0.3); color: var(--cream); }
.sec-navy .choice:hover { border-color: #BEE8FF; background: rgba(255,255,255,0.05); }
.sec-navy .choice-box { border-color: rgba(234,241,246,0.55); background: transparent; }
.sec-navy .choice input:checked + .choice-box { background: #BEE8FF; border-color: #BEE8FF; }
.sec-navy .choice input:checked + .choice-box::after { background: var(--green-deep); }
.sec-navy .choice:has(input:checked) { border-color: #BEE8FF; background: rgba(190,232,255,0.10); }
.sec-navy .c-success { background: rgba(190,232,255,0.12); border-left-color: #BEE8FF; color: var(--cream); }
.sec-navy .c-success strong { color: var(--white); }
.sec-navy .c-success a { color: #BEE8FF; }
@media (max-width: 700px) {
    .corp-grid, .corp-grid-3 { grid-template-columns: 1fr; }
}

/* ── PLAYER LEVELS ── */
.lvl-table { margin-top: 2.6rem; border: 1px solid var(--border-dark); border-radius: 3px; overflow: hidden; }
.lvl-head, .lvl-row { display: grid; grid-template-columns: 1.1fr 0.8fr 1.6fr; gap: 0; }
.lvl-head > span {
    background: var(--green-deep); color: #fff; padding: 0.85rem 1.1rem;
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
    font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
}
.lvl-row > * { padding: 1.1rem 1.1rem; border-top: 1px solid var(--border-dark); font-size: 0.88rem; line-height: 1.5; }
.lvl-row .lvl-name {
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
    font-size: 1rem; letter-spacing: 0.05em; text-transform: uppercase;
    /* column, so the rating sits UNDER the name rather than beside it as a
       flex sibling, while the swatch still fills the row height */
    display: flex; flex-direction: column; justify-content: center;
}
.lvl-row .lvl-rate { font-variant-numeric: tabular-nums; color: var(--body-grey); align-self: center; }
.lvl-row .lvl-std { color: var(--body-grey); }

/* level detail cards */
.lvl-cards { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 2.6rem; }
.lvl-card { border: 1px solid var(--border-dark); border-radius: 3px; overflow: hidden; background: #fff; }
.lvl-card-top {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.3rem 1rem;
    padding: 0.95rem 1.4rem;
}
.lvl-card-name {
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
    font-size: 1.25rem; letter-spacing: 0.05em; text-transform: uppercase;
}
.lvl-card-rate { font-size: 0.82rem; letter-spacing: 0.08em; opacity: 0.92; }
.lvl-card-body { padding: 1.2rem 1.4rem 1.4rem; }
.lvl-card-body p { font-size: 0.9rem; line-height: 1.75; color: var(--body-grey); margin-bottom: 0.8rem; }
.lvl-card-body p:last-child { margin-bottom: 0; }
.lvl-fit { font-size: 0.9rem; line-height: 1.7; color: var(--green-deep); }
.lvl-fit b { font-weight: 600; }

/* Level swatches, matching the printed sheets. Green to red, so the colour
   itself reads as increasing standard; light and dark alternate through the
   first four so the set separates on lightness as well as hue. */
.lc1 { background: #A9CE7C; color: #0F3B59; }   /* Beginner        light green  */
.lc2 { background: #2B8743; color: #fff; }      /* Beginner +      dark green   */
.lc3 { background: #F2A94E; color: #0F3B59; }   /* Beginner ++     light orange */
.lc4 { background: #B36117; color: #fff; }      /* Intermediate    burnt orange */
.lc5 { background: #96150C; color: #fff; }      /* Int. Advanced   red          */
.lc6 { background: #A8D6EC; color: #0F3B59; }   /* All Levels      light blue   */
.lc7 { background: #E993BC; color: #0F3B59; }   /* Ladies Social   pink         */
.lc8 { background: #252422; color: #fff; }      /* Community       charcoal     */

/* timetable: day columns, the same shape as the printed sheet */
.tt-grid {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.6rem;
    margin-top: 2.6rem; align-items: start;
}
.tt-day {
    background: rgba(255,255,255,0.05); border-radius: 4px;
    overflow: hidden; display: flex; flex-direction: column; height: 100%;
}
.tt-day-name {
    background: rgba(255,255,255,0.12); padding: 0.75rem 0.5rem; text-align: center;
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
    font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: #fff;
}
.tt-slots { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.6rem; flex: 1; }
.tt-slot {
    border-radius: 3px; padding: 0.85rem 0.6rem; text-align: center;
    display: flex; flex-direction: column; justify-content: center; min-height: 6.4rem;
}
.tt-slot-name {
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
    font-size: 0.86rem; line-height: 1.15; letter-spacing: 0.03em; text-transform: uppercase;
}
.tt-slot-rate { font-size: 0.7rem; margin-top: 0.25rem; opacity: 0.92; }
.tt-slot-time {
    font-size: 0.74rem; margin-top: 0.4rem; font-weight: 500;
    font-variant-numeric: tabular-nums;
}
/* sessions open to everyone are outlined, so a filled colour only ever means
   a specific level */
.tt-slot.tt-open { background: transparent; border: 1.5px dashed rgba(234,241,246,0.45); color: var(--cream); }

/* downloads */
.dl-row { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.2rem; }
.dl {
    display: inline-flex; align-items: center; gap: 0.6rem;
    border: 1.5px solid rgba(15,59,89,0.35); border-radius: 3px;
    padding: 0.85rem 1.2rem; text-decoration: none; color: var(--green-deep);
    font-size: 0.8rem; font-weight: 500; letter-spacing: 0.06em;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.dl:hover { background: var(--green-deep); color: #fff; border-color: var(--green-deep); }
.dl svg { width: 1rem; height: 1rem; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; }
.sec-navy .dl { border-color: rgba(234,241,246,0.4); color: var(--cream); }
.sec-navy .dl:hover { background: #fff; color: var(--green-deep); border-color: #fff; }

@media (max-width: 1000px) { .tt-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) {
    .lvl-head, .lvl-row { grid-template-columns: 1fr; }
    .lvl-head { display: none; }
    .lvl-row > * { border-top: none; }
    .lvl-row { border-top: 1px solid var(--border-dark); }
    .tt-grid { grid-template-columns: 1fr 1fr; }
    .dl { width: 100%; }
}


/* ── LINKS IN PROSE ───────────────────────────────────────────
   Without this, links inside .sec-lead / .p-sub fall back to the
   browser default blue, which is invisible on the navy sections.
   Every context gets an explicit colour and an underline. */
.sec-lead a, .p-sub a, .lvl-card-body a, .cta-fine a, .field-hint a, .legal a {
    color: var(--green-court); text-decoration: none;
    border-bottom: 1px solid currentColor; transition: color 0.18s, border-color 0.18s;
}
.sec-lead a:hover, .p-sub a:hover, .lvl-card-body a:hover, .cta-fine a:hover, .field-hint a:hover {
    color: var(--green-deep);
}
/* on navy the accent has to lift off the ground, not sink into it */
.sec-navy .sec-lead a, .p-hero .p-sub a, .sec-navy .cta-fine a {
    color: #A8D6EC; border-bottom-color: rgba(168,214,236,0.55);
}
.sec-navy .sec-lead a:hover, .p-hero .p-sub a:hover, .sec-navy .cta-fine a:hover {
    color: #ffffff; border-bottom-color: #ffffff;
}

/* ── BOOKING PAGES ── */
.book-embed {
    margin-top: 2.6rem; border: 1px solid var(--border-dark); border-radius: 4px;
    background: #F4F7F9; padding: 3.2rem 2rem; text-align: center;
}
.sec-navy .book-embed { border-color: rgba(234,241,246,0.2); background: rgba(255,255,255,0.04); }
.book-embed-icon {
    width: 3rem; height: 3rem; margin: 0 auto 1.2rem; border-radius: 50%;
    border: 1.5px solid var(--green-court); display: flex; align-items: center; justify-content: center;
}
.book-embed-icon svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: var(--green-court); stroke-width: 2; }
.book-embed-t {
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.1rem;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-deep); margin-bottom: 0.7rem;
}
.sec-navy .book-embed-t { color: #fff; }
.book-embed p { font-size: 0.9rem; line-height: 1.7; color: var(--body-grey); max-width: 46ch; margin: 0 auto; }
.sec-navy .book-embed p { color: var(--cream-dim); }
.book-embed .btn-primary { margin-top: 1.6rem; }

/* ratings key beneath the timetable, matching the sheet */
.tt-key { margin-top: 2.4rem; border: 1px solid rgba(234,241,246,0.2); border-radius: 4px; padding: 1.6rem 1.8rem; }
.tt-key-t {
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.85rem;
    letter-spacing: 0.2em; text-transform: uppercase; color: #A8D6EC; margin-bottom: 0.4rem;
}
.tt-key-sub { font-size: 0.88rem; line-height: 1.6; color: var(--cream-dim); margin-bottom: 1.2rem; max-width: 62ch; }
.tt-key-rows { display: flex; flex-direction: column; gap: 0.7rem; }
.tt-key-row { display: grid; grid-template-columns: 13rem 1fr; gap: 1.1rem; align-items: center; }
.tt-key-chip {
    border-radius: 3px; padding: 0.6rem 0.7rem; text-align: center; line-height: 1.2;
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
    font-size: 0.86rem; letter-spacing: 0.04em; text-transform: uppercase;
}
.tt-key-chip small {
    display: block; font-family: 'DM Sans', sans-serif; font-weight: 500;
    font-size: 0.66rem; letter-spacing: 0.03em; text-transform: none; margin-top: 0.15rem; opacity: 0.9;
}
.tt-key-desc { font-size: 0.86rem; line-height: 1.5; color: var(--cream); }
@media (max-width: 700px) { .tt-key-row { grid-template-columns: 1fr; gap: 0.4rem; } }


/* ── COMBINED SESSION (two levels in one slot) ──────────────
   Two colour bands rather than one split background: a single
   50/50 fill cannot clear contrast for both halves, because one
   wants white text and the other navy. */
.tt-slot.tt-combo { padding: 0; overflow: hidden; }
.tt-combo-half {
    padding: 0.5rem 0.4rem;
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
    font-size: 0.8rem; line-height: 1.15; letter-spacing: 0.03em; text-transform: uppercase;
}
.tt-combo-foot { padding: 0.5rem 0.4rem 0.6rem; background: rgba(255,255,255,0.1); }
.tt-combo-foot .tt-slot-rate,
.tt-combo-foot .tt-slot-time { display: block; margin-top: 0; }
.tt-combo-foot .tt-slot-time { margin-top: 0.25rem; }