/* Shared by Cockpit previews and published media/text nodes.
   Figma: tV61Dp31y8rvywT72CTRqa, sections 35:1907 and 35:3328.
   The player owns the logo, navigation and swipe controls. */
@font-face {
    font-family: "Helvetica Now Display";
    src: local("Helvetica Now Display Medium"), local("HelveticaNowDisplay-Medium");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Helvetica Now Display";
    src: local("Helvetica Now Display Bold"), local("HelveticaNowDisplay-Bold");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

.mtn, .mtn * {
    box-sizing: border-box;
}

.mtn {
    --mtn-content-width: 60.138889%; /* 866px in the 1440px reference */
    --mtn-side-inset: 12.222222%; /* 176px in the desktop reference */
    --mtn-top-inset: 15.222222svh; /* 137px at 900px */
    --mtn-bottom-inset: 16.444444svh; /* 148px at 900px */
    --mtn-middle-offset: 0px;
    --mtn-header-gap: 7px;
    --mtn-button-gap: 16px;
    --mtn-control-bg: #f0f0f0;
    --mtn-control-border: #999;
    --mtn-control-text: #333;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    background: var(--mtn-bg, #fff);
    color: var(--mtn-text, #333);
    font-family: "Helvetica Now Display", Helvetica, Arial, sans-serif;
}

.mtn-layout {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-content: safe center;
    min-height: 100%;
    padding-block: max(104px, env(safe-area-inset-top)) max(104px, env(safe-area-inset-bottom));
}

.mtn-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.mtn-media img,
.mtn-media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mtn-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-start;
    width: var(--mtn-content-width);
    min-width: 0;
    margin-inline: auto;
}

.mtn[data-halign="left"] .mtn-content {
    margin-inline: var(--mtn-side-inset) auto;
    text-align: left;
}

.mtn[data-halign="right"] .mtn-content {
    margin-inline: auto var(--mtn-side-inset);
    align-items: flex-end;
    text-align: right;
}

.mtn[data-halign="centre"] .mtn-content {
    align-items: center;
    text-align: center;
}

.mtn[data-valign="top"] .mtn-layout {
    justify-content: flex-start;
    padding-block-start: max(104px, var(--mtn-top-inset), env(safe-area-inset-top));
}

.mtn[data-valign="bottom"] .mtn-layout {
    justify-content: flex-end;
    justify-content: safe flex-end;
    padding-block-end: max(104px, var(--mtn-bottom-inset), env(safe-area-inset-bottom));
}

/* Figma centers each content combination independently. Offsets adjust the
   available space instead of translating text outside its scroll container. */
.mtn[data-valign="middle"] .mtn-layout {
    padding-block-start: max(calc(104px + 2 * var(--mtn-middle-offset)), env(safe-area-inset-top));
}

.mtn[data-content="header-subheader-button"] { --mtn-middle-offset: -1.5px; }
.mtn[data-content="header"] { --mtn-middle-offset: -1px; }
.mtn[data-content="header-button"] {
    --mtn-middle-offset: .5px;
    --mtn-button-gap: 17px;
}
.mtn[data-content="subheader-button"],
.mtn[data-content="button"] { --mtn-middle-offset: 2px; }

.mtn[data-has-media="true"] .mtn-header,
.mtn[data-has-media="true"] .mtn-subheader {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}

.mtn-header,
.mtn-subheader {
    width: 100%;
    margin: 0;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.mtn-header {
    font-size: 40px;
    font-weight: 700;
    line-height: 48px;
}

.mtn-subheader {
    font-size: 20px;
    font-weight: 500;
    line-height: 32px;
}

.mtn-header + .mtn-subheader { margin-block-start: var(--mtn-header-gap); }
.mtn-header + .mtn-button,
.mtn-subheader + .mtn-button { margin-block-start: var(--mtn-button-gap); }

.mtn-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-height: 40px;
    padding: 4px 12px;
    border: .5px solid var(--mtn-control-border);
    border-radius: 40px;
    background: var(--mtn-control-bg);
    color: var(--mtn-control-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    overflow-wrap: anywhere;
    white-space: normal;
    text-shadow: none;
}

.mtn-button[href] { cursor: pointer; }
.mtn-button[href]:hover { background: #e5e5e5; }
.mtn-button[href]:active { background: #d9d9d9; }
.mtn-button[href]:focus-visible,
.mtn-content a[href]:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

/* Desktop presentation modes: one asset, three stagings.
   Focus: the screen as a centred 9:16 column on a dark stage.
   Ambient: the same column over a blurred, enlarged, dimmed copy of the media.
   Canvas: the text on a centre panel between four crops of the media.
   Mobile keeps the full-screen layout; the stage is desktop-only. */
.mtn-stage {
    display: none;
}

@media (min-width: 901px) {
    .mtn[data-desktop-mode] {
        --mtn-node-width: min(100%, 100svh * 9 / 16);
        --mtn-content-width: calc(100% - 96px);
        --mtn-side-inset: 48px;
        background: #0a0a0a;
    }

    .mtn[data-desktop-mode="focus"] {
        background: radial-gradient(ellipse 60% 80% at 72% 45%, #1f1f1e, #0a0a0a 70%);
    }

    .mtn[data-desktop-mode] .mtn-layout {
        z-index: 1;
        width: var(--mtn-node-width);
        margin-inline: auto;
        background: var(--mtn-bg);
    }

    .mtn-stage {
        position: absolute;
        inset: 0;
        z-index: 0;
        display: block;
        overflow: hidden;
        pointer-events: none;
    }

    .mtn-tile {
        position: relative;
        overflow: hidden;
        background: var(--mtn-bg);
    }

    .mtn-tile img,
    .mtn-tile video {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .mtn-ambient .mtn-tile {
        position: absolute;
        inset: 0;
        filter: blur(24px) saturate(.9);
        transform: scale(1.12);
    }

    .mtn-ambient::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, .3);
    }

    .mtn-canvas {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 8px;
    }

    /* The third column stays free for the text panel. */
    .mtn-canvas .mtn-tile:nth-child(3) { grid-column: 4; }

    .mtn-canvas .mtn-tile img,
    .mtn-canvas .mtn-tile video {
        object-position: var(--mtn-crop-x) var(--mtn-crop-y);
        transform: scale(var(--mtn-crop-scale));
        transform-origin: var(--mtn-crop-x) var(--mtn-crop-y);
    }

    .mtn-tile[data-crop="full"] { --mtn-crop-scale: 1; --mtn-crop-x: 50%; --mtn-crop-y: 50%; }
    .mtn-tile[data-crop="low"] { --mtn-crop-scale: 1.9; --mtn-crop-x: 62%; --mtn-crop-y: 88%; }
    .mtn-tile[data-crop="high"] { --mtn-crop-scale: 2.1; --mtn-crop-x: 50%; --mtn-crop-y: 12%; }
    .mtn-tile[data-crop="low-alt"] { --mtn-crop-scale: 2.4; --mtn-crop-x: 72%; --mtn-crop-y: 94%; }

    .mtn[data-desktop-mode="canvas"] {
        --mtn-node-width: calc((100% - 32px) / 5);
        --mtn-content-width: calc(100% - 64px);
        --mtn-side-inset: 32px;
    }

    .mtn[data-desktop-mode="canvas"] .mtn-layout {
        background: var(--mtn-panel, var(--mtn-bg));
        color: var(--mtn-panel-text, var(--mtn-text));
    }

    .mtn[data-desktop-mode="canvas"] .mtn-media {
        display: none;
    }

    .mtn[data-desktop-mode="canvas"] .mtn-header {
        font-size: 32px;
        line-height: 40px;
    }

    .mtn[data-desktop-mode="canvas"] .mtn-subheader {
        font-size: 16px;
        line-height: 24px;
    }

    .mtn[data-desktop-mode="canvas"] .mtn-header,
    .mtn[data-desktop-mode="canvas"] .mtn-subheader {
        text-shadow: none;
    }
}

@media (max-width: 900px) {
    .mtn {
        --mtn-content-width: calc(100% - 32px);
        --mtn-side-inset: 16px;
        --mtn-top-inset: 15.047393svh; /* 127px at 844px */
        --mtn-bottom-inset: 13.744076svh; /* 116px at 844px */
        --mtn-header-gap: 18px;
        --mtn-button-gap: 19px;
    }

    .mtn[data-content="header-subheader-button"] { --mtn-middle-offset: -6.5px; }
    .mtn[data-content="header"],
    .mtn[data-content="subheader"] { --mtn-middle-offset: 1px; }
    .mtn[data-content="header-button"] { --mtn-middle-offset: 1.5px; }
    .mtn[data-content="subheader-button"] { --mtn-middle-offset: 2.5px; }

    .mtn-header {
        font-size: 24px;
        line-height: 32px;
    }

    .mtn-subheader {
        font-size: 14px;
        line-height: 20px;
    }

    .mtn-button {
        min-height: 32px;
        padding: 4px 8px;
        font-size: 12px;
        line-height: 18px;
    }
}

.mtn-eyebrow {
    width: 100%;
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    overflow-wrap: anywhere;
    white-space: pre-line;
}