/* ===================================================================
   The Space page (slug: the-space)
   Builds on the shared fp-* helpers from front-page.css.
   Figma node 2305:588.
   =================================================================== */

/* Hero, split-section item headings/bodies, and atmosphere card body
   (rich-text) are handled by the shared inner-page patterns in
   front-page.css. */

/* ── 2. Split section (Differs / People) ─────────────── */

.tsp-split {
    background: var(--color-light-grey);
    padding-block: var(--space-24);
}

.tsp-split__inner {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 60px;
    align-items: start;
}

.tsp-split__left {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.tsp-split__left .fp-heading {
    max-width: 343px;
}

.tsp-split__intro {
    /* typography from fp-tagline group; max-width from split-intro group */
}

.tsp-split__right {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    max-width: 610px;
}

/* ── 3. Atmosphere ───────────────────────────────────── */

.tsp-atmosphere {
    background: var(--color-white);
    padding-block: var(--space-24);
}

.tsp-atmosphere .fp-heading {
    margin-bottom: var(--space-6);
}

.tsp-atmosphere__intro {
    /* typography from fp-tagline group */
    text-align: center;
    max-width: 478px;
    margin-inline: auto;
    margin-bottom: var(--space-24);
}

.tsp-atmosphere__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-16);
}

.tsp-atmosphere__card-heading {
    /* typography from shared section heading group */
    margin-bottom: var(--space-3);
}

/* ── 4. Private Hire ─────────────────────────────────── */

.tsp-hire {
    background: var(--color-white);
    padding-block: var(--space-24);
}

.tsp-hire__band {
    position: relative;
    height: 660px;
    overflow: hidden;
}

.tsp-hire__bg,
.tsp-hire__bg-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.tsp-hire__bg-placeholder {
    background: var(--color-gray-600);
}

.tsp-hire__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.2) 0%,
            rgba(0, 0, 0, 0.6) 100%);
}

.tsp-hire__content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--space-6);
    padding: var(--space-16);
    box-sizing: border-box;
}

.tsp-hire__title {
    font-family: var(--font-serif);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-normal);
    color: var(--color-white);
    line-height: var(--line-height-tight);
}

.tsp-hire__body {
    font-family: var(--font-sans);
    font-size: var(--font-size-lg);
    color: var(--color-white);
    line-height: var(--line-height-content);
    max-width: 635px;
}

.tsp-hire__body p + p {
    margin-top: var(--space-4);
}

.tsp-hire__content .btn-gold {
    margin-top: var(--space-2);
}

/* ── Responsive ──────────────────────────────────────── */

@media (max-width: 1200px) {
    .tsp-split,
    .tsp-atmosphere,
    .tsp-hire {
        padding-block: var(--space-16);
    }
}

@media (max-width: 900px) {
    .tsp-split__inner {
        grid-template-columns: 1fr;
        gap: var(--space-12);
    }

    .tsp-split__left .fp-heading {
        max-width: none;
    }

    .tsp-atmosphere__grid {
        grid-template-columns: 1fr;
        gap: var(--space-12);
    }

    .tsp-atmosphere__intro {
        margin-bottom: var(--space-16);
    }
}

@media (max-width: 640px) {
    .tsp-hire__band {
        height: auto;
        min-height: 520px;
    }

    .tsp-hire__content {
        padding: var(--space-8);
    }
}