/*
 * The new front page — No Zebra's "D - Frontpage" (Figma 3:8) and "M - Frontpage" (101:70).
 *
 * On top of room-v2.css, which brings the tokens, the reset, buttons, header, room cards and footer;
 * this file is only the front page's own sections, top to bottom.
 */

/* ---- Shared bits ------------------------------------------------------------------------------ */

.rh-front .rh-main > section {
    padding: 120px var(--rh-gutter) 136px;
}

.rh-eyebrow {
    font: 700 20px/1.2 var(--rh-sans);
}

.rh-front-lead {
    font-size: 20px;
    line-height: 1.2;
}

/* A customer quote: the big serif mark, the words in light italic, the company in bold. */
.rh-quote {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 24px 16px 16px;
    border-radius: 8px;
    background: var(--rh-evergreen);
    color: var(--rh-pergament);
}

.rh-quote--brass {
    background: var(--rh-brass);
    color: var(--rh-obsidian);
}

.rh-quote-mark {
    display: block;
    height: 18px;
    font: 400 88px/1 var(--rh-serif);
    line-height: 62px;
    overflow: visible;
}

.rh-quote blockquote {
    margin: 0;
    font: italic 300 16px/1.2 var(--rh-sans);
}

.rh-quote figcaption {
    font: 700 16px/1.2 var(--rh-sans);
}

.rh-quote .rh-stars {
    display: flex;
}

.rh-more-link {
    font-size: 16px;
    line-height: 21px;
    text-decoration: underline dotted;
    text-underline-position: from-font;
}

.rh-more-link:hover {
    text-decoration-style: solid;
}

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

.rh-front .rh-main > .rh-front-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 46px;
    padding: 144px var(--rh-edge);
    background: var(--rh-obsidian);
    color: var(--rh-pergament);
}

