/* ==========================================================================
   AWAD SPORTS — HOMEPAGE
   ========================================================================== */

/* ---- HERO ---- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-block: calc(var(--header-h) + var(--sp-6)) var(--sp-8);
}
.hero__bg {
  position: absolute; inset: 0; z-index: -1;
}
.hero__bg img {
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  object-position: 62% 40%;
  transform: scale(calc(1.06 + var(--sy) * 0.1));
}
/* veil: keeps type readable in both themes and melts the image into the page */
.hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(200deg, rgba(8,9,12,.18) 0%, rgba(8,9,12,.62) 62%, rgba(8,9,12,.86) 100%),
    linear-gradient(to bottom, transparent 55%, var(--bg) 130%);
}

.hero .wrap { position: relative; }

.hero__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-tag);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #E8C989;
  margin-block-end: var(--sp-4);
}
html[lang="ar"] .hero__kicker { font-family: var(--font-ar); letter-spacing: .04em; font-size: .9rem; }

.hero h1 {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 900;
  font-style: italic;
  line-height: .96;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: #FFFFFF;
  display: grid;
  max-width: 14ch;
}
html[lang="ar"] .hero h1 { font-style: normal; line-height: 1.25; letter-spacing: 0; }
.hero h1 .w2 {
  color: transparent;
  -webkit-text-stroke: 2px #FFFFFF;
}
.hero h1 .w3 { color: var(--red); -webkit-text-stroke: 0; }
[data-theme="dark"] .hero h1 .w3 { color: #FF4D55; }

.hero__lead {
  max-width: 34rem;
  margin-block: var(--sp-5) var(--sp-6);
  font-size: var(--fs-lead);
  color: #E4E6EA;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.hero__cta .btn--ghost { color: #FFFFFF; box-shadow: inset 0 0 0 2px #FFFFFF; }
.hero__cta .btn--ghost:hover { background: rgba(255,255,255,.12); }

.hero__scroll {
  position: absolute;
  inset-inline-end: clamp(1rem, 4vw, 2.25rem);
  inset-block-end: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  color: #C9CCD3;
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}
html[lang="ar"] .hero__scroll { font-family: var(--font-ar); letter-spacing: .1em; font-size: .75rem; }
.hero__scroll::after {
  content: "";
  inline-size: 2px;
  block-size: 3.4rem;
  background: linear-gradient(to bottom, var(--red), transparent);
  animation: scrollhint 2.2s var(--ease-out) infinite;
}
@keyframes scrollhint {
  0% { transform: scaleY(.2); transform-origin: top; opacity: 0; }
  35% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); transform-origin: top; opacity: 0; }
}

/* ---- SERVICES MOSAIC (deliberately non-identical cards) ---- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
    "sk sk sk sk sk tr tr tr tr tr tr tr"
    "sk sk sk sk sk eq eq eq eq to to to";
  gap: var(--sp-5);
}
.svc--skate { grid-area: sk; display: flex; flex-direction: column; }
.svc--train { grid-area: tr; }
.svc--equip { grid-area: eq; }
.svc--tour  { grid-area: to; }

.svc--skate .card__media { aspect-ratio: 4 / 3; flex: 1; }
.svc--skate .card__media img { block-size: 100%; }

/* training: horizontal media card */
.svc--train { display: grid; grid-template-columns: 1.1fr 1fr; }
.svc--train .card__media { order: 2; min-block-size: 100%; }
.svc--train .card__body { order: 1; display: flex; flex-direction: column; justify-content: center; }
html[dir="rtl"] .svc--train .card__media { order: 2; }

/* equipment: type-led card with gold frame accent, no photo */
.svc--equip .card__body { padding-block: var(--sp-6); }
.svc--equip {
  background:
    linear-gradient(var(--bg-raise), var(--bg-raise)) padding-box,
    linear-gradient(135deg, var(--gold), transparent 60%) border-box;
  border: 1px solid transparent;
}
.svc--equip .cats {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin-block-start: var(--sp-3);
  padding: 0; list-style: none;
}
.svc--equip .cats li {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  padding: .3em .7em;
  border: 1px solid var(--line-strong);
  border-radius: var(--rad-pill);
  color: var(--ink-mute);
}
html[lang="ar"] .svc--equip .cats li { font-family: var(--font-ar); font-size: .8rem; }

