/* ==========================================================================
   Yummy Dino Buddies x PAW Patrol — campaign landing page
   Scoped entirely under .pp-page so nothing here can leak into the theme.
   Loaded after main.css (see app/custom.php) so these rules win.
   ========================================================================== */

@font-face {
  font-family: 'Canoodle';
  src: url('fonts/canoodle-regular.woff2') format('woff2'),
       url('fonts/canoodle-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.pp-page {
  /* Colours sampled from the Figma comp */
  --pp-orange:       #F14619;
  --pp-orange-warm:  #ED6E2D;
  --pp-orange-solid: #FF6400;   /* matches the Wyng iframe's own bg (rgb(255,100,0)), not the Figma sample */
  --pp-teal:        #005A5A;
  --pp-cream:       #FFFFE1;
  --pp-green:       #509B00;
  --pp-green-dark:  #3F7B00;
  --pp-slate:       #2F535A;
  --pp-white:       #FFF;
  --pp-ink:         #1A1A1A;

  --pp-head: 'Canoodle', 'DK Canoodle', Arial, sans-serif;
  --pp-body: 'Roboto', Arial, Helvetica, sans-serif;

  --pp-max: 1802px;   /* design content spans x=59..1861 within 1920 */
  --pp-pad: clamp(20px, 3.07vw, 59px);

  font-family: var(--pp-body);
  color: var(--pp-ink);
  overflow-x: clip;
}

/*
 * Don't inherit this from UIkit — if main.css ever fails to load, or its
 * global reset changes, every width calculation below would silently shift.
 */
.pp-page,
.pp-page *,
.pp-page *::before,
.pp-page *::after { box-sizing: border-box; }

/* Reset a few UIkit base styles inside our scope only */
.pp-page :where(h1, h2, h3, p, ul, figure) { margin: 0; }
.pp-page :where(img, picture, video) { display: block; max-width: 100%; }
.pp-page img { height: auto; }

.pp-container {
  max-width: var(--pp-max);
  margin-inline: auto;
  padding-inline: var(--pp-pad);
}

.pp-page h1, .pp-page h2, .pp-page h3 {
  font-family: var(--pp-head);
  font-weight: 400;
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: 0;
}

.pp-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

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

.pp-hero {
  position: relative;
  isolation: isolate;
  background-color: #4C7A3F;
  background-image: url('img/hero-bg.webp');
  background-size: cover;
  background-position: center top;
  overflow: hidden;
}

.pp-hero__inner {
  position: relative;
  z-index: 1;
  /* Text occupies the left ~52% at desktop; the cast is positioned separately. */
  max-width: var(--pp-max);
  margin-inline: auto;
  padding: clamp(24px, 2.6vw, 50px) var(--pp-pad) clamp(40px, 5vw, 96px);
  /*
   * The comp's hero block runs y=0..1243, but its top 163px is the site
   * header, which layouts.app renders above us. So our hero is 1080px at
   * the 1920 comp width, not 1243.
   */
  min-height: clamp(420px, 56.25vw, 1080px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pp-hero__intro { max-width: min(937px, 52%); }

.pp-hero__logo {
  width: clamp(150px, 22.4vw, 431px);
  margin-bottom: clamp(12px, 2.2vw, 40px);
}

.pp-hero__title {
  color: var(--pp-white);
  font-size: clamp(38px, 4.4vw, 84px);
  text-shadow: 0 4px 10px rgba(0, 0, 0, .35);
  /* 881px at the 1920 comp width — Canoodle is wide, so a ch cap wraps badly */
  max-width: min(881px, 100%);
}

.pp-hero__copy {
  color: var(--pp-white);
  font-size: clamp(14px, 1.04vw, 20px);
  line-height: 1.55;
  max-width: min(660px, 100%);
  margin-top: clamp(14px, 1.6vw, 30px);
  text-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}

/*
 * Character group. Positioned rather than laid out in flow because it
 * overlaps the hero's full height. max-width must be unset explicitly —
 * the base `img { max-width: 100% }` above would otherwise cap it.
 *
 * Sized/positioned against the actual shipped asset (hero-characters.webp,
 * 1071x1091 — see static/README.md), not the original 1920-comp math above,
 * which was calibrated for a differently-cropped image and was clipping
 * ~295px off the bottom and ~355px off the right at typical desktop widths.
 */
.pp-hero__cast {
  position: absolute;
  top: 0.26vw;
  /*
   * Flush right, not a few vw in — the asset's right edge is a hard cut
   * (no transparent fade, confirmed against the source PNG), so any gap
   * here exposes it as a visible seam against the jungle background
   * instead of reading as the image bleeding off the section.
   */
  right: 0;
  /* Capped in px too — past ~1920px the hero's height growth flattens out
     (its own content hits its own clamp() maximums) while an uncapped vw
     width keeps growing, which reintroduces clipping at very wide viewports. */
  width: min(54vw, 1037px);
  max-width: none;
  pointer-events: none;
  z-index: 0;
}

/* -------------------------------------------- Sweepstakes introduction --- */

.pp-sweeps {
  background-color: var(--pp-orange-warm);
  background-image: url('img/bg-orange.webp');
  background-size: cover;
  background-position: center;
  color: var(--pp-white);
}

.pp-sweeps__intro {
  display: grid;
  grid-template-columns: minmax(0, 24fr) minmax(0, 76fr);
  align-items: center;
  gap: clamp(20px, 3vw, 60px);
  padding-block: clamp(32px, 3.5vw, 68px);
}

.pp-sweeps__pack { width: 100%; max-width: 422px; }

.pp-sweeps__title {
  color: var(--pp-white);
  font-size: clamp(34px, 4.9vw, 94px);
  max-width: 14ch;
}

.pp-sweeps__copy {
  font-size: clamp(14px, 1.04vw, 20px);
  line-height: 1.55;
  margin-top: clamp(12px, 1.2vw, 22px);
  max-width: 78ch;
}

/* --------------------------------------------------- Sweepstakes form --- */

.pp-form-band {
  background-color: var(--pp-orange-solid);
}

.pp-form {
  padding-block: clamp(34px, 4vw, 76px);
  text-align: center;
  color: var(--pp-white);
}

.pp-form__title {
  color: var(--pp-white);
  font-size: clamp(28px, 3vw, 58px);
}

.pp-form__meta {
  font-size: clamp(13px, .94vw, 18px);
  line-height: 1.6;
  margin-top: clamp(10px, 1vw, 20px);
}

.pp-form__meta a {
  color: var(--pp-white);
  text-decoration: underline;
  text-underline-offset: .22em;
  text-decoration-thickness: 2px;
}

.pp-form__meta a:hover,
.pp-form__meta a:focus-visible { text-decoration-thickness: 3px; }

.pp-embed { margin-top: clamp(20px, 2.4vw, 46px); }

/* ----------------------------------------------------------- Match game --- */

.pp-match {
  background-color: var(--pp-teal);
  background-image: url('img/bg-teal.webp');
  background-size: cover;
  background-position: center;
  color: var(--pp-white);
  padding-block: clamp(40px, 5vw, 96px);
  text-align: center;
}

.pp-match__title {
  color: var(--pp-white);
  font-size: clamp(38px, 5vw, 96px);
}

.pp-match__copy {
  font-size: clamp(14px, 1.04vw, 20px);
  margin-top: clamp(10px, 1.1vw, 22px);
}

.pp-match .pp-embed { max-width: 1043px; margin-inline: auto; }

/* ------------------------------------------------------ Mealtime ideas --- */

.pp-meals {
  position: relative;
  background-color: var(--pp-cream);
  padding-block: clamp(40px, 5vw, 100px);
}

.pp-meals__title {
  color: var(--pp-teal);
  font-size: clamp(38px, 5vw, 96px);
  text-align: center;
  margin-bottom: clamp(28px, 3vw, 58px);
}

/*
 * Peeking pups (left) and dinos (right) flanking the header. Base position
 * comes from the 1920 comp — the pups match it exactly (x=466/y=4084
 * within the meals section, which starts at y=4050); the comp only has
 * one of these (the pups), so the right side mirrors it rather than
 * tracing a real coordinate. Both are pushed further out from the header
 * than that base position so they read as flanking it, not crowding it.
 * Plain vw units, no separate tablet override: 768/1920 = 0.4, which is
 * exactly the comp's own tablet scale for this element, so it tracks
 * automatically down to the mobile breakpoint, where both are hidden
 * instead (no comp equivalent).
 */
.pp-meals__deco {
  position: absolute;
  pointer-events: none;
}

.pp-meals__deco--left {
  top: 1.77vw;
  left: 16vw;
  width: min(10.625vw, 204px);
}

.pp-meals__deco--right {
  top: 4vw;
  right: 15vw;
  width: min(11.35vw, 218px);
}

.pp-meals__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 1.8vw, 34px);
}

.pp-meal { display: flex; flex-direction: column; }

.pp-meal__img {
  width: 100%;
  aspect-ratio: 577 / 559;
  object-fit: cover;
  border-radius: 6px;
}

.pp-meal__name {
  color: var(--pp-teal);
  font-size: clamp(24px, 2.6vw, 50px);
  margin-top: clamp(12px, 1.2vw, 24px);
  max-width: 14ch;
}

.pp-meal__cta { margin-top: auto; padding-top: clamp(14px, 1.4vw, 26px); }

.pp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(140px, 12.7vw, 243px);
  min-height: clamp(46px, 4.06vw, 78px);
  padding: .4em 1.6em;
  background: var(--pp-green);
  color: var(--pp-white);
  font-family: var(--pp-body);
  font-weight: 700;
  font-size: clamp(15px, 1.46vw, 28px);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  border-radius: 4px;
  transition: background-color .18s ease, transform .18s ease;
}

