/* ==========================================================================
   Tribe Aura — Shop landing page
   --------------------------------------------------------------------------
   The browse-first department page at the shop URL. The filterable grid lives
   in shop.css and still serves category, tag and attribute archives.

   Every tile reserves its image box with aspect-ratio BEFORE any photograph
   exists. The catalogue currently has no product photography, so the tonal
   placeholder is what renders today — but the box is already the right shape,
   which means the page will not reflow when the real images land. Designing
   the empty state and the filled state as the same layout is the whole point.

   Tokens only, no raw hex. Mobile-first; breakpoints 480 / 768 / 1024 / 1280.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Intro
   -------------------------------------------------------------------------- */

.ta-shopland__intro {
  padding-block: var(--ta-section-y-tight) var(--ta-space-lg);
  background-color: var(--ta-color-bg-alt);
}

.ta-shopland__title {
  margin: var(--ta-space-3xs) 0 0;
  font-family: var(--ta-font-display);
  font-size: var(--ta-text-3xl);
  font-weight: var(--ta-weight-regular);
  line-height: var(--ta-leading-tight);
  color: var(--ta-color-heading);
}

.ta-shopland__standfirst {
  margin: var(--ta-space-2xs) 0 0;
  max-width: 46ch;
  font-size: var(--ta-text-base);
  color: var(--ta-color-text-muted);
}

.ta-shopland__browse {
  margin-top: var(--ta-space-md);
}


/* --------------------------------------------------------------------------
   Section headings
   -------------------------------------------------------------------------- */

.ta-shopland__heading {
  margin: 0 0 var(--ta-space-md);
  font-family: var(--ta-font-display);
  font-size: var(--ta-text-xl);
  font-weight: var(--ta-weight-regular);
  color: var(--ta-color-heading);
}

/* The one deliberately expressive heading on the page — italic display, larger,
   used once so it reads as a break in rhythm rather than a style. */
.ta-shopland__display {
  margin: 0 0 var(--ta-space-md);
  font-family: var(--ta-font-display);
  font-size: var(--ta-text-2xl);
  font-style: italic;
  font-weight: var(--ta-weight-regular);
  color: var(--ta-color-heading);
}


/* --------------------------------------------------------------------------
   Tiles
   --------------------------------------------------------------------------
   Two arrangements from one component: a scroll-snap strip (categories) and a
   wrapping grid (collections).
   -------------------------------------------------------------------------- */

.ta-tiles {
  display: flex;
  gap: var(--ta-gap-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  /* Room for the focus ring, which would otherwise be clipped by the scroller. */
  padding-block: var(--ta-space-3xs);
  -webkit-overflow-scrolling: touch;
}

.ta-tiles__item {
  flex: 0 0 auto;
  width: 68vw;
  max-width: 20rem;
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .ta-tiles__item {
    width: 30%;
  }
}

/* Collections wrap instead of scrolling — there are only ever a handful and
   they are a destination, not a browse strip. */
.ta-tiles--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: visible;
}

@media (min-width: 768px) {
  .ta-tiles--grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.ta-tiles--grid .ta-tiles__item {
  width: auto;
  max-width: none;
}

.ta-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--ta-radius-image);
  text-decoration: none;
  background-color: var(--ta-color-bg-alt);
}

.ta-tile__media {
  display: block;
  /* Portrait. Reserved whether or not an image exists, so nothing shifts when
     photography is added. */
  aspect-ratio: 3 / 4;
  background-color: var(--ta-color-bg-alt);
}

.ta-tile--tall .ta-tile__media {
  aspect-ratio: 4 / 5;
}

.ta-tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ta-transition-slow);
}

.ta-tile:hover .ta-tile__img {
  transform: scale(1.03);
}

/*
 * The label sits ON the image, so it needs a ground of its own: a scrim that
 * is part of the tile rather than baked into a photograph. Without it the text
 * would be legible over a dark image and invisible over a pale one, and the
 * contrast would depend on whichever photo a merchandiser uploaded.
 */
.ta-tile::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  /*
   * Four stops, not two. A plain two-stop fade is weakest exactly where the
   * text sits, so its contrast depends on how pale the photograph happens to be
   * at the bottom of the frame — which is a merchandiser's decision, not a
   * designer's. Holding ~72-80% alpha across the bottom quarter guarantees the
   * label a dark ground even over a white product shot: white text measures
   * about 8:1 against the worst case, and the fade above keeps it from reading
   * as a solid bar.
   */
  background-image: linear-gradient(
    to top,
    rgb(0 0 0 / 80%) 0%,
    rgb(0 0 0 / 72%) 24%,
    rgb(0 0 0 / 32%) 62%,
    rgb(0 0 0 / 0%) 100%
  );
  pointer-events: none;
}

.ta-tile__label,
.ta-tile__count {
  position: relative;
  z-index: 1;
  display: block;
  color: var(--ta-palette-white);
}

.ta-tile__label {
  position: absolute;
  left: var(--ta-space-sm);
  right: var(--ta-space-sm);
  bottom: var(--ta-space-sm);
  font-family: var(--ta-font-display);
  font-size: var(--ta-text-lg);
  font-style: italic;
  line-height: var(--ta-leading-tight);
}

.ta-tile__count {
  position: absolute;
  left: var(--ta-space-sm);
  bottom: var(--ta-space-2xs);
  font-size: var(--ta-text-2xs);
  letter-spacing: var(--ta-tracking-wide);
  text-transform: uppercase;
  opacity: 0.82;
}

/* A tile with a count needs the label lifted clear of it. */
.ta-tile--tall .ta-tile__label {
  bottom: calc(var(--ta-space-sm) + var(--ta-space-md));
}


