/* ==========================================================================
   IRONBEASTS - HOMEPAGE
   Ported from the static draft (new-theme-draft/assets/css/components.css).
   Loaded only on the front page. Depends on the tokens in base.css.
   ========================================================================== */

/* ==========================================================================
   HERO BANNER SLIDER
   ========================================================================== */
.hero-slider {
  position: relative;
  overflow: hidden;
  background: var(--ib-ink);
  /* Fixed height reserves the space before the image arrives, so the page
     below never jumps once it loads. */
  height: clamp(400px, 48vw, 720px);
}

.hero-slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity .8s var(--ease);
}

.hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---- Call to action ------------------------------------------------------
   The banner image is not clickable; this button is the only way into the
   link. Smaller than a page button so it sits on the artwork rather than
   competing with it.
   -------------------------------------------------------------------------- */
.hero-slide__cta {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 3.5vw, 2.5rem);
  transform: translateX(-50%);
  z-index: 2;
  padding: .6rem 1.5rem;
  font-size: var(--fs-12);
  letter-spacing: var(--ls-5);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .hero-slide__cta {
    bottom: 1.25rem;
    padding: .5rem 1.15rem;
    font-size: var(--fs-12);
  }
}

/* A lone banner has no controls and nothing to fade between. */
.hero-slider--single .hero-slide {
  position: relative;
  opacity: 1;
  pointer-events: auto;
  transition: none;
}

/* ---- Arrows -------------------------------------------------------------- */

/* Shared by the hero and the collections carousel; each positions its own. */
.carousel-arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--on-dark-fill-2);
  color: var(--ib-white);
  font-size: var(--fs-30);
  line-height: var(--lh-tight);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  transition: background var(--t), opacity var(--t), color var(--t);
}

.carousel-arrow:hover,
.carousel-arrow:focus-visible {
  background: var(--on-dark-fill-3);
}

/* A scrolling track can also be dragged, so its arrows are a hint rather
   than the main control: no disc, dimmed until the section is hovered. The
   ink is the ground's: pale on the dark band, muted text on the light one. */
.scroller .carousel-arrow {
  width: 34px;
  height: 34px;
  font-size: var(--fs-24);
  background: none;
  backdrop-filter: none;
  opacity: 0;
}

.scroller:hover .carousel-arrow,
.scroller .carousel-arrow:focus-visible {
  opacity: 1;
}

.scroller .carousel-arrow:hover,
.scroller .carousel-arrow:focus-visible {
  background: none;
}

.scroller .carousel-arrow[disabled] {
  opacity: 0;
}

.collections .carousel-arrow {
  color: var(--on-dark-muted);
}

.collections .carousel-arrow:hover,
.collections .carousel-arrow:focus-visible {
  color: var(--ib-white);
}

.cat-scroller .carousel-arrow {
  color: var(--text-muted);
}

.cat-scroller .carousel-arrow:hover,
.cat-scroller .carousel-arrow:focus-visible {
  color: var(--heading);
}

/* Nothing left to scroll in that direction. */
.carousel-arrow[disabled] {
  opacity: 0;
  pointer-events: none;
}

.hero-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

.hero-slider__arrow.prev {
  left: 18px;
}

.hero-slider__arrow.next {
  right: 18px;
}

/* Smaller and tighter to the edges on phones, where they share the artwork
   with the button. Swiping does the same job for anyone who prefers it. */
@media (max-width: 640px) {
  .carousel-arrow {
    width: 36px;
    height: 36px;
    font-size: var(--fs-22);
  }

  .hero-slider__arrow.prev {
    left: 8px;
  }

  .hero-slider__arrow.next {
    right: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    transition: none;
  }
}

/* ==========================================================================
   COLLECTIONS CAROUSEL
   ========================================================================== */
/* The track runs past the container to the screen edge, so the last visible
   card is cut off rather than ending neatly — which is what reads as "there is
   more over there". The padding puts that space back inside the scroller, so
   the final card can still be brought fully into view.

   Right side only: the first card stays aligned with the heading above it.
   `50% - 50vw` reaches the viewport edge whatever the container is capped at.
   The section clips, because vw counts the scrollbar and would otherwise leave
   the page itself scrollable sideways by a few pixels.

   The matching padding goes on the scroller below, never here. */