.rh-front-hero-content {
    display: flex;
    flex: 0 1 489px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.rh-front-hero-title {
    font: 400 80px/88px var(--rh-serif);
}

.rh-front-hero-text {
    margin-bottom: 16px;
    font-size: 20px;
    line-height: 1.2;
}

.rh-front-mosaic {
    display: flex;
    flex: 0 1 793px;
    gap: 16px;
    height: 531px;
}

.rh-front-mosaic-col {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.rh-front-mosaic-col--quote-first {
    flex-direction: column-reverse;
}

.rh-front-mosaic-img {
    flex: 1 1 0;
    width: 100%;
    min-height: 0;
    border-radius: 8px;
    object-fit: cover;
}

.rh-front-mosaic .rh-quote {
    flex: 0 0 auto;
}

/* ---- Facts band ------------------------------------------------------------------------------- */

.rh-front .rh-main > .rh-front-facts {
    padding: 80px 200px 96px;
    background: var(--rh-pergament);
}

.rh-front-facts-list {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    max-width: 1040px;
    margin: 0 auto;
}

.rh-front-facts-list div {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 8px;
    color: var(--rh-brass);
    text-align: center;
}

.rh-front-facts-list dd {
    font: 700 25.2px/1.2 var(--rh-display);
    font-variation-settings: "SOFT" 0, "WONK" 1;
}

.rh-front-facts-list dt {
    font: 600 12px/19.2px var(--rh-sans);
}

/* ---- Rooms ------------------------------------------------------------------------------------ */

.rh-front-rooms {
    display: flex;
    flex-direction: column;
    gap: 56px;
    background: var(--rh-obsidian);
}

.rh-front-rooms > * {
    width: 100%;
    max-width: var(--rh-content);
    margin-right: auto;
    margin-left: auto;
}

.rh-front-rooms-head {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.rh-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.rh-filter[hidden] {
    display: none;
}

.rh-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rh-chip {
    padding: 8px 16px;
    border: 1px solid var(--rh-brass);
    border-radius: 0;
    background: transparent;
    font: 600 14px/1.2 var(--rh-sans);
    color: var(--rh-brass);
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.rh-chip:hover {
    border-color: var(--rh-peach);
    color: var(--rh-peach);
}

.rh-chip[aria-pressed="true"] {
    border-color: var(--rh-paprika);
    color: var(--rh-paprika);
}

.rh-filter-clear {
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    font: italic 400 14px/1.2 var(--rh-sans);
    color: var(--rh-peach);
    cursor: pointer;
}

.rh-filter-clear:hover {
    text-decoration: underline;
}

.rh-front-rooms-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.rh-front-rooms-grid .rh-card[hidden] {
    display: none;
}

.rh-front-rooms-empty {
    color: var(--rh-pergament);
}

.rh-front-rooms-empty[hidden] {
    display: none;
}

/* ---- Occasions -------------------------------------------------------------------------------- */

.rh-front-occasions {
    display: flex;
    flex-direction: column;
    gap: 40px;
    background: var(--rh-evergreen);
}

.rh-front-occasions > * {
    width: 100%;
    max-width: var(--rh-content);
    margin-right: auto;
    margin-left: auto;
}

/* Two lines wide in the design, at the content's left edge. */
.rh-front-occasions > .rh-section-title {
    max-width: 624px;
    margin-left: max(0px, calc((100% - var(--rh-content)) / 2));
}

/* One strip with rounded outer corners, at every width: the strip clips, so a wrapped row (tablet)
   or a column (phone) is rounded where it ends, whatever the number of cards. */
.rh-occasions {
    display: flex;
    gap: 1px;
    margin: 0 auto;
    padding: 0;
    border-radius: 8px;
    overflow: hidden;
    list-style: none;
}

.rh-occasion {
    position: relative;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    justify-content: flex-end;
    gap: 16px;
    min-height: 295px;
    padding: 64px 24px 40px;
    background: var(--rh-pergament);
    color: var(--rh-obsidian);
    transition: background .15s;
}

.rh-occasion:hover,
.rh-occasion:focus-within {
    background: var(--rh-pergament-tint);
}

.rh-occasion-title {
    font: 600 20px/1.2 var(--rh-sans);
}

.rh-occasion p {
    line-height: 21px;
}

/* The whole card answers the click. */
.rh-occasion .rh-more-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* ---- Olsen Banden / Nordisk Film -------------------------------------------------------------- */

.rh-front .rh-main > .rh-front-feature {
    display: flex;
    align-items: stretch;
    gap: 80px;
    padding: 120px var(--rh-edge);
    background: var(--rh-pergament);
    color: var(--rh-obsidian);
}

.rh-front-feature-media,
.rh-front-feature-content {
    flex: 1 1 0;
    min-width: 0;
}

.rh-front-feature-img {
    width: 100%;
    height: 100% !important;
    border-radius: 8px;
    object-fit: cover;
}

.rh-front-feature-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 56px 0;
}

.rh-front-feature .rh-section-title,
.rh-front-how .rh-section-title {
    color: var(--rh-obsidian);
}

.rh-front-feature .rh-front-lead {
    margin-bottom: 16px;
}

/* Both room buttons side by side from a 1280 px window: 24 px between them is 4 px too many. */
.rh-front-feature .rh-btn-row {
    gap: 16px;
}

/* ---- What is an escape room ------------------------------------------------------------------- */

.rh-front-how {
    background: var(--rh-obsidian);
}

.rh-front-how-box {
    max-width: var(--rh-content);
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
    color: var(--rh-obsidian);
}

.rh-front-how-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 56px 160px;
    background: var(--rh-peach);
    text-align: center;
}

.rh-front-how-top .rh-front-lead {
    margin-bottom: 16px;
}

.rh-front-how-top .rh-btn-row {
    justify-content: center;
}

.rh-steps {
    display: flex;
    margin: 0;
    padding: 32px;
    background: var(--rh-pergament);
    list-style: none;
    counter-reset: rh-step;
}

.rh-step {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 40px 32px;
    border-right: 1px solid var(--rh-peach);
    text-align: center;
    counter-increment: rh-step;
}

.rh-step:last-child {
    border-right: 0;
}

.rh-step::before {
    content: counter(rh-step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: url("img/step-circle.svg") center / 48px 48px no-repeat;
    font: 400 20px/1 var(--rh-sans);
    color: var(--rh-pergament);
}

.rh-step-title {
    font: 400 40px/40px var(--rh-serif);
}

/* ---- Company events --------------------------------------------------------------------------- */

.rh-front .rh-main > .rh-front-b2b {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: space-between;
    gap: 80px;
    padding: 120px var(--rh-edge) 16px;
    background: var(--rh-pergament);
    color: var(--rh-obsidian);
}

.rh-front-b2b-main,
.rh-front-b2b-proof {
    flex: 0 1 624px;
    min-width: 0;
}

.rh-front-b2b-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.rh-front-b2b-title {
    font: 400 64px/72px var(--rh-serif);
}

.rh-front-b2b-text {
    margin-bottom: 16px;
}

.rh-offers {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rh-offer {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 16px;
    padding: 24px;
    background: var(--rh-obsidian);
    color: var(--rh-pergament);
}

.rh-offer:first-child {
    border-radius: 8px 8px 0 0;
}

.rh-offer:last-child {
    border-radius: 0 0 8px 8px;
}

.rh-offer:only-child {
    border-radius: 8px;
}

.rh-offer-img {
    flex: 0 0 209px;
    width: 209px;
    height: auto !important;
    min-height: 100px;
    border-radius: 8px;
    object-fit: cover;
}

.rh-offer-body {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 16px;
}

.rh-offer-title {
    font: 600 20px/1.2 var(--rh-sans);
}

.rh-offer .rh-more-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.rh-front-b2b-proof {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rh-front-b2b-quotes {
    display: flex;
    gap: 16px;
}

.rh-front-b2b-quotes .rh-quote {
    flex: 1 1 0;
    justify-content: flex-end;
}

.rh-front-b2b-quotes .rh-stars img {
    width: 32px;
    height: 32px;
}

.rh-video {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    height: 356px;
    margin: 0;
    padding: 24px;
    border-radius: 8px;
    overflow: hidden;
    color: var(--rh-pergament);
}

.rh-video-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}

.rh-video::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .2));
}

.rh-video figcaption,
.rh-video-play {
    position: relative;
    z-index: 1;
}

.rh-video figcaption {
    max-width: 269px;
    font: 600 16px/1.2 var(--rh-sans);
}

.rh-video-play {
    display: inline-flex;
    padding: 8px;
    border-radius: 50%;
    background: var(--rh-pergament);
}

/* ---- Narrower screens ------------------------------------------------------------------------- */

@media (max-width: 1279px) {
    .rh-front .rh-main > .rh-front-hero {
        flex-direction: column;
        align-items: stretch;
        padding-top: 120px;
    }

    .rh-front-hero-content {
        flex-basis: auto;
        max-width: 640px;
    }

    .rh-front-mosaic {
        flex-basis: auto;
    }

    .rh-front .rh-main > .rh-front-facts {
        padding: 64px var(--rh-gutter) 80px;
    }

    .rh-front-how-top {
        padding: 56px 64px;
    }
}

@media (max-width: 1099px) {
    .rh-front-rooms-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rh-occasions {
        flex-wrap: wrap;
    }

    .rh-occasion {
        flex-basis: calc((100% - 2px) / 3);
        min-height: 240px;
    }

    .rh-front .rh-main > .rh-front-feature,
    .rh-front .rh-main > .rh-front-b2b {
        flex-direction: column;
        gap: 40px;
    }

    .rh-front-feature-media {
        flex: 0 0 auto;
    }

    .rh-front-feature-img {
        height: auto !important;
        aspect-ratio: 16 / 11;
    }

    .rh-front-feature-content {
        padding: 0;
    }

    .rh-front-b2b-main,
    .rh-front-b2b-proof {
        flex-basis: auto;
        width: 100%;
    }

    .rh-front .rh-main > .rh-front-b2b {
        padding-bottom: 16px;
    }
}

@media (max-width: 767px) {
    .rh-front .rh-main > section {
        padding: 80px var(--rh-gutter);
    }

    .rh-front .rh-main > .rh-front-hero {
        gap: 40px;
        padding: 96px var(--rh-gutter) 80px;
    }

    .rh-front-hero-title {
        font-size: 56px;
        line-height: 60px;
    }

    .rh-front-hero .rh-btn-row,
    .rh-front-feature .rh-btn-row,
    .rh-front-how .rh-btn-row {
        flex-direction: column;
        align-self: stretch;
        gap: 16px;
    }

    .rh-front-hero .rh-btn,
    .rh-front-feature .rh-btn,
    .rh-front-how .rh-btn {
        width: 100%;
    }

    /* Each column of the mosaic becomes a row of two: picture and quote side by side. */
    .rh-front-mosaic {
        flex-direction: column;
        height: auto;
    }

    .rh-front-mosaic-col,
    .rh-front-mosaic-col--quote-first {
        flex-direction: row;
        align-items: stretch;
    }

    .rh-front-mosaic-col--quote-first {
        flex-direction: row-reverse;
    }

    .rh-front-mosaic .rh-front-mosaic-col > * {
        flex: 1 1 0;
        min-width: 0;
    }

    .rh-front-mosaic-img {
        height: auto !important;
        min-height: 160px;
    }

    .rh-front .rh-main > .rh-front-facts {
        padding: 80px var(--rh-gutter);
    }

    .rh-front-facts-list {
        flex-direction: column;
        align-items: center;
        gap: 48px;
    }

    .rh-front-rooms {
        gap: 40px;
    }

    .rh-filter {
        flex-direction: column;
        align-items: flex-start;
    }

    .rh-filter-clear {
        align-self: flex-end;
    }

    .rh-front-rooms-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .rh-front-rooms-grid .rh-card {
        min-height: 560px;
        padding-top: 200px;
    }

    .rh-occasions {
        flex-direction: column;
    }

    .rh-occasion {
        flex-basis: auto;
        min-height: 0;
        padding: 56px 16px 32px;
    }

    .rh-front .rh-main > .rh-front-feature {
        padding: 80px var(--rh-gutter);
    }

    .rh-front-how-top {
        padding: 40px 16px;
    }

    .rh-steps {
        flex-direction: column;
        padding: 16px;
    }

    .rh-step {
        padding: 40px 16px;
        border-right: 0;
        border-bottom: 1px solid var(--rh-peach);
    }

    .rh-step:last-child {
        border-bottom: 0;
    }

    .rh-front-b2b-title {
        font-size: 48px;
        line-height: 56px;
    }

    .rh-offer {
        padding: 16px;
    }

    .rh-offer-img {
        flex-basis: 40%;
        width: 40%;
    }

    .rh-front-b2b-quotes {
        align-items: stretch;
    }

    .rh-front-b2b-quotes .rh-stars img {
        width: 20px;
        height: 20px;
    }

    .rh-video {
        height: 200px;
    }
}