/* KSA (ksa.html) — the Saudi brands showcase ------------------------------ */
.ksa-head { padding-block-end: 0; }
.ksa-stats { display: flex; gap: clamp(20px, 3vw, 48px); }
.ksa-stats div { display: grid; gap: 6px; }
.ksa-stats b { font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem); font-weight: 600; letter-spacing: -0.05em; line-height: 1; }
.ksa-stats span { color: var(--fg-3); font-size: var(--fs-mono); }
.ksa-lead { max-inline-size: 52ch; margin-block-start: var(--sp-5); color: var(--fg-2); }
.ksa-credit { max-inline-size: 60ch; margin-block-start: var(--sp-4); color: var(--fg-3); font-size: 0.7rem; letter-spacing: 0.08em; line-height: 1.7; }
.ksa-credit a { color: var(--fg); }

/* the reel: tilted posts drifting left under the title */
.ksa-reel { position: relative; margin-block-start: var(--sp-8); padding-block: var(--sp-6) var(--sp-8); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ksa-reel__track { display: flex; gap: clamp(12px, 1.4vw, 20px); inline-size: max-content; transform: rotate(-3deg); animation: ksa-drift 80s linear infinite; }
.ksa-reel:hover .ksa-reel__track { animation-play-state: paused; }
.ksa-reel__post { position: relative; flex: none; inline-size: clamp(130px, 13vw, 200px); aspect-ratio: 3 / 4; overflow: hidden; border-radius: 14px; box-shadow: 0 24px 40px -24px rgba(0, 0, 0, 0.8); }
.ksa-reel__post:nth-child(even) { translate: 0 22px; }
@keyframes ksa-drift { to { transform: rotate(-3deg) translateX(-50%); } }

/* the brands: a staggered grid of tall covers; hovering flips to another post */
.ksa-index__head { position: relative; }
.ksa-hint { color: var(--fg-3); }
.ksa-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 56px) clamp(18px, 2.4vw, 36px); align-items: start; }
.ksa-grid > .kc:nth-child(3n + 2) { margin-block-start: clamp(60px, 9vw, 140px); }
.kc { display: grid; gap: var(--sp-4); }
.kc__media { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--r-lg); }
.kc__frame { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: var(--bg-2); }
.kc__frame .mesh.ph { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; transition: opacity 0.6s var(--ease-out), scale 1.2s var(--ease-out); }
.kc__alt { opacity: 0; }
.kc__media:hover .kc__alt, .kc__media:focus-visible .kc__alt { opacity: 1; }
.kc__media:hover .mesh.ph { scale: 1.04; }
.kc__media .vf { --vf-inset: 16px; z-index: 2; color: rgba(255, 255, 255, 0.85); opacity: 0; transition: opacity 0.5s; }
.kc__media:hover .vf { opacity: 1; }
.kc__count { position: absolute; z-index: 3; inset: 14px auto auto 14px; padding: 6px 11px; border-radius: var(--r-pill); background: rgba(14, 7, 38, 0.6); color: #fff; font-size: 0.62rem; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.kc__info { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
.kc__title { margin: 0; font-size: clamp(1.4rem, 1rem + 1.1vw, 2rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.kc__meta { color: var(--fg-3); white-space: nowrap; }
@media (max-width: 900px) {
  .ksa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ksa-grid > .kc:nth-child(3n + 2) { margin-block-start: 0; }
  .ksa-grid > .kc:nth-child(even) { margin-block-start: clamp(40px, 10vw, 90px); }
}
@media (max-width: 520px) {
  .ksa-grid { gap: 28px 14px; }
  .kc__info { flex-direction: column; gap: 4px; }
  .kc__title { font-size: 1.15rem; }
  .kc__meta { font-size: 0.6rem; }
  .ksa-stats { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .ksa-reel__track { animation: none; } }

/* the film card: a reel, not a set of stills */
.kc--film .kc__media { border-radius: var(--r-lg); box-shadow: 0 0 0 1px rgba(0, 132, 61, 0.55), 0 30px 60px -30px rgba(0, 132, 61, 0.55); }
.kc--film .kc__media::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; background: linear-gradient(to top, rgba(2, 26, 16, 0.6), transparent 45%); }
.kc__reel { position: absolute; inset: 0; z-index: 1; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s var(--ease-out); }
.kc--film.is-live .kc__reel { opacity: 1; }
.kc--film .kc__frame .mesh.ph { z-index: 0; }
.kc__badge { position: absolute; z-index: 3; inset: 16px auto auto 16px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: var(--r-pill); background: rgba(2, 26, 16, 0.78); color: #e6fff0; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.kc__play { position: absolute; z-index: 3; inset: 50% auto auto 50%; display: grid; place-items: center; inline-size: 68px; block-size: 68px; margin: -34px 0 0 -34px; border-radius: 50%; color: #fff; background: var(--ksa); box-shadow: 0 0 0 8px rgba(0, 132, 61, 0.25), 0 12px 30px -8px rgba(0, 132, 61, 0.9); transition: transform 0.5s var(--ease-spring), opacity 0.4s; }
.kc__play svg { margin-inline-start: 3px; }
.kc--film:hover .kc__play, .kc--film:focus-within .kc__play { transform: scale(1.12); }
.kc--film.is-live .kc__play { opacity: 0; }
.kc--film .kc__media:hover .mesh.ph { scale: 1.03; }
.kc--film .kc__title { color: #0e0726; }
.kc--film .kc__meta { color: #0a7a3c; font-weight: 600; }
.kc--film .kc__play { background: var(--ksa); -webkit-backdrop-filter: none; backdrop-filter: none; }