/* ---- The scrolling track ---------------------------------------------------
   Shared by the collections and the category cards: the track bleeds to the
   right edge of the screen, scrolls sideways, snaps, drags with a mouse and
   steps with the arrows. Each section sets only its card width and its ink. */
.scroller {
  position: relative;
  margin-right: calc(50% - 50vw);
}

.section:has(.scroller) {
  overflow-x: clip;
}

.scroller__track {
  display: grid;
  grid-auto-flow: column;
  gap: clamp(.8rem, 1.4vw, 1.3rem);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: .6rem;
  -webkit-overflow-scrolling: touch;
  /* Space at the end of the track, not around it: this has to sit on the
     scroller so the last card can be brought past the screen edge. On the
     wrapper it would simply cancel the negative margin above. */
  padding-right: calc(50vw - 50%);
}

/* Only where there is a mouse to drag with. */
@media (hover: hover) {
  .scroller__track {
    cursor: grab;
  }
}

/* Smooth scrolling and snapping both fight a drag in progress. */
.scroller__track.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
  user-select: none;
}

.scroller__track::-webkit-scrollbar {
  height: 4px;
}

.scroller__track::-webkit-scrollbar-thumb {
  border-radius: 99px;
}

.collections-carousel {
  grid-auto-columns: clamp(260px, 24vw, 360px);
}

.collections-carousel::-webkit-scrollbar-thumb {
  background: var(--on-dark-fill-3);
}

.col-card {
  scroll-snap-align: start;
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  color: var(--ib-white);
}

/* The draft used an inline background-image; a real <img> can lazy-load and
   carry a srcset, so it is layered underneath the gradient instead. */
.col-card img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.col-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, var(--shade-5) 0%, var(--shade-1) 55%, transparent 100%);
  transition: background var(--t);
}

.col-card:hover::after {
  background: linear-gradient(to top, var(--shade-6) 0%, var(--shade-3) 70%, var(--shade-1) 100%);
}

.col-card__body {
  position: relative;
  z-index: 2;
  padding: 1.3rem 1.4rem;
}

.col-card__body h3 {
  color: var(--ib-white);
  font-size: var(--fs-20);
  margin: .35rem 0 .55rem;
}

.col-card__arrow {
  display: inline-block;
  font-family: var(--font-display);
  line-height: var(--lh-snug);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-6);
  text-transform: uppercase;
  border-bottom: 2px solid var(--ib-red);
  padding-bottom: 2px;
  transition: transform var(--t);
}

.col-card:hover .col-card__arrow {
  transform: translateX(3px);
}

/* Two cards plus the edge of a third, so it reads as scrollable without
   needing arrows or dots. */
/* Arrows sit over the first and last card. A wheel only scrolls vertically, so
   without them a desktop visitor has no obvious way to move the track. */
.scroller__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.scroller__arrow.prev {
  left: -6px;
}

.scroller__arrow.next {
  right: -6px;
}

/* Touch devices swipe, so the arrows would only be in the way. */
@media (hover: none) {
  .scroller__arrow {
    display: none;
  }
}

