/* AEKE .sg — gallery section: the four "AEKE Intelligence" cards.
 *
 * A port of the theme's `gallery.css`, plus the three declarations it borrows from
 * `app.css` (`.aspect-ratio`, `.aspect-ratio img`, `.column-spacing--*`). Declarations
 * are kept as the theme writes them; values are re-pointed at tokens.
 *
 * MEASURED AGAINST THE LIVE SITE:
 *   4 columns, 10px gap, square cards, 4px radius, full-bleed with no page gutter —
 *   cards run 0 → page width. Card padding 25px, 35px from 1068 and 45px from 1440.
 *   Heading `.h3` size (26/30 → 30/38 → 34/42), paragraph 17/27.2, 15/24 from 1068.
 *   Below 768px the row becomes a horizontal scroll-snap strip.
 *
 * TWO THINGS WORTH KNOWING.
 *
 * 1. **`.aspect-ratio` is a padding trick, not `aspect-ratio`.** The figure is
 *    `height: 0` with `padding-bottom: var(--ratio-percent)`, and the image is
 *    absolutely positioned into the space. That gives every card its shape before a
 *    single byte of image arrives, which is why the grid never reflows on load.
 *    The absolutely positioned `.gallery--item-content` resolves `height: 100%`
 *    against the figure's PADDING box, which is the same trap that broke the hero —
 *    here it works in our favour, and it only works because the figure has both
 *    `position: relative` and the padding.
 *
 * 2. **The mobile swipe row is full-bleed, unlike upstream's.** aeke.com wraps the
 *    gallery in a `.row` with a 15px gutter and then pulls the strip back out with
 *    `margin: 0 -15px; width: calc(100% + 30px)` — which leaves the first card 15px
 *    off the left edge of the viewport, cut off, needing a scroll to see in full.
 *    Our gallery has no `.row`, so the strip is already the full width and needs no
 *    negative margin. Same layout, first card whole.
 */

/* The wrapper holds the section's own spacing margin. Without this the 70px collapses straight
   through the container the non-full-width galleries now sit in, and the section measures short by
   exactly one spacing step — 518 against live's 588. Fourth section to need it, after the video,
   the FAQ and the multicolumn rows. */
.gallery-section {
  display: flow-root;
}

.gallery {
  display: block;
}

/* The live section carries its ground colour as an inline style, and so does the
   scrolling strip below it — both use the shared `.section--ground` from
   `theme-utilities.css`. */

/* ---------------------------------------------------------------- the grid */

/* The gap comes from `.column-spacing--*` in `theme-utilities.css` — the media grid
   uses the same vocabulary, so the values live in one place. */
.gallery--inner {
  display: grid;
}

@media (min-width: 48em) {
  .gallery--inner {
    grid-template-columns: repeat(var(--gallery-columns, 4), 1fr);
  }
}

/* --------------------------------------------------------------- the card */

.gallery--item {
  isolation: isolate;
  position: relative;
  overflow: hidden;
  border-radius: var(--block-border-radius);
}

/* A card with no spacing between it and its neighbours has no corner to round. */
.gallery--inner.column-spacing--none .gallery--item {
  border-radius: 0;
}

.gallery--item figure {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* `.aspect-ratio` — the padding-bottom ratio mechanism this file relies on — lives in
   `theme-utilities.css`, because the scrolling strip needs exactly the same trick. */

/* The tinted wash over the artwork. Opacity 0 on every card we ship, so this is
   invisible today — it is here because the feature is real and one line. */
.gallery--item figure::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 11;
  background: rgba(var(--overlay-color-rgb), var(--overlay-opacity));
}

/* ---------------------------------------------------------- the card content */

.gallery--item-content {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  display: flex;
  width: 100%;
  height: 100%;
  padding: 25px;
  color: var(--color-heading);
}

@media (min-width: 1068px) {
  .gallery--item-content {
    padding: 35px;
  }
}

@media (min-width: 90em) {
  .gallery--item-content {
    padding: 45px;
  }
}

