/* Wondermaths — phone portrait heroes.
   One `max-width:739px` block, loaded after the page CSS, so the desktop
   layouts stay exactly as they are. The pages already carry the
   `<source media="(max-width:739px)">` art direction: on a phone the Old Oak is
   the 780x1170 portrait, on a wider screen the page keeps its landscape art.

   On a phone the portrait is the hero itself: the live copy (title, lead,
   buttons) paints on the sky of the same illustration, a flexible grid row
   keeps the whole tree visible underneath, and only the caption / worlds /
   longer paragraphs continue below the art. */

@media (max-width:739px){
  /* ---------- home / index: copy over the sky, portrait behind it ---------- */
  :root[data-portal-theme] body .world-home-hero.wrap{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    /* rows 1-4 hold the copy, row 5 is the flexible space that keeps the tree */
    grid-template-rows:auto auto auto auto 1fr;
    gap:0;
    width:100% !important;
    max-width:none !important;
    margin-inline:0 !important;
    padding:0 !important;
    overflow:hidden;
    background:#fff;
  }
  /* the copy column, the visual column and the figure dissolve, so every part
     becomes a grid item of the same hero */
  .world-home-hero .world-home-copy,
  .world-home-hero .world-home-visual,
  .world-home-hero .world-home-visual figure{display:contents}

  /* the live copy, painted on the sky (z-index 2) */
  .world-home-hero .eyebrow{
    grid-row:1;grid-column:1;position:relative;z-index:2;
    margin:0;padding:12px 20px 0;
    font-size:12px;letter-spacing:.06em;
  }
  .platform-home .world-home-hero h1{
    grid-row:2;grid-column:1;position:relative;z-index:2;
    margin:4px 0 0;padding:0 20px;
    font-size:clamp(30px,9.4vw,46px);
    line-height:1.0;letter-spacing:-1.2px;
  }
  .world-home-hero h1 br{display:block}
  .world-home-hero .world-home-lead{
    grid-row:3;grid-column:1;position:relative;z-index:2;
    margin:6px 0 0;padding:0 20px;
    font-size:15px;line-height:1.4;max-width:none;
  }
  .platform-home .world-home-hero .world-home-actions{
    grid-row:4;grid-column:1;position:relative;z-index:2;
    margin:8px 0 0;padding:0 20px 6px;gap:12px;
  }

  /* the portrait spans the copy rows plus the flexible one, so the whole tree
     (canopy and trunk) stays in view below the words */
  .world-home-hero .world-home-visual figure>a{
    grid-row:1/6;grid-column:1;z-index:1;display:block;
  }
  .world-home-hero .world-home-visual figure>a picture{display:block}
  .world-home-hero .world-home-visual figure img{
    display:block;width:100%;height:auto;
    aspect-ratio:780/1170;
    object-fit:cover;object-position:50% 0;
    border-radius:0;
  }

  /* caption, worlds and the longer copy carry on below the scene */
  .world-home-hero .world-home-visual figcaption{
    grid-row:6;grid-column:1;position:relative;z-index:2;
    padding:12px 20px;font-size:12px;background:#fff;
  }
  .world-home-hero .world-home-places{
    grid-row:7;grid-column:1;position:relative;z-index:2;
    margin:0;padding:4px 20px 16px;background:#fff;
  }
  .world-home-hero .world-home-places a{font-size:11px}
  .world-home-hero .world-home-description{
    grid-row:8;grid-column:1;
    margin:0;padding:8px 20px 0;background:#fff;
    font-size:16px;line-height:1.65;max-width:none;
  }
  .world-home-hero .world-home-guidance{
    grid-row:9;grid-column:1;
    margin:20px 0 0;padding:0 20px 0 38px;background:#fff;max-width:none;
  }
  .world-home-hero .world-home-guidance .world-home-guidance-title{font-size:20px}
  .platform-home .world-home-hero .world-home-free{
    grid-row:10;grid-column:1;
    margin:0;padding:16px 20px 28px;background:#fff;
    font-size:13px;line-height:1.6;
  }

  /* ---------- the Old Oak: the same portrait, live copy on its sky ---------- */
  :root[data-portal-theme] body .oak-arrival,
  .oak-arrival{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    /* rows 1-5 copy, row 6 flexible tree space, row 7 long copy, row 8 paths */
    grid-template-rows:auto auto auto auto auto 1fr auto auto;
    height:auto;min-height:0;max-height:none;
    padding:0;
    overflow:hidden;
    background:#fff;
  }
  /* the scene spans the copy rows plus the flexible one, then stops */
  .oak-arrival .oak-arrival-scene{
    grid-row:1/7;grid-column:1;z-index:1;
    position:relative;align-self:stretch;
    height:auto;overflow:hidden;background:#71C1F4;
  }
  .oak-arrival .oak-arrival-scene img{
    display:block;width:100%;height:auto;
    aspect-ratio:780/1170;
    object-fit:cover;object-position:50% 0;
  }
  /* the sky tone only: a light scrim over the sky band (the tree starts at
     about 42% of the portrait) so the words stay legible on the clouds */
  .oak-arrival::before{
    content:"";position:absolute;left:0;right:0;top:0;height:63vw;
    z-index:2;pointer-events:none;
    background:linear-gradient(180deg,
      rgba(113,193,244,.34) 0,rgba(113,193,244,.16) 55%,rgba(113,193,244,0) 100%);
  }
  /* the note dissolves too, so its lines land on the sky (rows 1-5) and the
     long paragraph lands under the art (row 7) */
  :root[data-portal-theme] body .oak-arrival .oak-arrival-note,
  .oak-arrival .oak-arrival-note{
    display:contents;
    background:transparent !important;border-radius:0;box-shadow:none;text-align:left;
  }
  .oak-arrival-note .eyebrow{
    grid-row:1;grid-column:1;position:relative;z-index:3;
    margin:0;padding:16px 20px 0;font-size:12px;
  }
  .oak-storybook .oak-arrival .oak-arrival-note h1{
    grid-row:2;grid-column:1;position:relative;z-index:3;
    font-size:clamp(32px,10vw,46px);
    line-height:.98;letter-spacing:-.03em;
    margin:6px 0 0;padding:0 20px;
  }
  .oak-arrival-note h1 br{display:none}
  .oak-arrival-note .oak-invitation{
    grid-row:3;grid-column:1;position:relative;z-index:3;
    font-size:18px;line-height:1.3;margin:8px 0 0;padding:0 20px;
  }
  .oak-arrival-note .oak-invitation br{display:none}
  .oak-arrival .oak-arrival-action{
    grid-row:4;grid-column:1;position:relative;z-index:3;
    margin:12px 20px 0;max-width:none;min-height:48px;
  }
  .oak-arrival .oak-arrival-parent{
    grid-row:5;grid-column:1;position:relative;z-index:3;
    margin:0;padding:10px 20px 16px;font-size:13px;
  }
  /* the long paragraph moves under the art — every word kept */
  .oak-arrival-note>p:not(.oak-invitation):not(.eyebrow){
    grid-row:7;grid-column:1;position:relative;z-index:3;
    margin:0;padding:14px 20px 0;max-width:none;background:#fff;
    font-size:16px;line-height:1.6;
  }
  .oak-arrival .oak-path-invitation{
    grid-row:8;grid-column:1;position:static;
    width:fit-content;max-width:92%;margin:12px auto 18px;
    justify-content:center;gap:12px;
    background:none;--brand-ink:#071225;
    text-decoration:underline;
    padding:10px;font-size:14px;
  }
}