@media (max-width: 640px) {
  .collections-carousel,
  .cat-carousel {
    grid-auto-columns: 40vw;
  }

  /* The cards are narrow here, so the text block has to take less of the
     photo than it does on desktop. */
  .col-card__body {
    padding: .85rem .9rem;
  }

  .col-card__body h3 {
    font-size: var(--fs-15);
    margin: .2rem 0 .35rem;
  }

  .col-card__arrow {
    font-size: var(--fs-10);
    letter-spacing: var(--ls-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .collections-carousel {
    scroll-behavior: auto;
  }

  .col-card:hover .col-card__arrow {
    transform: none;
  }
}

/* ==========================================================================
   SHOP BY CATEGORY
   Photo cards on the same scrolling track as the collections above, and
   deliberately not the same card: on the light ground rather than the dark
   band, a 4:5 photo rather than 3:4, and the name centred over the foot of
   the photo rather than a title and a call to action in the corner. The same
   section read twice would look like a mistake; this reads as the next
   thing.
   ========================================================================== */
.cat-carousel {
  grid-auto-columns: clamp(240px, 22vw, 400px);
}

.cat-carousel::-webkit-scrollbar-thumb {
  background: var(--border);
}

/* The cards themselves are in cat-cards.css: the 404 page shows them too. */

/* ==========================================================================
   STOCK-OFF BAND
   ========================================================================== */

/* A tinted band, so a grid of products separates from the plain sections
   around it. Was `.sale-band`, which named the one place it happened to be
   used rather than what it does -- the deals grid and the new-products grid
   want the same treatment and neither of them is about the other. */
.band-light {
  background: var(--band-light);
  border-block: 1px solid var(--border);
}

/* ==========================================================================
   BRAND MANIFESTO
   ========================================================================== */
.manifesto__grid {
  display: grid;
  /* 30% text / 70% photo. minmax(0,..) stops the image forcing the column
     wider than its share. */
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  align-items: stretch;
  min-height: clamp(420px, 38vw, 580px);
}

/* With no photo set, the copy takes the full width. */
.manifesto__grid:not(:has(.manifesto__media)) {
  grid-template-columns: 1fr;
}

.manifesto__text-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
}

.manifesto__text-inner {
  max-width: 30rem;
}

.manifesto__title {
  font-size: var(--fs-fluid-xl);
  line-height: var(--lh-tight);
  margin-bottom: var(--sp-5);
}

.manifesto__accent {
  color: var(--ib-red);
}

.manifesto__text {
  max-width: 40ch;
  margin: 0 auto var(--sp-6);
  color: var(--on-dark-text);
  font-size: var(--fs-18);
}

.manifesto__media {
  position: relative;
  overflow: hidden;
  background: var(--ib-900);
}

/* Absolute, so the photo's own height cannot stretch the band -- the height
   comes from min-height and the copy, whichever image is used. */
.manifesto__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 90%;
}

@media (max-width: 800px) {
  .manifesto__grid {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* Photo introduces the band, copy follows. */
  .manifesto__media {
    order: -1;
    height: clamp(240px, 55vw, 360px);
  }

  .manifesto__text-col {
    padding: clamp(2rem, 7vw, 3rem) clamp(1rem, 4vw, 2.5rem);
  }

  .manifesto__text-inner {
    max-width: none;
  }
}

/* ==========================================================================
   INSTAGRAM STRIP
   ========================================================================== */
.social-head {
  text-align: center;
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}

.social-head .eyebrow {
  margin-bottom: .35rem;
}

.social-head p {
  color: var(--text-muted);
  margin-top: .35rem;
  font-size: var(--fs-15);
}

/* Three across at every width, hairline gaps -- an Instagram grid,
   deliberately unlike the product cards above. Tiles are 4:5, the portrait
   ratio the account actually posts in, so nothing is cropped. */
.social-media-feed {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  max-width: 980px;
  margin-inline: auto;
}

.social-post {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--surface-2);
}

.social-post img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 520px) {
  .social-media-feed {
    gap: 2px;
  }
}

/* ---- Grid tabs -----------------------------------------------------------
   "New for Him / New for Her" above a product grid. The tabs are the
   section's title, so they wear the section title's type -- display face, the
   same fluid size -- with the closed tab muted and the open one in heading
   ink over a thin underline. Every tab's grid is already in the page; home.js
   only swaps which one is shown. */
.grid-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
  margin-bottom: var(--sp-6);
}

.grid-tabs__tab {
  position: relative;
  padding: var(--sp-2) 0;
  background: none;
  border: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-fluid-lg);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-1);
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--t);
}

.grid-tabs__tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform var(--t);
}

.grid-tabs__tab:hover,
.grid-tabs__tab[aria-selected="true"] {
  color: var(--heading);
}

.grid-tabs__tab[aria-selected="true"]::after {
  transform: scaleX(1);
}

/* The grid a tab opens fades in rather than appearing in one frame. Only
   opacity, so nothing reflows. home.js adds the class only when motion is
   allowed, so there is no reduced-motion block to keep in step. */
.grid-tabs__panel.is-entering {
  animation: grid-tab-in .3s var(--ease);
}

@keyframes grid-tab-in {
  from {
    opacity: 0;
  }
}

/* ---- Shop by Category: For Him / For Her ----------------------------------
   Two outline buttons under the title, on the left; the pressed one fills,
   the way an outline button looks under the pointer. */
.cat-filter {
  display: flex;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.cat-filter .btn[aria-pressed="true"] {
  --btn-bg: var(--heading);
  --btn-fg: var(--bg);
}