/* =============================================================================
   Module: media-text  (modules/media-text.php)
   -----------------------------------------------------------------------------
   A picture running off one edge of the window, a column of text beside it.

   THE BLEED is the whole trick and it is one declaration. base/layout.css gives
   every .container a --container-bleed: the distance from its inner edge to the
   edge of the window. The picture takes that as a negative margin and reaches
   the edge without knowing anything about the viewport, the gutter or which
   container width it happens to be inside.

   The section is `overflow: hidden` for it, because --container-bleed counts a
   scrollbar that the container does not - without the clip the picture would
   overhang by those few pixels and the page could be scrolled sideways.

   THE COLUMNS are 41 to 59, which is where the layout puts them: the text needs
   a comfortable measure and the picture is a crop, so it can give up the room.
   Mirroring swaps which grid column each one takes; the markup does not change,
   so the picture stays first in the DOM in both directions - it is decorative
   either way, and reversing the source order for a visual flip would be a lie
   to anything that reads the page in order.
   ============================================================================= */

.media-text {

    /* The crop. The source pictures are 4:3 and the layout shows a wide strip
       cut out of the middle of them - so the ratio is set here and the picture
       covers it, rather than the file's own ratio deciding the section's
       height. Portrait windows get a squarer crop; a 21:10 strip on a phone is
       a letterbox with nothing in it. */
    --media-text-ratio: 4 / 3;

    /* Which part of the crop is kept. Every picture used so far has its subject
       in the middle; a page with an off-centre one overrides this. */
    --media-text-focus: center;

    /* Height of the RPU mark over the picture, as a share of the picture. */
    --media-text-logo-size: 26%;

    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .media-text {
        --media-text-ratio: 21 / 10;
    }
}

.media-text__inner {
    display: grid;
    gap: var(--space-xl);
    align-items: start;
}

@media (min-width: 768px) {
    .media-text__inner {
        grid-template-columns: minmax(0, 41fr) minmax(0, 59fr);
        gap: var(--space-2xl);
    }
}

/* --- The picture -------------------------------------------------------------
   Below 768px the two are stacked and the picture bleeds off BOTH edges, which
   is the same negative margin twice. From 768px it only leaves the side it is
   on; the other side is where the text begins.
   -------------------------------------------------------------------------- */
.media-text__media {
    position: relative;
    aspect-ratio: var(--media-text-ratio);
    overflow: hidden;
    margin-inline: calc(var(--container-bleed) * -1);
}

@media (min-width: 768px) {
    /* The row is stated on both, and it has to be. Mirroring places the picture
       in the SECOND column while it is still first in the source, and grid
       auto-placement never goes backwards: the text would be put on a second
       row rather than in the column beside it. Naming the row for both pins
       them to the same one. */
    .media-text__media {
        grid-row: 1;
        grid-column: 1;
        margin-inline-end: 0;
    }

    .media-text--mirrored .media-text__media {
        grid-column: 2;
        margin-inline-start: 0;
        margin-inline-end: calc(var(--container-bleed) * -1);
    }
}

.media-text__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--media-text-focus);
}

/* Inside the picture, not beside it. Centred, because the pictures it is used
   on are wide and even - there is no one corner that is reliably quiet. */
.media-text__logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: var(--media-text-logo-size);
    transform: translate(-50%, -50%);

    /* A photograph is never uniformly light or dark under a white mark, so the
       mark carries its own separation. The same drop-shadow pair as
       .hero__logo, one step softer. */
    filter: drop-shadow(0 0 1rem rgba(var(--rgb-black), 0.35))
            drop-shadow(0 0 2.5rem rgba(var(--rgb-black), 0.25));
}

/* --- The text ---------------------------------------------------------------- */

@media (min-width: 768px) {
    .media-text__body {
        grid-row: 1;
        grid-column: 2;
    }

    .media-text--mirrored .media-text__body {
        grid-column: 1;
    }
}

/* Positioning only. The headline itself is the shared .section-title, one size
   down - see base/components.css and modules/section-title.php. */
.media-text__title {
    margin: 0;
}

.media-text__text {
    margin-block-start: var(--space-md);
}

.media-text__action {
    margin-block-start: var(--space-lg);
}