.pp-btn:hover,
.pp-btn:focus-visible {
  background: var(--pp-green-dark);
  color: var(--pp-white);
  transform: translateY(-2px);
}

/* ------------------------------------------------------- Social videos --- */

.pp-socials {
  background-color: var(--pp-orange);
  background-image: url('img/bg-orange.webp');
  background-size: cover;
  background-position: center;
  padding-block: clamp(40px, 5vw, 96px);
}

.pp-socials__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.6vw, 50px);
  align-items: start;
}

/* Cards 2 and 4 sit lower than 1 and 3 in the comp (a 131px stagger at 1920) */
.pp-social:nth-child(even) { margin-top: clamp(0px, 6.8vw, 131px); }

.pp-social__frame {
  position: relative;
  aspect-ratio: 9 / 16;
  background: rgba(0, 0, 0, .18);
  border-radius: 8px;
  overflow: hidden;
}

.pp-social__frame video,
.pp-social__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pp-social__label {
  color: var(--pp-white);
  font-family: var(--pp-body);
  font-weight: 700;
  font-size: clamp(13px, 1.15vw, 22px);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-top: clamp(10px, 1vw, 20px);
}

/* --------------------------------------------------- Full-bleed looping --- */

.pp-loop {
  position: relative;
  background: #1F3D2B;
  /* Matches the source video's encoded size (1440x720) at every breakpoint —
     any other ratio makes object-fit: cover crop into the off-centre dino. */
  aspect-ratio: 2 / 1;
  overflow: hidden;
}

