/* =========================================================
   Ebenezer x Ferrero Rocher microsite
   Visual design per "Ferrero x Ebenezer Morrisons Christmas Microsite" PDF.
   Breakpoint: <768px = mobile (single stacked page), >=768px = desktop (one view at a time)

   Fonts
   - Body: Museo Sans 300/500/700 (drop woff2 files in assets/fonts/, see @font-face)
   - Display: Playfair Display 900 (stand-in for the bold didone used in the PDF headings)
   - Film title: assets/image/ebenezer-logo.png (<img class="film-title">)
   ========================================================= */

@font-face { font-family: "Museo Sans"; font-weight: 300; font-display: swap;
    src: local("Museo Sans 300"), local("MuseoSans-300"), url("../fonts/MuseoSans-300.woff2") format("woff2"); }
@font-face { font-family: "Museo Sans"; font-weight: 500; font-display: swap;
    src: local("Museo Sans 500"), local("MuseoSans-500"), url("../fonts/MuseoSans-500.woff2") format("woff2"); }
@font-face { font-family: "Museo Sans"; font-weight: 700; font-display: swap;
    src: local("Museo Sans 700"), local("MuseoSans-700"), url("../fonts/MuseoSans-700.woff2") format("woff2"); }

:root {
    --gold: #bda552;
    --brown: #461d13;
    --brown-dark: #34130c;
    --white: #fff;
    --font-body: "Museo Sans", "Nunito Sans", system-ui, sans-serif;
    --font-display: "Playfair Display", "Abril Fatface", Georgia, "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--gold) url('../image/snow-bg.jpg') center top / 600px auto repeat;
    color: var(--brown);
    font-family: var(--font-body);
    font-weight: 500;
    text-align: center;
}
img, iframe { max-width: 100%; }

/* ---------- Header / logo (mobile only) ---------- */
.site-header { background: var(--white); padding: 6px 8px; }
.logo { width: 44px; height: 44px; margin: 0 auto; }
.logo-ferrero { background: url('../image/ferrero-logo.png') center / contain no-repeat; }