/* tournament: dark card with arena image */
.svc--tour { position: relative; background: #101216; border-color: #262A33; }
.svc--tour .card__media { position: absolute; inset: 0; }
.svc--tour .card__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,9,12,.9) 25%, rgba(8,9,12,.35));
}
.svc--tour .card__body {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-block-size: 15rem;
  color: #F2F3F5;
}
.svc--tour .card__body p { color: #C3C7CE; }
.svc--tour .link-more { color: #FF8A90; }

.svc-grid .link-more { margin-block-start: var(--sp-3); }

/* ---- FEATURE SPLITS ---- */
.feat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.feat__media {
  position: relative;
  border-radius: var(--rad-l);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.feat__media img { inline-size: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.feat__media::after {
  content: "";
  position: absolute;
  inset-block-end: 0; inset-inline: 0;
  block-size: 4px;
  background: linear-gradient(90deg, var(--red), var(--gold));
}
.feat--flip .feat__media { order: 2; }
.feat h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.015em;
  text-wrap: balance;
}
html[lang="ar"] .feat h2 { letter-spacing: 0; line-height: 1.35; }
.feat .lead { margin-block: var(--sp-4) var(--sp-5); color: var(--ink-soft); }

/* level rows (skating) */
.levels { display: grid; gap: var(--sp-3); margin-block-end: var(--sp-6); }
.level {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  align-items: baseline;
  padding: var(--sp-4);
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--rad-m);
  border-inline-start: 3px solid var(--red);
}
.level:nth-child(2) { border-inline-start-color: var(--gold); }
.level:nth-child(3) { border-inline-start-color: var(--ink-mute); }
.level h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; }
.level p { color: var(--ink-soft); font-size: var(--fs-small); grid-column: 2; }

/* checklist chips (training) */
.points { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-block-end: var(--sp-6); padding: 0; list-style: none; }
.points li {
  display: flex; align-items: center; gap: .6em;
  font-weight: 600; font-size: var(--fs-small);
  padding: .8em 1em;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--rad-m);
}
.points li::before {
  content: "";
  inline-size: .55em; block-size: .55em;
  background: var(--red);
  transform: skewX(-12deg);
  flex: none;
}

/* ---- EQUIPMENT CATEGORY TILES ---- */
.equip-tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-4);
  margin-block-start: var(--sp-6);
}
.equip-tile {
  position: relative;
  padding: var(--sp-5) var(--sp-4);
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--rad-m);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base);
}
.equip-tile:hover { transform: translateY(-4px); border-color: var(--gold); }
.equip-tile .numchip { display: block; margin-block-end: var(--sp-3); }
.equip-tile h3 { font-family: var(--font-display); font-size: 1rem; font-weight: 800; line-height: 1.2; }
.equip-tile::after {
  content: "";
  position: absolute;
  inset-inline-start: 0; inset-block-end: 0;
  inline-size: 100%; block-size: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: var(--tile-origin, left);
  transition: transform var(--dur-base) var(--ease-out);
}
html[dir="rtl"] .equip-tile::after { --tile-origin: right; }
.equip-tile:hover::after { transform: scaleX(1); }
.equip-note {
  margin-block-start: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-tag);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-text);
}
html[lang="ar"] .equip-note { font-family: var(--font-ar); letter-spacing: 0; font-size: .85rem; }

/* ---- TOURNAMENT PANEL ---- */
.tour-panel {
  position: relative;
  border-radius: var(--rad-l);
  overflow: hidden;
  color: #F2F3F5;
  background: #101216;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  min-block-size: 26rem;
}
.tour-panel__bg { position: absolute; inset: 0; }
.tour-panel__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; opacity: .55; }
.tour-panel__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to inline-end, rgba(8,9,12,.92) 30%, rgba(8,9,12,.45));
}
.tour-panel__body {
  position: relative; z-index: 1;
  padding: clamp(2rem, 5vw, 3.5rem);
  display: flex; flex-direction: column; justify-content: center;
}
.tour-panel__body .kicker { color: #FF8A90; }
.tour-panel__body .kicker::before { background: #FF4D55; }
.tour-panel h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.08;
}
html[lang="ar"] .tour-panel h2 { line-height: 1.35; }
.tour-panel .lead { margin-block: var(--sp-4) var(--sp-5); color: #C3C7CE; }
.tour-feats { display: grid; gap: var(--sp-2); padding: 0; list-style: none; margin-block-end: var(--sp-6); }
.tour-feats li { display: flex; align-items: center; gap: .6em; font-weight: 600; color: #E4E6EA; }
.tour-feats li::before {
  content: "";
  inline-size: 1.1em; block-size: 2px;
  background: var(--gold);
  transform: skewX(-24deg);
  flex: none;
}

/* ---- ABOUT TEASER ---- */
.about-teaser { text-align: center; max-width: 44rem; margin-inline: auto; }
.about-teaser h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.1;
}
html[lang="ar"] .about-teaser h2 { line-height: 1.4; }
.about-teaser .lead { margin-block: var(--sp-4) var(--sp-6); color: var(--ink-soft); font-size: var(--fs-lead); }

/* ---- RESPONSIVE ---- */
@media (max-width: 980px) {
  .svc-grid {
    grid-template-areas:
      "sk sk sk sk sk sk sk sk sk sk sk sk"
      "tr tr tr tr tr tr tr tr tr tr tr tr"
      "eq eq eq eq eq eq to to to to to to";
  }
  .feat, .feat--flip { grid-template-columns: 1fr; }
  .feat--flip .feat__media { order: 0; }
  .equip-tiles { grid-template-columns: repeat(2, 1fr); }
  .tour-panel { grid-template-columns: 1fr; }
  .tour-panel__bg::after { background: linear-gradient(to top, rgba(8,9,12,.92) 45%, rgba(8,9,12,.5)); }
}
@media (max-width: 640px) {
  .svc-grid {
    grid-template-areas: "sk sk sk sk sk sk sk sk sk sk sk sk" "tr tr tr tr tr tr tr tr tr tr tr tr" "eq eq eq eq eq eq eq eq eq eq eq eq" "to to to to to to to to to to to to";
  }
  .svc--train { grid-template-columns: 1fr; }
  .svc--train .card__media { order: 0; aspect-ratio: 16 / 9; }
  .points { grid-template-columns: 1fr; }
  .hero__scroll { display: none; }
}