/* --------------------------------------------------------------------------
   Curated tabs
   --------------------------------------------------------------------------
   The tab strip is hidden in the markup and revealed by script. With no JS the
   panels simply stack, each under its own row heading — the content is never
   behind an interaction that might not run.
   -------------------------------------------------------------------------- */

.ta-shopland__curated {
  padding-block: var(--ta-section-y-tight);
}

.ta-tabs {
  display: flex;
  gap: var(--ta-space-md);
  overflow-x: auto;
  border-bottom: var(--ta-border-width) solid var(--ta-color-border);
  margin-bottom: var(--ta-space-xs);
  -webkit-overflow-scrolling: touch;
}

.ta-tabs__tab {
  flex: 0 0 auto;
  min-height: 2.75rem;
  padding: 0 0 var(--ta-space-2xs);
  border: 0;
  border-bottom: var(--ta-border-width-thick) solid transparent;
  background: none;
  font-family: var(--ta-font-body);
  font-size: var(--ta-text-2xs);
  font-weight: var(--ta-weight-medium);
  letter-spacing: var(--ta-tracking-wide);
  text-transform: uppercase;
  color: var(--ta-color-text-muted);
  cursor: pointer;
  transition: color var(--ta-transition);
}

.ta-tabs__tab:hover {
  color: var(--ta-color-text);
}

.ta-tabs__tab--current {
  color: var(--ta-color-text);
  border-bottom-color: var(--ta-color-accent);
}

/* The panel owns no padding of its own — the product row inside brings it. */
.ta-shopland__panel[hidden] {
  display: none;
}

/* Inside a tab panel the row heading is redundant with the tab itself, so it is
   removed from VIEW but kept for assistive tech and for the no-JS stack. */
.ta-shopland__curated[data-ta-tabs-ready] .ta-row--shopland .ta-section__title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ta-shopland__curated .ta-row--shopland {
  padding-block: var(--ta-space-sm) 0;
}

/*
 * With the row heading visually hidden the header band still reserved its full
 * height, leaving the carousel arrows stranded in ~100px of empty space between
 * the tab strip and the first card. Collapse the band to the height of the
 * controls it still contains, and pull the controls up beside the tabs.
 */
.ta-shopland__curated[data-ta-tabs-ready] .ta-row--shopland .ta-section__head {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 0;
  margin-bottom: var(--ta-space-2xs);
}

.ta-shopland__curated[data-ta-tabs-ready] .ta-row--shopland .ta-section__head > div:first-child {
  display: none;
}

.ta-shopland__curated[data-ta-tabs-ready] .ta-row--shopland {
  padding-block: 0;
}

/* The arrows overlap the tab strip's own bottom rule, so lift them level with it. */
@media (min-width: 768px) {
  .ta-shopland__curated[data-ta-tabs-ready] .ta-row--shopland .ta-section__head {
    margin-top: calc(var(--ta-space-md) * -1);
  }
}


/* --------------------------------------------------------------------------
   Editorial bands
   -------------------------------------------------------------------------- */

.ta-bands {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ta-gap-md);
}

@media (min-width: 768px) {
  .ta-bands {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ta-band__link {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--ta-radius-image);
  background-color: var(--ta-color-bg-alt);
  text-decoration: none;
}

.ta-band__media {
  display: block;
  aspect-ratio: 16 / 10;
  background-color: var(--ta-color-bg-alt);
}

.ta-band__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * The copy sits BELOW the image rather than over it. An editorial band carries
 * three lines of text, and three lines over an unknown photograph is where
 * overlay text stops being readable — the tiles above get away with one word.
 */
.ta-band__body {
  display: block;
  padding: var(--ta-space-sm) var(--ta-space-sm) var(--ta-space-md);
}

.ta-band__title {
  display: block;
  margin-top: var(--ta-space-3xs);
  font-family: var(--ta-font-display);
  font-size: var(--ta-text-lg);
  line-height: var(--ta-leading-tight);
  color: var(--ta-color-heading);
}

.ta-band__text {
  display: block;
  margin-top: var(--ta-space-3xs);
  font-size: var(--ta-text-sm);
  color: var(--ta-color-text-muted);
}

.ta-band__cta {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  margin-top: var(--ta-space-2xs);
  font-size: var(--ta-text-2xs);
  font-weight: var(--ta-weight-medium);
  letter-spacing: var(--ta-tracking-wide);
  text-transform: uppercase;
  color: var(--ta-color-accent-text);
  border-bottom: var(--ta-border-width) solid var(--ta-color-accent);
}

.ta-band__link:hover .ta-band__cta {
  color: var(--ta-color-link-hover);
  border-bottom-color: currentColor;
}


/* --------------------------------------------------------------------------
   Popular searches
   -------------------------------------------------------------------------- */

.ta-shopland__popular {
  padding-block: var(--ta-section-y-tight);
  background-color: var(--ta-color-bg-alt);
}

.ta-taglist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ta-space-2xs) var(--ta-space-sm);
}

.ta-taglist__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 24px floor on BOTH axes — WCAG 2.2 AA target size (2.5.8). A short label
     such as "Silk" is only ~23px wide, so height alone is not enough. */
  min-height: 1.5rem;
  min-width: 1.5rem;
  font-size: var(--ta-text-sm);
  color: var(--ta-color-text-muted);
  text-decoration: none;
}

.ta-taglist__link:hover {
  color: var(--ta-color-text);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}


/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ta-tile__img,
  .ta-tile:hover .ta-tile__img {
    transition: none;
    transform: none;
  }
}