/* Styles for the blocks built for the "Newbury Racecourse hospitality" page.
   All values taken directly from the Figma frame (1440px artboard, 1312px content
   width = 64px side gutters). Kept in its own file so no existing stylesheet is touched. */

/* Brush Script MT Italic — the script face used for the hero accent in the design.
   Self-hosted because it is not a Google font and is absent on most devices. */
@font-face {
    font-family: 'Brush Script MT';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/brush-script-mt-italic.woff2') format('woff2');
}

/* ---------------------------------------------------------------- Hero ---- */
.nh-hero,
.nh-offer {
    display: flex;
    flex-wrap: wrap;
}

.nh-hero__text,
.nh-offer__content {
    flex: 1 1 50%;
    max-width: 50%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.nh-hero__image,
.nh-offer__image {
    flex: 1 1 50%;
    max-width: 50%;
}

.nh-hero__image img,
.nh-offer__image img,
.nh-photo-strip__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nh-hero__text {
    background: #15486e;
    color: #fff;
    min-height: 600px;
    padding: 64px;
    gap: 24px;
}

.nh-hero__heading {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 1;
    margin: 0;
    color: #fff !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: #fff !important;
    text-transform: none !important;
}

/* Design uses Brush Script MT Italic — a system font on Windows/macOS.
   Fallbacks keep a brush-script look where it is missing. */
.nh-hero__accent {
    font-family: 'Brush Script MT', 'Segoe Script', 'Bradley Hand', 'Snell Roundhand', cursive;
    font-style: italic;
    font-weight: 400;
    font-size: 64px;
    line-height: 1;
    white-space: nowrap;
    color: #ffe208 !important;
    -webkit-text-fill-color: #ffe208 !important;
}

.nh-hero__description {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.5;
    margin: 0;
}

.nh-hero__price {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.5;
    margin: 0;
}

.nh-hero__price-amount {
    font-size: 36px;
    color: #ffe208;
}

/* ------------------------------------------------------- What We Offer ---- */
.nh-offer__content {
    background: #ffe208;
    color: #16486D;
    min-height: 628px;
    padding: 64px;
    gap: 32px;
}

.nh-offer__head {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.nh-offer__title {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 1;
    margin: 0;
    color: #16486D !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: #16486D !important;
    text-transform: none !important;
}

.nh-offer__description {
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    line-height: 1.5;
    margin: 0;
}

.nh-offer__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 48px;
    row-gap: 32px;
}

.nh-offer__item {
    display: flex;
    align-items: center;
    gap: 24px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
}

.nh-offer__item-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
}

/* --------------------------------------- Light-blue band (fixtures group) ---
   In the design the fixtures title, table, photo strip and the testimonials row
   all sit inside one #E2EFFF section with 100px vertical padding and 50px gaps.
   They are separate blocks here, so the band is rebuilt from their paddings. */
.nh-fixtures,
.nh-photo-strip-section,
.nh-testimonials-row {
    background: #e2efff;
}

.nh-fixtures {
    padding: 100px 0 0;
}

.nh-photo-strip-section {
    padding: 50px 0 0;
}

.nh-testimonials-row.wp-block-columns {
    padding: 50px max(30px, calc((100% - 1320px) / 2)) 100px;
    gap: 20px;
    margin: 0;
    align-items: stretch;
}

/* ------------------------------------------------------- Fixtures table ---- */
.nh-fixtures__title {
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    color: #16486D !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: #16486D !important;
    text-transform: none !important;
    font-size: 48px;
    line-height: 1.2;
    margin: 0 0 50px;
}

.nh-fixtures__table-wrap {
    overflow-x: auto;
}

.nh-fixtures__table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    min-width: 900px;
}

.nh-fixtures__table thead th {
    background: #0c1f45;
    color: #fff;
    text-align: left;
    font-weight: 700;
    height: 62px;
    padding: 0 16px;
    vertical-align: middle;
}

.nh-fixtures__table thead th:first-child {
    padding-left: 32px;
}

.nh-fixtures__table thead th:last-child {
    padding-right: 32px;
}

.nh-fixtures__th-sub {
    font-weight: 400;
    font-size: 11px;
}

.nh-fixtures__table tbody tr {
    background: #fff;
    border: 1px solid #e3e6ee;
}

.nh-fixtures__table tbody tr:nth-child(even) {
    background: #f4f6fb;
}

.nh-fixtures__table tbody td {
    height: 62px;
    padding: 0 16px;
    color: #16486D;
    vertical-align: middle;
}

.nh-fixtures__table tbody td:first-child {
    padding-left: 32px;
}

.nh-fixtures__table tbody td:last-child {
    padding-right: 32px;
}

.nh-fixtures__fixture {
    font-weight: 700;
}

.nh-fixtures__status {
    font-weight: 700;
}

.nh-fixtures__status--available {
    color: #1f8a3b;
}

.nh-fixtures__status--limited {
    color: #e08a1e;
}

.nh-fixtures__status--selling-fast {
    color: #e0621e;
}

