/* AEKE .sg — the theme's own global utilities: the ones more than one section needs.
 *
 * These live in the theme's `app.css` with everything else. Ours are in a plain file
 * rather than in `tailwind.css`, because `app.css` is Tailwind's build output and
 * nothing here is generated from a source we control.
 *
 * Only what is genuinely shared goes here. Section-specific rules stay with their
 * section — `.gallery--*` in `gallery.css`, `.slideshow__*` in `slideshow.css` — so a
 * page never downloads rules for markup it does not contain.
 */

/* --------------------------------------------------------------- rhythm */

/* A page that scrolls sideways is broken, and at 320px something always is: a sub-pixel
   rounding, a `100vw` against a scrollbar, a font that measures a hair wider than its box.
   **`clip`, not `hidden`.** `overflow: hidden` makes the element a scroll container, which
   silently breaks `position: sticky` on the header; `clip` does not, so the guard costs nothing.

   This is a guard, not a fix, and it is recorded as one: measured at 320/360/768/1280/1600 with
   the gate's own method (attempt a scroll, read `window.scrollX`), every route is stationary.
   What it *cannot* do is tell you which element was 2px too wide — the product page's thumbnail
   strip was, and that was fixed properly in `product-main.css` by giving the scroller
   `min-width: 0`. If a new overflow appears, look for it the same way before trusting this line. */

html {
  overflow-x: clip;
}

/* Every section but the header carries `.section-spacing`, which sets both margins,
   plus an optional `--disable-top` / `--disable-bottom` to zero one end. One class
   covers top-only, bottom-only and both, which is why the theme uses it rather than a
   modifier per combination.

   THE BREAKPOINT IS 768px, NOT 1068px. That matters and was easy to get wrong: the
   header switches at 1068, so the page can look consistent while every section's
   spacing is 50px where the live site has 70. Read from the theme's own `app.css` —
   `.section-spacing { margin: … var(--section-spacing-mobile) }` then
   `@media only screen and (min-width: 768px) { … var(--section-spacing-desktop) }` —
   and confirmed by measuring the live gallery at 768: 181px of card plus 70px of
   margin, inside a 251px section. */
.section-spacing {
  margin-top: var(--section-spacing-mobile);
  margin-bottom: var(--section-spacing-mobile);
}

@media (min-width: 48em) {
  .section-spacing {
    margin-top: var(--section-spacing-desktop);
    margin-bottom: var(--section-spacing-desktop);
  }
}

.section-spacing.section-spacing--disable-top {
  margin-top: 0;
}

.section-spacing.section-spacing--disable-bottom {
  margin-bottom: 0;
}

/* The same rhythm, applied as padding. A section with its own background needs the
   space inside the painted area, not outside it — `.rich-text` is the one that does. */
.section-spacing-padding {
  padding-top: var(--section-spacing-mobile);
  padding-bottom: var(--section-spacing-mobile);
}

@media (min-width: 48em) {
  .section-spacing-padding {
    padding-top: var(--section-spacing-desktop);
    padding-bottom: var(--section-spacing-desktop);
  }
}

.section-spacing-padding.section-spacing--disable-top {
  padding-top: 0;
}

.section-spacing-padding.section-spacing--disable-bottom {
  padding-bottom: 0;
}

/* ------------------------------------------------------------------ gaps */

/* The gap between grid cells. Named by size rather than by section, because the
   gallery and the media grid use the same vocabulary and the same numbers. */
.column-spacing--small,
.column-spacing--medium {
  gap: 10px;
}

.column-spacing--large {
  gap: 10px;
}

@media (min-width: 48em) {
  .column-spacing--medium {
    gap: 20px;
  }

  .column-spacing--large {
    gap: 30px;
  }
}

/* --------------------------------------------------------------- surfaces */

/* A section that paints its own ground rather than sitting on the page's. Several
   live sections carry `background: #0d0e11` as an inline style; ours names the token,
   which today is the same colour as the page behind it — kept because it is
   upstream's declaration, and a section that grounds itself is one that survives
   being moved onto a different surface. */
.section--ground {
  background: var(--bg-body);
}

/* --------------------------------------------------------- fixed ratios */

/* A padding trick, not the `aspect-ratio` property: the box is `height: 0` with
   `padding-bottom: var(--ratio-percent)`, and everything inside it is absolutely
   positioned into the space that padding creates. That is how the theme reserves room
   for an image before one byte of it has loaded, and so how it keeps a grid from
   reflowing under the reader.

   It depends on the element ALSO being `position: relative`. An absolutely positioned
   child resolves `height: 100%` against its containing block's PADDING box, and on a
   `height: 0` element that padding is the only thing giving the box a height at all.
   Take the `.aspect-ratio` class off and a card collapses; take `position: relative`
   off and its caption flies off to the top of the page. */
.aspect-ratio {
  height: 0;
  position: relative;
  padding-bottom: var(--ratio-percent);
}

.aspect-ratio img,
.aspect-ratio .thb-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  object-fit: cover;
}