/* ==========================================================================
   Block: cross-sell-banner — green panel: title left, body + black pill right (src/blocks/cross-sell-banner.html)
   Figma "Photography" 5041:2 (panel y6421) / "Videography" 5050:499 (panel y6928) at 1920:
     panel  x100, 1720 × 330, --accent, square corners
     title  86px in, 72px down; 506 box; 48px Blauer Nue Regular, 48px lines (2 lines = 96)
     body   863px in (x963), 82px down; 711 wide; 20px Europa, 25px lines
     pill   x963, 365 × 55, black, 26px green label 28px in, 30px arrow 23px from the right;
            its bottom 62px above the panel's bottom (the body-to-pill gap is whatever is left: 31 / 56)
   Columns inside the panel: 86 | 777 title column | 720 body column | 137 = 1720 (the body box is 711 in the
   Figma; the browser sets Europa a hair wider, so the column gets 9px of slack to keep the Figma's line breaks).
   Desktop sizes are the 1920 values scaled with the viewport (vw, capped at the Figma px).
   Spacing to the neighbours: Photography scroll-stack → panel 22 · panel → next eyebrow 160 (Photography) /
   179 (Videography) — split as 80 / 80 here; the lead's cross-block pass tunes it.
   ========================================================================== */

.block-cross-sell-banner {
  padding: min(4.1667vw, 80px) 0;
}

.block-cross-sell-banner__panel {
  display: grid;
  grid-template-columns: minmax(0, 777fr) minmax(0, 720fr);
  min-height: min(17.1875vw, 330px);
  padding: min(3.75vw, 72px) min(7.1354vw, 137px) min(3.2292vw, 62px) min(4.4792vw, 86px);
  background: var(--accent);
  color: var(--black);
}
/* Focus ring: the site's green ring would vanish on the green panel */
.block-cross-sell-banner__panel :focus-visible { outline-color: var(--black); }

.block-cross-sell-banner__title {
  align-self: start;
  max-width: 530px;                                  /* the Figma's 506 text box + 24 padding */
  padding-right: 24px;                               /* never touches the body column when the panel narrows */
  font-family: var(--font-display);
  font-weight: 400;                                  /* Blauer Nue Regular, sentence case */
  font-size: 48px;
  line-height: 1;                                    /* 2 lines = the Figma's 96px box */
}

.block-cross-sell-banner__side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;                    /* body at the top, pill on the panel's bottom padding */
  align-items: flex-start;
  gap: 31px;                                         /* at least the Photography gap */
  padding-top: min(0.5208vw, 10px);                  /* body 82 down vs the title's 72 */
}
.block-cross-sell-banner__body { max-width: 720px; }   /* Figma box 711; +9 so Europa wraps where the Figma does */
.block-cross-sell-banner__body p { font-size: var(--fs-body); line-height: 1.25; }   /* 25px lines */
.block-cross-sell-banner__body p + p { margin-top: 1.25em; }

/* Black pill, green label + arrow: the inverse of the site's green pills. Hover / focus: the green fill
   wipes in from the left (.btn--wipe), label and arrow turn black, a black ring keeps the pill's edge
   visible on the green panel. */
.block-cross-sell-banner__cta {
  --wipe-fill: var(--accent);
  --wipe-txt: var(--black);
  --wipe-edge-w: 2px;
  justify-content: space-between;
  gap: 13px;
  min-width: min(365px, 100%);
  height: 55px;
  padding: 0 23px 0 28px;
  background: var(--black);
  color: var(--accent);
  font-size: 26px;
}
.block-cross-sell-banner__cta:hover,
.block-cross-sell-banner__cta:focus-visible { --wipe-edge: var(--black); }
.block-cross-sell-banner__cta svg { flex: 0 0 auto; width: 30px; height: 15px; }

/* ---- Tablet: stacked (title → body → pill) ---------------------------- */
@media (max-width: 1024px) {
  .block-cross-sell-banner { padding: 56px 0; }
  .block-cross-sell-banner__panel {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
    min-height: 0;
    padding: 48px;
  }
  .block-cross-sell-banner__title { max-width: 560px; padding-right: 0; font-size: 44px; }
  .block-cross-sell-banner__side { gap: 32px; padding-top: 0; }
}

/* ---- Mobile (402, derived): 24px padding, 32px title, 18px body, full-width pill ------------------------ */
@media (max-width: 640px) {
  .block-cross-sell-banner { padding: 36px 0; }      /* 72 between blocks, split (Mobile Category rhythm) */
  .block-cross-sell-banner__panel { row-gap: 20px; padding: 32px 24px 24px; }
  .block-cross-sell-banner__title { font-size: 32px; line-height: 1.05; }
  .block-cross-sell-banner__side { gap: 28px; align-items: stretch; }
  .block-cross-sell-banner__body p { font-size: 18px; line-height: 1.3; }
  .block-cross-sell-banner__cta { width: 100%; height: 48px; padding: 0 20px 0 24px; font-size: 20px; }
}