@charset "UTF-8";
/* ----------------------------------------------------------------------- *
 *  AAE Loop Grid — atomic nested element (FRONTEND styles).
 *
 *  The column layout is FLEXBOX-driven: the Loop Layout's base style is
 *  display:flex + wrap and each Loop Item's base style is `flex: 1 1 32%`
 *  (3-up by default), tuned from the Style panel. There is no columns
 *  setting/CSS var. This file only carries what base styles cannot express.
 *
 *  EDITOR-ONLY rules (canvas selectability, edit-handle overlay placement,
 *  hiding editor helper nodes) live in loop-grid-editor.scss and are enqueued
 *  ONLY inside the editor preview — never shipped to the frontend. Keep this
 *  file limited to rules that affect the published page (layout + runtime
 *  states + edge-state visibility).
 * ----------------------------------------------------------------------- */
/* The grid container is `.aae-a-loop-grid` when the Loop Layout is present
 * (new nested tree, editor + frontend) and `.aae-a-loop-grid-wrap` for the
 * legacy flat tree. Both must be a grid so editor and frontend match exactly. */
/* Guard (currently a no-op): the wrap ships as a bare `.e-con` with no
 * `.e-flex`/`.e-grid` modifier, so it is already `display: block` and the Loop
 * Layout + pagination stack correctly on their own. This keeps the wrap block
 * IF it ever gains a flex/grid display (a layout base style, or a user Style-
 * panel edit) — which would otherwise lay the Layout + pagination side-by-side.
 * Frontend concern, so it lives here (not the editor-only file). */
.aae-a-loop-grid-wrap:has(> .aae-a-loop-grid) {
  display: block !important;
}

/* Frontend empty state: PHP print_content() emits this div when the query
 * returns no posts (class-aae-a-loop-item.php). It renders on the published
 * page, so its look must ship to the frontend. */
.aae-a-loop-grid-empty {
  padding: 24px;
  text-align: center;
  color: var(--e-a-color-txt-muted, #818a96);
}

/* ----------------------------------------------------------------------- *
 *  Pagination — atomic nested (Prev / Numbers / Next / Load More).
 *
 *  The DEFAULT LOOK of each piece (layout, padding, border, colours, arrow
 *  size, space-between) lives in each widget's PHP define_base_styles(), so it
 *  is fully overridable from the editor Style panel. This file only carries
 *  what a base style cannot express: runtime states and the number-gap state.
 * ----------------------------------------------------------------------- */
/* State-only rules for the nav (default look is in base styles). */
.aae-a-loop-nav:hover {
  filter: brightness(0.97);
}
.aae-a-loop-nav.is-disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
}

/* Gap is runtime state, not a persisted Atomic style state. */
.aae-a-loop-number.is-gap {
  border: none;
  cursor: default;
  pointer-events: none;
  min-width: auto;
  padding: 0 4px;
}

/* Load More state-only (default look is in base styles).
 *
 * `.is-loading` is a runtime class the frontend JS toggles on the button during
 * the AJAX fetch. While loading, the label dims and pointer input is blocked,
 * and a small spinner is appended after the label. The spinner is a CSS-only
 * `::after` that inherits the button's own text `color` (currentColor), so it
 * always matches whatever the user styled the button to from the Style panel —
 * no separate spinner-colour control needed. The button's base style is
 * inline-flex with gap:6px, so the spinner spaces itself from the label. */
.aae-a-loop-loadmore:hover {
  filter: brightness(1.08);
}
.aae-a-loop-loadmore.is-loading {
  opacity: 0.75;
  pointer-events: none;
}
.aae-a-loop-loadmore.is-loading::after {
  content: "";
  width: 1em;
  height: 1em;
  flex: none;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: aae-loadmore-spin 0.6s linear infinite;
}

@keyframes aae-loadmore-spin {
  to {
    transform: rotate(360deg);
  }
}
.aae-a-loop-pagination.is-loading {
  opacity: 0.7;
}

/* No type-driven visibility any more: every pagination piece (Prev/Next,
 * Numbers, Load More) renders by default and the user hides the unwanted ones
 * from the Style panel (display: none). The frontend runtime is DOM-driven —
 * it wires whichever pieces are present + visible. */
/* Edge-state visibility — FRONTEND ONLY (the editor keeps every piece visible
 * and styleable). The twig stamps aae-pg-first / aae-pg-last at render time
 * (totals are known server-side, so nothing flashes on page load) and the
 * runtime re-syncs the classes after each AJAX page change. First page → no
 * Prev; last page (incl. a single page) → no Next / Load More. */
body:not(.elementor-editor-active) .aae-a-loop-pagination.aae-pg-first [data-aae-nav=prev] {
  display: none;
}
body:not(.elementor-editor-active) .aae-a-loop-pagination.aae-pg-last [data-aae-nav=next],
body:not(.elementor-editor-active) .aae-a-loop-pagination.aae-pg-last [data-aae-loadmore] {
  display: none;
}
/*# sourceMappingURL=loop-grid.css.map */