/* ============================================================================
   SADER — COMPONENTS
   Generic, composable building blocks shared across every section.
   Depends on tokens.css + base.css. All units logical; all motion gated
   behind prefers-reduced-motion. Naming: BEM-ish (.block, .block__el,
   .block--modifier). Sections themselves use .s-<name> (see DESIGN.md).
   ============================================================================ */

/* ==========================================================================
   EYEBROW / KICKER — small tracked label with a leading brass rule.
   Use above a section title. Inherits color from context.
   ========================================================================== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1;
}
/* The brass tick before the label. In RTL it sits on the start side too. */
.eyebrow::before {
  content: "";
  inline-size: clamp(24px, 3vw, 44px);
  block-size: 1px;
  background-color: var(--accent);
  flex: 0 0 auto;
}
/* Centered variant gets a rule on both sides */
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: "";
  inline-size: clamp(24px, 3vw, 44px);
  block-size: 1px;
  background-color: var(--accent);
  flex: 0 0 auto;
}
/* Bare variant: no rule (for use inside cards/tiles) */
.kicker {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1;
}

/* Arabic eyebrows/kickers: uppercase has no effect on Arabic, so the 11px
   micro size that reads fine as Latin caps looks tiny here. Bump the size,
   drop uppercase, and cut the wide tracking (it breaks Arabic letter-joins). */
[dir="rtl"] .eyebrow,
[dir="rtl"] .kicker {
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
}

/* ==========================================================================
   SECTION HEAD — eyebrow + large serif title + optional lead paragraph.
   ========================================================================== */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-inline-size: 56rem;
  margin-block-end: clamp(var(--space-8), 5vw, var(--space-11));
}
.section-head__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-3);
  font-weight: var(--fw-semi);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--text);
}
/* A single emphasised word inside the title — italic brass (the LV/Diageo move) */
.section-head__title em,
.title-accent {
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--accent);
}
[dir="rtl"] .section-head__title em,
[dir="rtl"] .title-accent { font-style: normal; }

.section-head__lead {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--text-muted);
  max-inline-size: 46rem;
}
.section-head--center {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}
.section-head--center .eyebrow { justify-content: center; }

/* ==========================================================================
   BUTTONS
   .btn         — primary, solid brass on ink (the single loud CTA)
   .btn--ghost  — outline, brass border, fills on hover
   .btn--text   — quiet text link with animated arrow
   ========================================================================== */
.btn {
  --_bg: var(--accent);
  --_fg: var(--on-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding-block: var(--space-4);
  padding-inline: var(--space-7);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1;
  color: var(--_fg);
  background-color: var(--_bg);
  border: 1px solid var(--_bg);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
  will-change: transform;
}
.btn:hover {
  --_bg: var(--accent-strong);
  --_fg: var(--ink-brown);
}
.btn:active { transform: translateY(1px); }

.btn--ghost {
  --_bg: transparent;
  --_fg: var(--text);
  border-color: var(--accent);
}
.btn--ghost:hover {
  --_bg: var(--accent);
  --_fg: var(--ink-brown);
  transform: none;
}

/* Quiet text CTA with a directional chevron that nudges on hover.
   The arrow is a pseudo-element so it auto-mirrors in RTL. */
.btn--text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--accent);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1;
}
.btn--text::after {
  content: "";
  inline-size: 1.4em;
  block-size: 1px;
  background-color: currentColor;
  position: relative;
  transition: inline-size var(--dur-fast) var(--ease);
}
.btn--text .btn__arrow,
.btn--text::before { /* arrowhead glyph */ }
.btn--text:hover { color: var(--accent-deep); }
.btn--text:hover::after { inline-size: 2.2em; }
/* Flip the trailing rule to the inline-end automatically (already logical). */

/* Block-level button on small screens */
.btn--block { inline-size: 100%; }

/* On dark grounds the ghost text is parchment by token cascade — no override. */

/* ==========================================================================
   TAGS / PILLS — tiny labels. Oxblood (category) or brass (featured).
   Pills are the ONLY place a brand color fills a shape, and only at micro size.
   ========================================================================== */
.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1;
  padding-block: 0.45em;
  padding-inline: 0.9em;
  color: var(--tag-text);
  background-color: var(--tag-bg);
  border-radius: var(--radius-pill);
}
.tag--brass { background-color: var(--accent); color: var(--ink-brown); }
.tag--outline {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--line-brass);
}
.pill { /* alias used by filter rows */
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line-brass);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.pill:hover { border-color: var(--accent); }
.pill[aria-pressed="true"],
.pill.is-active {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--ink-brown);
}

