/**
 * Work item — single tile in the Works list.
 *
 * Mirrors the react-src component tree:
 *   .work-item                       ← <ShortDescription>
 *     [.work-item__media--left]      ← <WorkListItemMedia> (leftImage|leftVideo)
 *     .work-item__summary            ← <Summary> (SummaryContainer)
 *       .work-item__client           ← <SummaryClient>   (h2)
 *       .work-item__title            ← <SummaryTitle>    (h3)
 *       .work-item__cta              ← <SummaryLink>     (Button)
 *       .work-item__side             ← <SummarySide>     (rotated, projects right of summary)
 *         .work-item__side-category
 *         .work-item__side-separator
 *         .work-item__side-area
 *     [.work-item__media--right]     ← <WorkListItemMedia> (rightImage|rightVideo)
 *
 * Widths come from ACF (`left_width`, `summary_width`, `right_width`) and
 * are emitted as inline `width: X%` on the flex children. Total widths often
 * exceed 100% by design; the row's `overflow: hidden` + `flex-shrink: 1` +
 * `min-width: 0` shrink them proportionally — same behavior as react-src.
 *
 * All sizing values are calqued from react-src (see common/units.js):
 *   verticalMargin    vM = 1.84vw
 *   horizontalMargin  hM = 3.02vw
 *   menuHeight        mH = 2.5vw
 *   row height           = 25vw desktop / 63.47vw mobile (126.94vw stacked)
 */

/* ---------- Row container (one tile) ---------- */
.work-item {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    height: 25vw;
    overflow: hidden;
    background-color: #fff;
    color: #000;
}

@media (max-width: 768px) {
    .work-item {
        /* react-src ShortDescriptionContainer keeps `flex-direction: row` on
         * mobile by default (the `stackOnMobile` prop that switches to
         * column-reverse is defined but never passed by any caller, so all
         * tiles stay side-by-side). Mobile widths come from
         * `--w-mobile` (set inline from ACF *_mobile_width fields). */
        height: 63.47vw;
    }
}

/* ---------- Media cells (left / right) ---------- */
.work-item__media {
    flex: 0 1 auto;
    min-width: 0;
    width: 100%;
    height: 101%;          /* react-src trick to avoid sub-pixel seams */
    overflow: hidden;
    display: block;
    background-color: #000;
    text-decoration: none;
}

.work-item__image,
.work-item__video {
    display: block;
    width: 101%;
    height: 101%;
    min-width: 101%;
    min-height: 101%;
    object-fit: cover;
    object-position: center center;
}

@media (max-width: 768px) {
    .work-item__media {
        /* Width comes from ACF *_mobile_width via --w-mobile (set inline
         * by render). Height is inherited from the parent row (63.47vw)
         * via the existing `height: 101%` rule. */
        width: var(--w-mobile, 100%) !important;
    }
}