.pp-loop video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------- Legal band --- */

.pp-legal {
  background: var(--pp-slate);
  color: var(--pp-white);
  padding-block: clamp(22px, 2.2vw, 42px);
}

.pp-legal__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(18px, 2.5vw, 48px);
  flex-wrap: wrap;
}

.pp-legal__text {
  font-size: clamp(11px, .73vw, 14px);
  line-height: 1.5;
  max-width: 60ch;
  opacity: .95;
}

.pp-legal__logos {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.9vw, 36px);
  margin-left: auto;
}

.pp-legal__logos img { width: auto; }
.pp-legal__logos .is-spinmaster { height: clamp(46px, 4.6vw, 89px); }
.pp-legal__logos .is-paramount  { height: clamp(44px, 4.4vw, 85px); }
.pp-legal__logos .is-nick       { height: clamp(58px, 7.3vw, 140px); }

/* ---------------------------------------------- Embed container (iframe) --- */
/*
 * Height is driven by the embedded app via postMessage (see paw-patrol.js).
 * Until the first message arrives we hold --pp-embed-fallback so the page
 * does not shift. Works for whichever sweepstakes form ships.
 */
.pp-embed__box {
  position: relative;
  width: 100%;
  height: var(--pp-embed-fallback, 760px);
  transition: height .25s ease;
}