/* The same nine positions as the slideshow, with the same meanings. */
.gallery--item-content.content-top-left      { justify-content: flex-start; align-items: flex-start; }
.gallery--item-content.content-top-center    { justify-content: center;     align-items: flex-start; }
.gallery--item-content.content-top-right     { justify-content: flex-end;   align-items: flex-start; }
.gallery--item-content.content-middle-left   { justify-content: flex-start; align-items: center; }
.gallery--item-content.content-middle-center { justify-content: center;     align-items: center; }
.gallery--item-content.content-middle-right  { justify-content: flex-end;   align-items: center; }
.gallery--item-content.content-bottom-left   { justify-content: flex-start; align-items: flex-end; }
.gallery--item-content.content-bottom-center { justify-content: center;     align-items: flex-end; }
.gallery--item-content.content-bottom-right  { justify-content: flex-end;   align-items: flex-end; }

.gallery.text-left .gallery--item-content   { text-align: left; }
.gallery.text-center .gallery--item-content { text-align: center; }
.gallery.text-right .gallery--item-content  { text-align: right; }

.gallery--item-content h3 {
  margin: 0 0 8px;
  color: inherit;
}

.gallery--item-content p {
  margin-bottom: 30px;
  color: inherit;
}

.gallery--item-content .subheading {
  margin-bottom: 15px;
  font-size: 0.75rem;
}

/* The last thing in a card must not push the block off its own bottom edge —
   these cards anchor their content to the bottom. */
.gallery--item-content > div > *:last-child {
  margin-bottom: 0;
}

@media (min-width: 48em) {
  .gallery--item-content > div {
    max-width: 90%;
  }
}

/* The copy is 17px on a phone and 15px on a desktop, which is the theme's own
   inversion — the card is small, so the text gets smaller as the card grows. */
.gallery--item-content .description-size--small p {
  font-size: inherit;
}

@media (min-width: 1068px) {
  .gallery--item-content .description-size--small {
    font-size: 0.9375rem;
    line-height: 1.6;
  }
}

/* A card that links somewhere gets a whole-card target above the artwork and below
   any CTA, so the picture is clickable without swallowing a button. */
.gallery--item-content-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 21;
  width: 100%;
  height: 100%;
}

/* ------------------------------------------------- cards with a glyph and a button

   Measured on `/pages/support`, whose cards are an icon, a heading and a button rather than a
   paragraph: a 60px glyph, the heading at `.h3`, then a white pill. Upstream sets the glyph's width
   with `!important` in its main stylesheet; here it is a scoped rule with the same value. */

.gallery--item-content .icon_text_img {
  position: relative;
  width: 60px;
  height: auto;
  margin: 0 0 15px;
}

/* The theme's `.gallery--item-content h4 + .button { margin-top: 20px }` — written for whichever
   heading level the card uses. */
.gallery--item-content h3 + .button {
  margin-top: 20px;
}

.gallery--item-content .button {
  position: relative;
  z-index: 22;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 7px 30px;
  border-radius: var(--button-border-radius);
  background: var(--button-background-color);
  /* OURS — upstream's white button labels in `#01A3B8`, which is 3.03:1 on white and fails AA.
     Same correction the white buttons elsewhere on the site use. */
  color: var(--accent-on-light);
  font-size: 0.9375rem;
  line-height: 1.6;
  font-weight: 500;
  text-decoration: none;
}

.gallery--item-content .button:hover {
  /* No invented palette: the pill keeps its colour and only brightens a little. */
  filter: brightness(0.94);
}

/* ------------------------------------------------------- mobile swipe row */

/* Below 768px the grid becomes a horizontal, snapping strip. Upstream does this
   with `swipe-on-mobile` and it is pure CSS — no script, so the strip stays
   scrollable with a keyboard or a trackpad without one.

   The scrollbar is hidden because the strip is an affordance, not a scroll area the
   page should advertise; the next card peeking is the affordance. */
@media (max-width: 47.99em) {
  .gallery.swipe-on-mobile .gallery--inner {
    grid-auto-flow: column;
    grid-auto-columns: minmax(var(--mobile-swipe-width), 1fr);
    grid-template-columns: repeat(auto-fill, minmax(var(--mobile-swipe-width), 1fr));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .gallery.swipe-on-mobile .gallery--inner::-webkit-scrollbar {
    display: none;
  }

  .gallery.swipe-on-mobile .gallery--inner .gallery--item {
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
}