/* ==========================================================================
   LUXORA — /brands (owner: PAGE-BRANDS) — DESIGN §8.4
   Intro head · featured maison tiles (3:4) · A–Z rail · lettered directory.
   Tokens only. Logical properties only. The rail is always dir="ltr".
   ========================================================================== */

/* ---------- intro ---------- */
.brands__intro { padding-block: var(--section-y) 0; }
.brands__head { display: grid; gap: var(--sp-2); }
.brands__title { margin-block-start: var(--sp-2); }
.brands__lede {
  max-inline-size: 62ch;
  margin-block-start: var(--sp-4);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--ink-2);
}
html[lang="ar"] .brands__lede { max-inline-size: 34rem; font-weight: 300; }

/* ---------- featured tiles ---------- */
.brands__featured { padding-block: var(--sp-8) 0; }
@media (min-width: 1024px) { .brands__featured { padding-block-start: var(--sp-9); } }
.brands__tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--sp-3);
  row-gap: var(--sp-6);
}
@media (min-width: 768px) {
  .brands__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sp-5); row-gap: var(--sp-7); }
}
.tile { display: block; min-inline-size: 0; color: var(--ink); }
.tile__media {
  display: block;
  aspect-ratio: var(--tile-ratio);
  background: var(--surface-3);
  overflow: hidden;
}
.tile__img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 240ms var(--ease-out), transform var(--dur-6) var(--ease-out);
}
.tile__img.is-loaded { opacity: 1; }
.tile__img.is-fallback { object-fit: contain; padding: 20%; }
/* 32px hairline between image and label: rests in --line-strong, inks gold on hover */
.tile__rule {
  display: block;
  inline-size: var(--rule-tile-w);
  block-size: 1px;
  margin-block: var(--sp-4) var(--sp-3);
  background-image: linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--line-strong), var(--line-strong));
  background-repeat: no-repeat;
  background-size: 0% 1px, 100% 1px;
  background-position: var(--underline-origin) 0, 0 0;
  transition: background-size var(--dur-3) var(--ease-out);
}
.tile__name {
  display: block;
  font-family: var(--font-latin-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-display-sm);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
.tile__ar { display: block; margin-block-start: 2px; font-size: var(--fs-small); line-height: 1.65; color: var(--ink-2); }
.tile__count { display: block; margin-block-start: var(--sp-1); font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .tile:hover .tile__img { transform: scale(1.03); }
  .tile:hover .tile__rule { background-size: 100% 1px, 100% 1px; }
}
/* tile skeleton */
.tile--skeleton .tile__media { box-shadow: none; }
.tile--skeleton .tile__lines { display: grid; gap: var(--sp-2); padding-block-start: var(--sp-6); }
.tile--skeleton .skeleton--line { margin: 0; }

/* ---------- directory ---------- */
.brands__directory { padding-block: var(--section-y); }
.brands__dir-head { margin-block-end: var(--sp-5); }
@media (min-width: 1024px) { .brands__dir-head { margin-block-end: var(--sp-6); } }

/* A–Z rail: horizontal strip (sticky under the header); vertical at ≥1280 */
.rail {
  position: sticky;
  inset-block-start: var(--sticky-top);
  z-index: var(--z-sticky);
  margin-block-end: var(--sp-6);
  background: var(--bg);
  border-block: 1px solid var(--line);
}
.rail__list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.rail__list::-webkit-scrollbar { display: none; }
.rail__list > li { flex: none; }
.rail__letter {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-inline-size: 36px;
  block-size: var(--hit);
  padding-inline: 4px;
  font-family: var(--font-latin-body);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1;
  color: var(--ink-2);
  transition: color var(--dur-1);
}
.rail__letter:hover { color: var(--ink); }
.rail__letter--empty { color: var(--muted); opacity: .45; pointer-events: none; }
.rail__letter.is-current { color: var(--ink); }
.rail__letter.is-current::after {
  content: '';
  position: absolute;
  inset-inline: 10px;
  inset-block-end: 9px;
  block-size: 1px;
  background: var(--accent);
}

/* lettered groups: 12-col — letter cols 1–2, names cols 3–12 */
.brands__group {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--sp-4);
  padding-block: var(--sp-6);
  border-block-start: 1px solid var(--line);
  scroll-margin-block-start: calc(var(--sticky-top) + var(--hit) + var(--sp-4));
}
.brands__group:last-child { border-block-end: 1px solid var(--line); }
@media (min-width: 1024px) { .brands__group { padding-block: var(--sp-7); } }
.brands__letter {
  grid-column: 1 / -1;
  font-family: var(--font-latin-display);
  font-size: clamp(3.5rem, 2rem + 4vw, 6rem);   /* 56 → 96px */
  font-weight: 300;                                /* always ≥ 44px */
  line-height: .9;
  letter-spacing: var(--ls-display);
  color: var(--ink);
  opacity: .2;
  unicode-bidi: isolate;
  -webkit-font-smoothing: antialiased;
}
.brands__list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--sp-5);
  row-gap: var(--sp-4);
  align-content: start;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 768px) {
  .brands__letter { grid-column: 1 / 3; }
  .brands__list { grid-column: 3 / 13; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .brands__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.maison { display: block; padding-block: var(--sp-1); color: var(--ink); }
.maison__name {
  display: inline-block;
  padding-block-end: 2px;
  font-family: var(--font-latin-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-display-sm);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  color: var(--ink);
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: var(--underline-origin) 100%;
  transition: background-size var(--dur-3) var(--ease-out);
  -webkit-font-smoothing: antialiased;
}
.maison:hover .maison__name, .maison:focus-visible .maison__name { background-size: 100% 1px; }
.maison__ar { display: block; font-size: var(--fs-small); line-height: 1.65; color: var(--ink-2); }
.maison__count { display: block; margin-block-start: 2px; font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }

/* hover thumbnail of the maison's featured piece — desktop pointer, ≥1280 only */
.brands__thumb { display: none; }
@media (min-width: 1280px) and (hover: hover) and (pointer: fine) {
  .brands__list { grid-column: 3 / 10; }
  .brands__thumb {
    display: block;
    grid-column: 10 / 13;
    justify-self: end;
    inline-size: 200px;
    aspect-ratio: var(--card-ratio);
    background: var(--plate);
    box-shadow: var(--plate-inset);
    overflow: hidden;
    opacity: 0;
    transition: opacity var(--dur-4) var(--ease-in-out);
  }
  .brands__thumb-img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    padding: var(--card-pad);
    opacity: 0;
    transition: opacity 240ms var(--ease-out);
  }
  .brands__thumb-img[data-fit="cover"] { object-fit: cover; padding: 0; }
  .brands__thumb-img.is-loaded { opacity: 1; }
  .brands__group.has-thumb .brands__thumb { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .brands__thumb { display: none; } .brands__list { grid-column: 3 / 13; } }

/* vertical rail at ≥1280: a narrow column at the inline-start edge */
@media (min-width: 1280px) {
  .brands__directory-body {
    display: grid;
    grid-template-columns: var(--hit) minmax(0, 1fr);
    column-gap: var(--sp-7);
    align-items: start;
  }
  .rail {
    inset-block-start: calc(var(--sticky-top) + var(--sp-5));
    margin: 0;
    background: transparent;
    border: 0;
  }
  .rail__list { flex-direction: column; align-items: stretch; overflow: visible; }
  .rail__letter { block-size: 28px; min-inline-size: var(--hit); }
  .rail__letter.is-current::after { inset-inline: 14px; inset-block-end: 3px; }
  .brands__groups { min-inline-size: 0; }
}

/* group skeleton */
.brands__group--skeleton .brands__letter { block-size: .9em; inline-size: 1.2ch; opacity: 1; }
.brands__group--skeleton .skeleton--line { margin: 0; }
.brands__group--skeleton .brands__list > li { display: grid; gap: var(--sp-2); }

/* error state sits in the directory column */
.brands__error { grid-column: 1 / -1; }