.nh-fixtures__button {
    display: inline-block;
    background: #ffe208;
    color: #16486D;
    font-weight: 700;
    font-size: 13px;
    line-height: 18px;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 5px;
    white-space: nowrap;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.nh-fixtures__button:hover,
.nh-fixtures__button:focus-visible {
    background: #e6c800;
    color: #16486D;
    transform: translateY(-1px);
}

/* ---------------------------------------------------------- Photo strip ---- */
.nh-photo-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.nh-photo-strip__item {
    aspect-ratio: 313 / 277;
    overflow: hidden;
}

/* --------------------------------------------------------- Testimonials ---- */
.nh-testimonials,
.nh-perfect-for {
    border-radius: 40px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    height: 100%;
    box-sizing: border-box;
}

.nh-testimonials {
    background: #fff;
}

.nh-testimonials__title,
.nh-perfect-for__title {
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1;
    margin: 0;
    background: none !important;
    -webkit-background-clip: initial !important;
    text-transform: none !important;
}

.nh-testimonials__title {
    color: #16486D !important;
    -webkit-text-fill-color: #16486D !important;
}

.nh-testimonials__items {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.nh-testimonials__item {
    flex: 1 1 0;
    border: 1px solid rgba(22, 72, 109, 0.2);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
}

.nh-testimonials__stars {
    color: #ffe208;
    font-size: 16px;
    line-height: 21px;
    letter-spacing: 1px;
}

.nh-testimonials__quote {
    font-family: 'Open Sans', sans-serif;
    font-style: italic;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.4;
    color: #16486D;
    margin: 0;
}

.nh-testimonials__name {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 1.4;
    color: #16486D;
    margin: 0;
    margin-top: auto;
}

/* ----------------------------------------------------------- Perfect For ---- */
.nh-perfect-for {
    background: #16486D;
    color: #fff;
}

.nh-perfect-for__title {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

.nh-perfect-for__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 32px;
}

.nh-perfect-for__item {
    width: 116px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.nh-perfect-for__icon {
    width: 80px;
    height: 80px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid #ffe208;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.nh-perfect-for__icon img {
    width: 32px;
    height: 32px;
}

.nh-perfect-for__label {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 400;
    color: #fff;
}

/* --------------------------------------------------------- FAQ accordion ---- */
.nh-faq {
    padding: 100px 0;
    background: #fff;
}

.nh-faq__title {
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    color: #16486D !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: #16486D !important;
    text-transform: none !important;
    font-size: 48px;
    line-height: 1.2;
    margin: 0 0 50px;
}

.nh-faq__list {
    column-count: 2;
    column-gap: 50px;
}

.nh-faq__item {
    break-inside: avoid;
    border-bottom: 1px solid #e5e5e5;
}

.nh-faq__question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 20px 24px;
    text-align: left;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    color: #16486D;
    transition: background-color 0.2s ease;
}

.nh-faq__question:hover,
.nh-faq__question:focus-visible {
    background: rgba(22, 72, 109, 0.05);
}

.nh-faq__toggle {
    position: relative;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

.nh-faq__toggle::before,
.nh-faq__toggle::after {
    content: '';
    position: absolute;
    background: #16486D;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.nh-faq__toggle::before {
    width: 100%;
    height: 2px;
}

.nh-faq__toggle::after {
    width: 2px;
    height: 100%;
    transition: transform 0.2s ease;
}

.nh-faq__item.is-open .nh-faq__toggle::after {
    transform: translate(-50%, -50%) scaleY(0);
}

.nh-faq__answer {
    display: none;
    padding: 0 24px 20px;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #16486D;
}

.nh-faq__answer p {
    margin: 0;
}

.nh-faq__item.is-open .nh-faq__answer {
    display: block;
}

/* ------------------------------------------------------------ CTA banner ---- */
.nh-cta {
    background: #ffe208;
    padding: 28px 0;
}

.nh-cta__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nh-cta__left {
    display: flex;
    align-items: center;
    gap: 24px;
}

.nh-cta__icon {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
}

.nh-cta__title {
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 19px;
    line-height: 26px;
    color: #16486D;
    margin: 0;
}

.nh-cta__description {
    font-family: 'Open Sans', sans-serif;
    font-size: 13.5px;
    line-height: 18px;
    color: #16486D;
    margin: 0;
}

.nh-cta__button {
    flex: 0 0 auto;
    display: inline-block;
    background: #17486d;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 27px;
    text-decoration: none;
    padding: 16px 32px;
    border-radius: 10px;
    white-space: nowrap;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.nh-cta__button:hover,
.nh-cta__button:focus-visible {
    background: #0f3450;
    color: #fff;
    transform: translateY(-1px);
}

/* ------------------------------------------------------------ Responsive ---- */
@media (max-width: 1024px) {
    .nh-hero__text,
    .nh-offer__content,
    .nh-hero__image,
    .nh-offer__image {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .nh-hero__text,
    .nh-offer__content {
        min-height: 0;
        padding: 48px 30px;
    }

    .nh-hero__heading,
    .nh-offer__title,
    .nh-fixtures__title,
    .nh-faq__title {
        font-size: 34px;
    }

    .nh-hero__accent {
        font-size: 44px;
    }

    .nh-testimonials-row.wp-block-columns {
        flex-wrap: wrap;
        padding: 40px 30px 60px;
    }

    .nh-fixtures {
        padding-top: 60px;
    }

    .nh-faq {
        padding: 60px 0;
    }
}

@media (max-width: 782px) {
    .nh-offer__items {
        grid-template-columns: 1fr;
    }

    .nh-photo-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .nh-testimonials__items {
        flex-direction: column;
    }

    .nh-perfect-for__items {
        flex-wrap: wrap;
    }

    .nh-fixtures__table thead {
        display: none;
    }

    .nh-fixtures__table,
    .nh-fixtures__table tbody,
    .nh-fixtures__table tr,
    .nh-fixtures__table td {
        display: block;
        width: 100%;
    }

    .nh-fixtures__table {
        min-width: 0;
    }

    .nh-fixtures__table tbody tr {
        padding: 12px 0;
    }

    .nh-fixtures__table tbody td {
        border-bottom: none;
        height: auto;
        padding: 4px 16px;
    }

    .nh-fixtures__table tbody td::before {
        content: attr(data-label) ': ';
        font-weight: 700;
    }

    .nh-faq__list {
        column-count: 1;
    }

    .nh-cta__row {
        justify-content: flex-start;
    }
}