/* ============================================================
   ImageBand: the photo-and-panel band (Figma 1498:24794, mobile
   1586:64812; the vacancy's "Ready To Apply?" 1727:23591). The page
   template's section carries the padding (none).
   ============================================================ */
/* Full width: the photo, the panel's blue and the logo row run to the screen edges; the text and button stay
   inside the frame's 1440 column. --image-band-edge is the space either side of that column (0 below 1440),
   and the photo column takes it up on the left, the panel's right padding on the right. */
.image-band { container-type: inline-size; }
.image-band__inner {
    --image-band-edge: calc((100cqw - min(100cqw, var(--layout-max-w))) / 2);
    display: grid;
    grid-template-columns:
        minmax(0, calc(var(--image-band-edge) + min(100cqw, var(--layout-max-w)) * 663 / 1440))
        minmax(0, 1fr);
    align-items: stretch;
}
.image-band__media { position: relative; overflow: hidden; }   /* the photo fills the row; it never sets its height */
.image-band__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.image-band__panel {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
    padding: 78px calc(var(--space-gutter) + var(--image-band-edge)) 78px 48px;   /* the text ends where the neighbouring sections' content does (the frame's 80 ran 38 past it) */
    background: var(--gradient-secondary);   /* "Secondary Gradient" */
    color: var(--color-text-inverse);
}
.image-band__inner:not(:has(.image-band__media)) { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1025px) {
    .image-band__inner:not(:has(.image-band__media)) .image-band__panel { padding-left: calc(48px + var(--image-band-edge)); }
}
.image-band__mark {   /* the frame's arrow: a square rotated -38.24deg, centred at left x top (a % of the panel, then px) */
    position: absolute;
    left: 80%;
    top: 165px;
    width: 800px;
    height: 800px;
    transform: translate(-50%, -50%) rotate(-38.24deg);
    color: var(--color-surface-tint);
    opacity: 0.2;
    pointer-events: none;
}

.image-band__text {   /* the heading and its line: 12 apart (the frames), 24 above the button */
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.image-band__text,
.image-band__cta { position: relative; }
/* The "Trusted by" row (1498:24775): starts at the panel's padding, runs off its right edge; 79 under the button
   (the 24 gap and 55 more), 78 above the panel's foot */
.image-band__logos {
    position: relative;
    align-self: stretch;
    margin: 55px calc(-1 * (var(--space-gutter) + var(--image-band-edge))) 0 0;   /* out to the panel's right edge */
    min-width: 0;
}
.image-band__heading {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
    color: var(--color-text-inverse);
    text-transform: capitalize;
}
.image-band__body {
    margin: 0;
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    line-height: var(--leading-body);
}

/* ── Tablet and mobile ────────────────────────────────────── */
@media (max-width: 1024px) {
    .image-band__inner { grid-template-columns: minmax(0, 1fr); }
    .image-band__media { aspect-ratio: 16/9; }
    .image-band__panel { gap: 16px; padding: 48px var(--space-gutter); }
    /* The row runs the panel's full width, no padding either side (Alex, 19 Oct); 32 under the button, 48 above the foot (mobile 1586:64812) */
    .image-band__logos { margin: 16px calc(-1 * var(--space-gutter)) 0; }
    /* On the band with the logo row the big arrow is left out */
    .image-band__panel--logos .image-band__mark { display: none; }
    .image-band__mark {   /* mobile 1727:23660: 478 square, centred at 71.4% across and 63 down */
        left: 71.4%;
        top: 63px;
        width: 478px;
        height: 478px;
    }
    .image-band__heading {
        font-size: var(--text-mobile-h2);
        line-height: var(--leading-mobile-h2);
    }
}