/* ---------- Summary panel (middle column) ---------- */
.work-item__summary {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    /* react-src SummaryContainer: padding hM (hM*2) hM hM = 3.02 6.04 3.02 3.02vw.
       The right pad reserves room for the rotated SummarySide that projects
       outside this panel via `left: 100%` / rotate(-90deg). */
    padding: 3.02vw 6.04vw 3.02vw 3.02vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

@media (max-width: 768px) {
    .work-item__summary {
        width: var(--w-mobile, 100%) !important;
        padding: 6.03vw 12.06vw 6.03vw 6.03vw;
    }
}

/* ---------- Client name (h2) — react-src SummaryClient ---------- */
.work-item__client {
    margin: 0;
    padding: 0;
    line-height: 1;
    letter-spacing: -0.02em;
    font-size: 9.06vw;
    font-weight: 500;
}

@media (min-width: 769px) {
    .work-item__client {
        font-size: 3.3vw;
    }
}

/* ---------- Post title (h3) — react-src SummaryTitle ---------- */
.work-item__title {
    margin: 1.84vw 0 0; /* react-src: margin-top sm.margin/2 mobile, hM/2 desktop.
                           Using vM (1.84vw) bridges both reasonably. */
    padding: 0;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: 0;
    font-size: 5.6vw;
    font-weight: 500;
}

@media (min-width: 769px) {
    .work-item__title {
        margin-top: 1.51vw; /* hM/2 */
        font-size: 1.77vw;
    }
}

/* ---------- View case CTA — react-src Button --------------------------------
   Black pill, uppercase, expanded grotesk. `margin-top: auto` pushes it to
   the bottom of the flex column. Inverted-color works flip text/bg below. */
.work-item__cta {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    background-color: #000;
    color: #fff;
    border: 0;
    outline: 0;
    height: 10.73vw;
    padding: 0 6.12vw;
    font-family: var(--wp--preset--font-family--sharp-grotesk-expanded, "sharp-grotesk-expanded", Arial, Helvetica, sans-serif);
    font-size: 2.67vw;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 1s cubic-bezier(0.26, 1.04, 0.54, 1);
    will-change: transform;
}

@media (min-width: 769px) {
    .work-item__cta {
        height: 3.02vw;          /* hM */
        padding: 0 2.13vw;
        font-size: 0.73vw;
    }
}

.work-item__cta-content {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 1s cubic-bezier(0.26, 1.04, 0.54, 1);
    will-change: transform;
}

.work-item__cta:hover { transform: scale(0.95); }
.work-item__cta:hover .work-item__cta-content { transform: scale(1.10); }
.work-item__cta:active { transform: scale(0.9); }

/* ---------- Side label — react-src SummarySide -------------------------------
   Anchored to the right edge of the summary panel, then rotated -90° around
   its bottom-left corner so it projects vertically up the right gutter of
   the row. With `left: 100%` + `transform-origin: bottom left`, the rotated
   box's pre-rotation `width` becomes the visible vertical length, and its
   pre-rotation `height` becomes its visible horizontal thickness. */
.work-item__side {
    position: absolute;
    left: 100%;
    bottom: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    transform-origin: bottom left;
    transform: rotate(-90deg);
    line-height: 1;
    text-transform: uppercase;
    font-family: var(--wp--preset--font-family--sharp-grotesk-expanded, "sharp-grotesk-expanded", Arial, Helvetica, sans-serif);
    font-weight: 500;
    /* Mobile: width = row height (63.47vw stacked), height ~ sm.margin = 6.03vw. */
    width: 63.47vw;
    height: 6.03vw;
    padding: 0 6.03vw;
    font-size: 2.67vw;
    pointer-events: none;
}

@media (min-width: 769px) {
    .work-item__side {
        /* Desktop: width = row height (25vw), height = hM (3.02vw). */
        width: 25vw;
        height: 3.02vw;
        padding: 0 3.02vw;
        font-size: 1.09vw;
    }
}

.work-item__side-separator {
    background-color: currentColor;
    width: 12.06vw;     /* sm.margin * 2 */
    height: 0.05vw;
    margin-top: 1.22vw;
}

@media (min-width: 769px) {
    .work-item__side-separator {
        width: 3.02vw;  /* hM */
        margin-top: 0.54vw;
    }
}

/* ---------- Inverted-color variant (ACF `summary_inverted_color`) ----------
   Flips the summary text white and the CTA to white-on-black. */
.work-item.has-inverted-color,
.work-item.has-inverted-color .work-item__client,
.work-item.has-inverted-color .work-item__title,
.work-item.has-inverted-color .work-item__side {
    color: #fff;
}

.work-item.has-inverted-color .work-item__cta {
    background-color: #fff;
    color: #000;
}

/* ---------- When summary is the only column, let it span the whole row ----
   Works without left/right ACF media (e.g. summary-only tiles) need the
   summary to fill the row regardless of an inline `width: 50%` from ACF. */
.work-item.is-summary-only > .work-item__summary {
    width: 100% !important;
}