/* ==========================================================================
   CARD — neutral base. Sections compose richer variants on top.
   Sharp corners, no shadow on dark grounds (the shadow is opt-in).
   ========================================================================== */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  overflow: hidden;
}
.card__media {
  position: relative;
  overflow: hidden;          /* clip the hover-zoom */
  background-color: var(--surface-2);
}
.card__media img,
.card__media video {
  inline-size: 100%;
  block-size: 100%;
  transition: transform var(--dur-slow) var(--ease);
}
.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
}
.card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  color: var(--text);
}
.card__meta {
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}
.card__text {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* Image-zoom-on-hover (Hermès rule: only the image scales, never the frame). */
@media (prefers-reduced-motion: no-preference) {
  .card:hover .card__media img,
  .card:hover .card__media video,
  .card:focus-within .card__media img { transform: scale(1.04); }
}

/* Optional lift (use ONLY on light grounds where shadow reads). */
.card--lift { transition: transform var(--dur-fast) var(--ease),
                          box-shadow var(--dur-fast) var(--ease); }
@media (prefers-reduced-motion: no-preference) {
  .card--lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
}

/* Glass card for use over video (Diageo 3-card pattern). */
.card--glass {
  background-color: rgba(43, 26, 15, 0.55);
  border-color: var(--line-brass);
  color: var(--text-on-dark);
}
@supports (backdrop-filter: blur(1px)) {
  .card--glass { backdrop-filter: blur(16px) saturate(160%); }
}
.card--glass .card__title { color: var(--text-on-dark); }
.card--glass .card__text  { color: var(--text-on-dark-soft); }

/* ==========================================================================
   DIVIDER — short brass rule used as an editorial ornament (NOT full-width).
   ========================================================================== */
.divider {
  inline-size: 80px;
  block-size: 1px;
  background-color: var(--accent);
  border: 0;
  margin-block: var(--space-6);
}
.divider--center { margin-inline: auto; }
.divider--faint { background-color: var(--line-brass); }
.divider--full {
  inline-size: 100%;
  background-color: var(--line-brass);
}
/* Animated grow-in (paired with .reveal) */
.divider.reveal { inline-size: 0; transition: inline-size var(--dur-base) var(--ease); }
.divider.reveal.is-in { inline-size: 80px; }
.divider--full.reveal.is-in { inline-size: 100%; }

/* Rotated section label (LV editorial signature). Place inside a relatively
   positioned section; it pins to the inline-start edge, rotated vertical. */
.rail-label {
  position: absolute;
  inset-block-start: var(--space-10);
  inset-inline-start: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-faint);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  transform-origin: center;
}
[dir="rtl"] .rail-label { transform: rotate(0deg); }
@media (max-width: 900px) { .rail-label { display: none; } }

/* ==========================================================================
   MARQUEE — infinite horizontal scroll (partner names / logos). Pauses on
   hover. Duplicate the track in markup for a seamless loop.
   ========================================================================== */
.marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  inline-size: max-content;
  gap: clamp(var(--space-7), 6vw, var(--space-10));
  align-items: center;
}
@media (prefers-reduced-motion: no-preference) {
  .marquee__track { animation: sader-marquee 42s linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
}
/* RTL: reverse direction so it scrolls naturally for the reading order. */
[dir="rtl"] .marquee__track { animation-direction: reverse; }

.marquee__item {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  letter-spacing: var(--tracking-tight);
  color: var(--text-muted);
  white-space: nowrap;
  flex: 0 0 auto;
}
@keyframes sader-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ==========================================================================
   LANGUAGE SWITCH — EN | AR pill with a brass border (header control).
   ========================================================================== */
.lang-switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-brass);
  border-radius: var(--radius-pill);
  overflow: hidden;
  font-family: var(--font-body);
}
.lang-switch__item {
  display: inline-flex;
  align-items: center;
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.lang-switch__item:hover { color: var(--text); }
.lang-switch__item[aria-current="true"],
.lang-switch__item.is-active {
  background-color: var(--accent);
  color: var(--ink-brown);
}
.lang-switch__sep {
  inline-size: 1px;
  align-self: stretch;
  background-color: var(--line-brass);
}

/* ==========================================================================
   REVEAL — scroll-in animation contract (driven by motion.js).
   Default (no JS / reduced motion): content is fully visible. JS adds .is-in.
   Variants set the start transform; .is-in returns everything to rest.
   ========================================================================== */
.reveal {
  opacity: 1;            /* progressive enhancement: visible by default */
}
@media (prefers-reduced-motion: no-preference) {
  .js-motion .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity var(--dur-reveal) var(--ease),
                transform var(--dur-reveal) var(--ease);
    will-change: opacity, transform;
  }
  .js-motion .reveal.is-in {
    opacity: 1;
    transform: none;
  }
  /* Directional / scale variants */
  .js-motion .reveal--up    { transform: translateY(40px); }
  .js-motion .reveal--right { transform: translateX(-32px); }
  .js-motion .reveal--left  { transform: translateX(32px); }
  .js-motion .reveal--scale { transform: scale(1.04); }
  .js-motion .reveal--fade  { transform: none; }
  .js-motion .reveal.is-in { transform: none; }

  /* Staggered children: motion.js sets --reveal-delay per child.
     Authors add [data-stagger] to the parent; children use .reveal. */
  .js-motion [data-stagger] > .reveal,
  .js-motion .reveal[style*="--reveal-delay"] {
    transition-delay: var(--reveal-delay, 0ms);
  }
}

/* Parallax target — motion.js sets the transform via --parallax-y. */
@media (prefers-reduced-motion: no-preference) {
  .js-motion [data-parallax] {
    will-change: transform;
    transform: translate3d(0, var(--parallax-y, 0), 0);
  }
}

/* ==========================================================================
   MISC editorial helpers
   ========================================================================== */
/* Big typographic year/numeral ornament (e.g. 1863). */
.numeral {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--accent);
  font-variant-numeric: lining-nums;
}

/* Pull quote — large display serif with a leading brass bar. */
.pullquote {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--fs-display-3);
  font-weight: var(--fw-regular);
  font-style: italic;
  line-height: 1.18;
  color: var(--text);
  padding-inline-start: var(--space-6);
  max-inline-size: 26ch;
}
.pullquote::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 0.15em 0.15em;
  inline-size: 3px;
  background-color: var(--accent);
}
[dir="rtl"] .pullquote { font-style: normal; }

/* Overlay gradient utility for media tiles. */
.media-overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay-grad);
  pointer-events: none;
}

/* Simple two-up / three-up grids for quick composition. */
.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}