/*
Theme Name: WIENLION (ArneIron child)
Theme URI: https://wienlion.at/
Description: WIENLION.AT — Human coaching, AI-assisted training. Brand child theme over the ArneIron parent. All design tokens, components and section styling live in assets/css/ under the wl- prefix so the parent's design system is never overwritten, only overlaid.
Author: ArneIron
Author URI: https://arneiron.net/
Template: arneiron
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: arneiron-wienlion-child
License: Proprietary
*/

/* Design lives in assets/css/{fonts,tokens,base,components}.css — enqueued by
   functions.php in that order. Nothing is imported here: @import would serialise
   four round-trips behind this file. Put one-off hotfixes below. */

/* =========================================================================
   Parent-shell neutralisation
   -------------------------------------------------------------------------
   ArneIron's ds.css clamps `.wp-block-post-content` to the theme.json content
   size and puts `margin-block-start` on each of its children. WIENLION's
   sections are full-bleed colour bands that butt together and carry their own
   gutter inside `.wl-container`, so both must be released or every band shows
   a cream margin on all four sides.

   `body` prefixes only to out-specify ds.css without !important — nothing here
   is a fight, it is a different layout contract for the same element.
   ========================================================================= */
body .wp-block-post-content {
  max-width: none;
  margin-inline: 0;
}
body .wp-block-post-content > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* WooCommerce keeps a normal readable shell — the storefront is not a set of
   full-bleed bands, and without this the product/cart tables run edge to edge. */
body.wl-woo .wp-block-post-content {
  max-width: var(--wl-container);
  margin-inline: auto;
  padding-inline: var(--wl-pad-x);
  padding-block: var(--wl-s8);
}

/* -------------------------------------------------------------------------
   Bands must not leak their children's margins.
   -------------------------------------------------------------------------
   Measured: the stats bar's <dl> carries a 1rem UA margin. `.wl-stats` has no
   bottom padding and no border, so that margin COLLAPSES THROUGH the band and
   showed as a 16px cream hairline above and below it — while the band's own
   computed margin still read 0px, which is why the element itself looked
   innocent.

   Each WIENLION band is an independent full-bleed layer, so the honest fix is
   to make each one a block formatting context rather than to chase whichever
   descendant happens to carry a UA margin today. All of these are `display:
   block` in components.css, and `flow-root` lays out identically.
   ------------------------------------------------------------------------- */
body .wp-block-post-content > .wl-hero,
body .wp-block-post-content > .wl-page-hero,
body .wp-block-post-content > .wl-stats,
body .wp-block-post-content > .wl-marquee,
body .wp-block-post-content > .wl-section,
body .wp-block-post-content > .wl-cta,
body .wp-block-post-content > .wl-on-sand,
body .wp-block-post-content > .wl-on-ink,
body .wp-block-post-content > .wl-on-paper {
  display: flow-root;
}

/* -------------------------------------------------------------------------
   Wide photo frame (16:9)
   -------------------------------------------------------------------------
   components.css ships .wl-photo--portrait (4/5) and --landscape (3/2). The
   coaching montage is a true 16:9, and `object-fit: cover` inside a 3/2 frame
   would have cropped ~11% off each side — which is exactly where the cyclist
   and the client are. A frame that matches the asset crops nothing.
   ------------------------------------------------------------------------- */
.wl-photo--wide { aspect-ratio: 16 / 9; }

/* The montages are cut-outs with a transparent background, so they are meant to
   sit ON the frame's navy field rather than fill it edge to edge. `contain`
   keeps the whole subject; `cover` would crop the outer figures away. */
.wl-photo--cutout img { object-fit: contain; object-position: center bottom; }