/*
 * Layout fix for the panels this project server-renders.
 *
 * Upstream swaps a single element with JavaScript, so its markup has the panel
 * contents as DIRECT children of the flex column that styles them:
 *
 *   .svc-build-swap  > figure.svc-build-media + h3 + p + a.svc-build-cta
 *   #typeStage       > small + .si-type-preview + h3 + p + .si-type-watch
 *
 * We render every panel instead and toggle `hidden`, which means each panel
 * needs a wrapper element. That wrapper became the flex item, so the sizing
 * rules written for the real content stopped applying — `.si-type-preview`
 * carries `flex: 1 1 auto` and `.svc-build-cta` carries
 * `align-self: flex-start`. The preview box then grew to its natural image
 * height and the heading, copy and CTA underneath were clipped by the
 * `overflow: hidden` on `.svc-build-visual` — visible as an image with nothing
 * below it, changing as you clicked between tabs.
 *
 * The same fix for `[data-process-panel]` lives in public/css/site-overrides.css
 * instead, because the home page shows that section too and does not load this
 * file.
 *
 * `display: contents` removes the wrapper from the layout so the children are
 * flex items again, matching upstream exactly. The `[hidden]` rule has to be
 * restated because an author `display` declaration outranks the browser's
 * built-in `[hidden] { display: none }`.
 *
 * This file lives outside public/web-assets/ on purpose: `frontend:sync`
 * overwrites everything under that directory.
 */

[data-build-panel],
[data-type-panel] {
    display: contents;
}

[data-build-panel][hidden],
[data-type-panel][hidden] {
    display: none;
}

/*
 * Platform logos in the #types stage.
 *
 * service-inner.css sizes these with `.si-sample:has(img[src*="/tech/"])`, which
 * only matches while the picture is still the fallback file under
 * public/web-assets/img/tech/. The moment an editor assigns a Media Library
 * image the src becomes /storage/media_storage/<id>/… and the logo would stretch
 * to full width like a photograph. The page now declares the intent with a class
 * instead, so the treatment survives an image swap. Declarations copied from
 * service-inner.css.
 */

/* .service-inner-page .si-sample--logo:has(img) {
    max-width: 220px;
    margin-inline: auto;
} */

/* .service-inner-page .si-sample--logo img {
    max-height: 120px;
    width: auto;
    max-width: 100%;
    margin-inline: auto;
    border-radius: 0;
} */