/* Section 03 — "Inside the gate, a resort." rebuilt on the 1855 × 848 mockup (2026-09-30).
   Overrides gate7-1672.css on desktop; linked after it (and after gate-edge-decor.css).
   - Plate: gate5/plate-1855-v8.webp = the mockup with every word, the button, the card captions and the
     right-edge palm/wave removed (LaMa, feathered tiles). The palm + wave stay on the separate edge layer
     (.g5::after, gate-edge-decor.css) so they still bleed off the page.
   - Rails: the card row (mockup x 168 → 1680, 1512 px) spans the hero rails 170 → 1730, one uniform scale
     (--ux = --uy), so the photo and cards keep the mockup's proportions.
   - Top: the photo's watercolour edge (mockup y 35) starts at the section's 150px top padding.
   - Type: unchanged from gate7 = the exact faces, sizes and colours of "Coastal living" above it. */
@media (min-width:761px){
  .g5{--uy:var(--ux)}
  .g5__canvas{
    left:calc(var(--rail) - 168 * var(--ux));
    top:calc(-35 * var(--ux));
    width:calc(1855 * var(--ux));
    height:calc(848 * var(--ux));
  }
  /* the old plate's aqua wash sat behind the CTA; the new plate has none */
  .g5__canvas::before{content:none}
  /* soft paper edges, kept clear of the photo's watercolour edge (left 6%, top 4%) */
  .g5__canvas::after{
    background:
      linear-gradient(to right,var(--paper) 0,rgba(250,246,239,.8) 1%,rgba(250,246,239,0) 3.5%),
      linear-gradient(to left,var(--paper) 0,rgba(250,246,239,.8) 1%,rgba(250,246,239,0) 3.5%),
      linear-gradient(to bottom,var(--paper) 0,rgba(250,246,239,.6) .8%,rgba(250,246,239,0) 2.8%),
      linear-gradient(to top,var(--paper) 0,rgba(250,246,239,.9) 1.5%,rgba(250,246,239,0) 5%);
  }

  /* ---------- copy (mockup: title left 1197, kicker centred on 1437) ---------- */
  .g5__copy{
    left:calc(1197 * var(--ux));
    top:calc(var(--g8-copy-top, 110.5) * var(--ux));
    width:calc(480 * var(--ux));
  }
  .g5 h2{margin-top:calc(var(--g8-h2-gap, 21.5) * var(--s))}
  .g5 .g5__l{margin-top:calc(var(--g8-l-gap, 27.4) * var(--s));max-width:calc(470 * var(--ux))}
  .g5__cta{margin-top:calc(var(--g8-cta-gap, 23.5) * var(--s))}

  /* ---------- card captions, centred under each card (mockup centres 340.5 / 728.5 / 1116 / 1506) ---------- */
  .g5__ctext{top:calc(var(--g8-cap-top, 762) * var(--ux))}
  .g5__card--1 .g5__ctext{left:calc((340.5 - 180) * var(--ux))}
  .g5__card--2 .g5__ctext{left:calc((728.5 - 180) * var(--ux))}
  .g5__card--3 .g5__ctext{left:calc((1116 - 180) * var(--ux))}
  .g5__card--4 .g5__ctext{left:calc((1506 - 180) * var(--ux))}

  /* ---------- right-edge palm + aqua wave: its wave sits where the mockup's does (layer top = mockup y 315) ---------- */
  .g5::after{
    top:calc(150px + (315 - 35) * var(--ux));
    width:calc(552 * var(--ux));
    height:calc(248 * var(--ux));
  }
}

/* phones: the stacked layout crops the new photo out of the new plate, and card 4 shows the sites photo */
@media (max-width:760px){
  .g5__mphoto{
    background-image:url("../img/gate5/plate-1855-v8.webp?v=3");
    background-size:calc(1855 / var(--pw) * 100%) auto;
    background-position:calc(var(--px) / (1855 - var(--pw)) * 100%) calc(var(--py) / (848 - var(--ph)) * 100%);
  }
  .g5__card--4 .g5__photo{background-image:url("../img/sites-road-900.webp")}
}