.pp-embed__box iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  overflow: hidden; /* belt-and-suspenders alongside scrolling="no" in paw-patrol.js */
}

/*
 * Per-section fallbacks. The match game is a card grid that scales
 * proportionally, so it gets an aspect ratio. The form doesn't — Wyng's
 * embed never posts a resize message (confirmed: listened across a full
 * render, nothing arrives), so paw-patrol.js's auto-sizer never overrides
 * this and the fixed height below is the real, permanent height rather
 * than a fallback. Re-measure if Wyng changes the form's fields.
 */
.pp-form .pp-embed__box,
.pp-form .pp-embed__placeholder { --pp-embed-fallback: 530px; }

.pp-match .pp-embed__box,
.pp-match .pp-embed__placeholder {
  height: auto;
  aspect-ratio: 1043 / 898;
}

/* Shown when no embed URL has been configured yet */
.pp-embed__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .6em;
  height: var(--pp-embed-fallback, 760px);
  border: 3px dashed rgba(255, 255, 255, .55);
  border-radius: 10px;
  color: var(--pp-white);
  font-family: var(--pp-body);
  font-size: clamp(13px, 1vw, 18px);
  text-align: center;
  padding: 2em;
}

.pp-embed__placeholder strong {
  font-family: var(--pp-head);
  font-size: 1.6em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------ Tablet --- */

@media (max-width: 960px) {
  /* Below 960 the cast returns to normal flow, centred under the copy */
  .pp-hero__inner {
    min-height: 0;
    padding-bottom: 0;
  }

  .pp-hero__intro { max-width: none; }

  .pp-hero__cast {
    position: static;
    width: min(118%, 640px);
    margin: clamp(10px, 2vw, 24px) auto 0;
    display: block;
  }

  /* Let the headline wrap naturally once the column is full width */
  .pp-hero__title br { display: none; }
  .pp-hero__title { max-width: none; }
  .pp-hero__copy  { max-width: none; }

  .pp-sweeps__intro {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .pp-sweeps__title { max-width: none; }
  .pp-sweeps__pack  { max-width: 260px; }

  /*
   * The 768 comp keeps the desktop grids rather than reflowing — its three
   * Explore buttons sit at x=23.6 / 268.4 / 513.2, and the four videos stay
   * in one staggered row. So meals stay 3-up and socials 4-up down to 640.
   */
  .pp-meal__name { max-width: none; }

  .pp-legal__inner { justify-content: center; text-align: center; }
  .pp-legal__logos { margin-inline: auto; }
}

/* ------------------------------------------------------------ Mobile --- */

@media (max-width: 640px) {
  /*
   * The 393px comp drops the cast image entirely and centres everything
   * else in the hero (logo, headline, copy) — confirmed against the Figma
   * mobile artboard, which has no character-cast layer at all.
   */
  .pp-hero__cast { display: none; }

  .pp-hero__intro { text-align: center; }
  .pp-hero__logo  { margin-inline: auto; }

  .pp-meals__deco   { display: none; }
  .pp-meals__grid   { grid-template-columns: 1fr; }
  .pp-socials__grid { grid-template-columns: 1fr; }
  .pp-social:nth-child(even) { margin-top: 0; }

  /* Recipe photos crop to a landscape band on mobile, per the 393px comp */
  .pp-meal__img { aspect-ratio: 368 / 214; }

  .pp-meal { text-align: center; align-items: center; }
  .pp-meal__name { text-align: center; }

  .pp-form .pp-embed__box,
  .pp-form .pp-embed__placeholder { --pp-embed-fallback: 766px; }

  .pp-match .pp-embed__box,
  .pp-match .pp-embed__placeholder { aspect-ratio: 3 / 4; }
}

/* ------------------------------------------------------- Preferences --- */

@media (prefers-reduced-motion: reduce) {
  .pp-page *,
  .pp-page *::before,
  .pp-page *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}