/* ============ Wadicos - Components (Content widgets) ============ *
 * carousel · footer.
 * ================================================================== */

@layer components {
  /* ---- Carousel ---------------------------------- */
  .carousel { position: relative; }
  .carousel__controls {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-block-end: var(--space-5);
  }
  .carousel__arrow {
    --size: 2.75rem;
    inline-size: var(--size);
    block-size: var(--size);
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-line);
    color: var(--color-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
      background-color var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out);
  }
  @media (hover: hover) {
    .carousel__arrow:hover { 
    background-color: var(--color-red);
    color: var(--color-cta-ink);
    border-color: var(--color-red);
   }
  }
  .carousel__arrow[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
  .carousel__track {
    display: grid;
    grid-auto-flow: column;
    /* Card width scales with viewport, capped so the
       desktop viewport reveals ~4 cards with a peek of
       the 5th - the editorial carousel rhythm that
       invites a horizontal scroll. The clamp floor (13rem)
       keeps the overlay text readable on narrow viewports;
       the ceiling (17rem) prevents cards from ballooning
       on wide screens. */
    grid-auto-columns: clamp(13rem, 22vw, 17rem);
    gap: var(--grid-gap);
    overflow-x: auto;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
    padding-block-end: var(--space-3);
  }
  .carousel__track::-webkit-scrollbar { display: none; }
  .carousel__track > * { scroll-snap-align: start; }

  /* ---- Footer ------------------------------------ *
   * Moved to components/footer.css when the footer was
   * extracted into a partial. The post-injection markup
   * is byte-identical to the legacy inline form, so the
   * cascade is preserved one-for-one.
   * ----------------------------------------------- */
}