/* ---------- Shared pieces ---------- */
.view { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ornament {
    width: 100%;
    max-width: 574px;
    aspect-ratio: 574 / 55;
    margin: 10px auto;
    background: no-repeat center / contain;
}
.ornament-top    { background-image: url(../image/box-top.png); }
.ornament-bottom { background-image: url(../image/box-bottom.png); }

.view-title, .hero-title { margin: 0; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; line-height: 1; }
.hero-title span { display: block; }

.btn {
    display: inline-block; padding: 13px 24px; border: 0; border-radius: 8px; cursor: pointer;
    text-decoration: none; font: 700 14px/1.2 var(--font-body); text-transform: none; text-align: center;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .35);
    transition: transform .15s ease, filter .15s ease;
}
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-primary   { background: linear-gradient(90deg, #52231a 0%, var(--brown-dark) 100%); color: var(--white); }
.btn-secondary { background: linear-gradient(90deg, #fff 45%, #c4dcef 100%); color: var(--brown); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin: 16px auto; }
.btn-row .btn { flex: 1 1 200px; max-width: 380px; }
.back-link { display: inline-block; margin: 4px 0 8px; color: inherit; font-weight: 700; font-size: 13px; }

.video-box { position: relative; width: 100%; max-width: 640px; aspect-ratio: 16 / 9; margin: 14px auto; background: var(--white); }
.video-box iframe, .video-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.terms { font-size: 9px; line-height: 1.35; font-weight: 500; text-align: left; max-width: 820px; margin: 16px auto; padding: 0 8px; }
.terms-title { font-size: 9px; font-weight: 700; text-transform: uppercase; margin: 0 0 4px; }
.terms p { margin: 0 0 4px; }

/* ---------- Form ---------- */
.entry-form { background: var(--white); border-radius: 18px; padding: 22px 26px 26px; margin: 12px auto; text-align: left; }
.form-intro { text-align: center; margin: 0 0 14px; font-size: 18px; font-weight: 300; text-transform: uppercase; }
.form-intro strong { font-weight: 700; }
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.label-row { display: flex; justify-content: space-between; align-items: baseline; }
.label-row label { margin-bottom: 4px; }
.field-hint { font-size: 13px; font-weight: 700; }
.field input[type=text], .field input[type=email], .field input[type=tel] {
    width: 100%; padding: 12px 16px; border: 5px solid var(--gold); border-radius: 14px;
    font: 500 14px var(--font-body); color: var(--brown); background: var(--white);
}
.field input::placeholder { color: #8c8c8c; opacity: 1; text-transform: none; }
.field input:focus-visible, .btn:focus-visible, a:focus-visible, input[type=checkbox]:focus-visible { outline: 3px solid var(--brown); outline-offset: 2px; }

.field.check label { display: flex; gap: 12px; align-items: center; font-size: 13px; margin: 0; cursor: pointer; }
.field.check input[type=checkbox] {
    appearance: none; -webkit-appearance: none; flex: 0 0 auto;
    width: 32px; height: 32px; margin: 0;
    border: 5px solid var(--gold); border-radius: 10px; background: var(--white) center / 70% no-repeat;
}
.field.check input[type=checkbox]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23461d13' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
}
.error { margin: 4px 0 0; min-height: 0; color: #b00020; font-size: 12px; font-weight: 700; }
.error:empty { display: none; }
.field.has-error input[type=text], .field.has-error input[type=email], .field.has-error input[type=tel] { border-color: #b00020; }
.entry-form .btn { width: 100%; padding: 16px 24px; font-size: 15px; }
.entry-form hr { border: 0; border-top: 4px solid var(--brown); margin: 16px 0; }

.view-inner, .hero-inner { padding: 16px; }

/* ---------- Hero typography ---------- */
.hero-visual {
    background: url('../image/pyramid.png') center bottom / contain no-repeat;
}
.hero-message { font-weight: 500; text-transform: uppercase; }
.prelaunch-message { margin: 8px auto 12px; max-width: 14em; line-height: 1.15; }
.launch-date { display: block; white-space: nowrap; font-family: var(--font-display); font-weight: 900; margin: 2px 0; }

/* Film title logo (image) */
.film-title { display: block; height: auto; margin-left: auto; margin-right: auto; }

/* ---------- MOBILE (<768px): one stacked page ---------- */
@media (max-width: 767px) {
    .d-only { display: none !important; }

    .view-hero { display: block; }
    .view-trailer { display: none !important; }

    body[data-state="live"] .view-form { display: block; }
    body[data-state="live"][data-view="thanks"] .view-form { display: none; }
    body[data-state="live"][data-view="thanks"] .view-thanks { display: block; }

    .hero-inner { padding: 4px 0 0; }
    .hero-copy { padding: 0 16px; max-width: 420px; margin: 0 auto; position: relative; z-index: 1; }
    .hero-copy .ornament { max-width: 300px; margin: 8px auto; }

    .hero-title .win        { font-size: 17vw; line-height: .95; }
    .hero-title .prize-line { font-size: 5vw; line-height: 1.05; }
    .hero-title .prize-line.win { font-size: 17vw; }
    .hero-title .film-title { width: 74vw; max-width: 320px; margin-top: 4px; margin-bottom: 4px; }
    .hero-title .prize-line:nth-of-type(3) { font-size: 3.6vw; margin-top: 4px; }   /* SEE */
    .hero-title .prize-line:nth-last-of-type(2) { font-size: 3.4vw; }              /* ONLY IN CINEMAS */
    .hero-title .prize-line:last-of-type { font-size: 3.6vw; margin-top: 8px; }     /* PLUS MORE PRIZES */

    .hero-visual {
        aspect-ratio: 780 / 844; margin: -90px 0 -34px; position: relative; z-index: 0;
        background: url('../image/m-bg.png') center bottom / 100% auto no-repeat;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
        mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
    }

    .hero-message { padding: 14px 24px 0; font-size: 15px; line-height: 1.25; font-weight: 300; }
    .hero-message p { margin: 0; }
    .prelaunch-message { font-size: 15px; max-width: 12em; }
    .hero-message { position: relative; z-index: 1; }
    .launch-date { font-size: 24px; }
    .m-trailer { padding: 0 24px; }
    .m-trailer .video-box { width: 82%; }

    .view-inner { padding: 18px 20px 28px; }
    .view-title { font-size: 6.2vw; line-height: 1.12; }
    .view-form .view-inner { max-width: 480px; margin: 0 auto; }
    .entry-form { padding: 16px 16px 20px; border-radius: 14px; }
    .form-intro { font-size: 14px; }
    .field label, .field.check label { font-size: 11px; }
    .field input[type=text], .field input[type=email], .field input[type=tel] { padding: 9px 12px; border-width: 4px; border-radius: 11px; font-size: 12px; }
    .field.check input[type=checkbox] { width: 26px; height: 26px; border-width: 4px; border-radius: 8px; }
    .form-cols { display: block; }

    .view-thanks .view-title { margin-top: 0; }
    .view-thanks p { margin: 6px 0; font-size: 14px; line-height: 1.25; font-weight: 300; text-transform: uppercase; }
    .view-thanks .video-box { width: 80%; }
    .btn-row { flex-direction: column; align-items: center; }
    .btn-row .btn { width: 78%; flex: 0 0 auto; }
}

/* ---------- DESKTOP (>=768px): one view at a time ---------- */
@media (min-width: 768px) {
    .m-only { display: none !important; }

    body[data-view="hero"]    .view-hero,
    body[data-view="form"]    .view-form,
    body[data-view="thanks"]  .view-thanks,
    body[data-view="trailer"] .view-trailer { display: block; }

    body { background-size: 1200px auto; }
    body[data-view="hero"] { background: var(--gold) url('../image/d-bg.jpg') center / cover no-repeat; }

    .site-header { display: none; } /* desktop frames have no white logo bar */

    /* Hero: copy left (centred text), tree bleeding off bottom right */
    .hero-inner {
        position: relative; overflow: hidden; min-height: 100vh; padding: 40px 24px 40px clamp(24px, 18.5vw, 520px);
        display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    }
    .hero-copy, .hero-message { position: relative; z-index: 2; width: clamp(300px, 31vw, 560px); }
    .hero-copy .ornament, .hero-message .ornament { max-width: none; margin: 10px 0; }
    .hero-visual {
        position: absolute; z-index: 1; right: 3vw; bottom: 0;
        width: min(56vw, 125vh); aspect-ratio: 1159 / 925;
    }

    .hero-title .prize-line         { font-size: clamp(14px, 2vw, 34px); line-height: 1.02; }
    .hero-title .prize-line.win     { font-size: clamp(48px, 6.8vw, 120px); line-height: .9; }
    .hero-title .film-title         { width: 88%; margin-top: 6px; margin-bottom: 8px; }
    .hero-title .prize-line:nth-of-type(3)      { font-size: clamp(11px, 1.3vw, 22px); margin: 4px 0; }  /* SEE */
    .hero-title .prize-line:nth-last-of-type(2) { font-size: clamp(11px, 1.3vw, 22px); }                  /* ONLY IN CINEMAS */
    .hero-title .prize-line:last-of-type        { font-size: clamp(12px, 1.6vw, 28px); margin-top: 14px; }  /* PLUS MORE PRIZES */

    .hero-copy .btn, .hero-message .btn { width: 80%; margin: 14px 10% 4px; padding: 14px 24px; }
    .hero-message { font-size: clamp(13px, 1.5vw, 26px); }
    .launch-date { font-size: clamp(20px, 2.3vw, 40px); }

    .view-form, .view-thanks, .view-trailer { min-height: 100vh; }
    .view-form .view-inner, .view-thanks .view-inner, .view-trailer .view-inner {
        min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center;
        max-width: 1100px; margin: 0 auto; padding: 40px 24px;
    }
    .view-title { font-size: clamp(22px, 2.5vw, 44px); line-height: 1.08; }
    .view-inner > .ornament { width: min(36vw, 574px); }

    /* Form: fields left, consent + button right */
    .entry-form { width: min(58vw, 900px); min-width: 640px; }
    .form-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
    .form-col-consent { padding-top: 6px; display: flex; flex-direction: column; justify-content: space-between; }
    .form-col-consent .btn { margin-top: 12px; }

    .view-trailer .video-box { max-width: min(48vw, 780px); }
    .view-thanks .video-box { max-width: min(34vw, 540px); }
    .view-thanks .view-inner > p { margin: 8px 0 0; font-size: clamp(13px, 1.4vw, 24px); font-weight: 300; text-transform: uppercase; line-height: 1.2; }
    .btn-row { width: min(56vw, 840px); }
    .terms { width: min(56vw, 840px); max-width: none; }
}

/* ---------- Terms page (terms.php) ---------- */
.field.check label a, .terms-link a { color: inherit; font-weight: 700; text-decoration: underline; }
.terms-link { margin: 6px 0 4px; }
.page-terms .site-header { display: block; }   /* logo bar on every screen size here */
.terms-page { max-width: 820px; margin: 0 auto; padding: 24px 20px 56px; }
.terms-page .ornament { max-width: 420px; }
.terms-page .view-title { font-size: clamp(24px, 3vw, 40px); }
.terms-full { text-align: left; margin: 20px 0 28px; font-size: 15px; line-height: 1.6; font-weight: 500; }
.terms-full h2, .terms-full h3 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 1.1em; margin: 1.6em 0 .4em; }
.terms-full p, .terms-full ul, .terms-full ol { margin: 0 0 1em; }
.terms-full li { margin-bottom: .4em; }
.terms-full .copyright { margin-top: 2em; font-size: 12px; font-weight: 700; }
.terms-page .btn { padding: 14px 28px; }
.terms-full ol { padding-left: 1.8em; }
.terms-full a { color: inherit; font-weight: 700; word-break: break-word; }