/* ==========================================================================
   AWAD SPORTS — INNER PAGES
   Page hero, breadcrumbs, splits, capability grids, process rail,
   FAQ, values, contact form, events empty-state.
   ========================================================================== */

/* ---- breadcrumbs ---- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: .5em;
  align-items: center;
  list-style: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-tag);
  letter-spacing: .06em;
  color: var(--ink-mute);
  margin-block-end: var(--sp-5);
}
html[lang="ar"] .crumbs { font-family: var(--font-ar); letter-spacing: 0; font-size: .85rem; }
.crumbs a { color: var(--ink-mute); }
.crumbs a:hover { color: var(--ink); }
.crumbs li:not(:last-child)::after { content: "/"; margin-inline-start: .5em; color: var(--line-strong); }
.crumbs [aria-current] { color: var(--red-strong); }

/* ---- page hero ---- */
.phero {
  padding-block: calc(var(--header-h) + var(--sp-7)) var(--sp-7);
  position: relative;
}
.phero h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -.02em;
  text-transform: uppercase;
  max-width: 16ch;
  text-wrap: balance;
}
html[lang="ar"] .phero h1 { letter-spacing: 0; line-height: 1.3; }
.phero h1 em { font-style: normal; color: var(--red-strong); }
.phero .lead {
  max-width: 42rem;
  margin-block-start: var(--sp-5);
  font-size: var(--fs-lead);
  color: var(--ink-soft);
}

/* page hero with side image */
.phero--media { padding-block-end: 0; }
.phero__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
}
.phero__img {
  border-radius: var(--rad-l) var(--rad-l) 0 0;
  overflow: hidden;
  box-shadow: var(--shadow-2);
  position: relative;
}
.phero__img img { inline-size: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.phero__img::after {
  content: "";
  position: absolute;
  inset-block-end: 0; inset-inline: 0;
  block-size: 4px;
  background: linear-gradient(90deg, var(--red), var(--gold));
}

/* ---- split (image + text) ---- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.split__media { border-radius: var(--rad-l); overflow: hidden; box-shadow: var(--shadow-2); }
.split__media img { inline-size: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.split--flip .split__media { order: 2; }
.split h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.015em;
}
html[lang="ar"] .split h2 { letter-spacing: 0; line-height: 1.35; }
.split p { margin-block-start: var(--sp-4); color: var(--ink-soft); }

/* ---- capability grid ---- */
.caps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
.caps--4 { grid-template-columns: repeat(4, 1fr); }
.cap {
  padding: var(--sp-5);
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--rad-m);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base);
}
.cap:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.cap .numchip { display: block; margin-block-end: var(--sp-3); }
.cap h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; margin-block-end: var(--sp-2); }
.cap p { color: var(--ink-soft); font-size: var(--fs-small); }

/* ---- process rail ---- */
.rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); counter-reset: step; }
.rail--3 { grid-template-columns: repeat(3, 1fr); }
.step {
  position: relative;
  padding: var(--sp-5);
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--rad-m);
  border-block-start: 3px solid var(--red);
}
.step:nth-child(2) { border-block-start-color: var(--gold); }
.step:nth-child(3) { border-block-start-color: var(--ink-mute); }
.step:nth-child(4) { border-block-start-color: var(--red); }
.step .numchip { display: block; margin-block-end: var(--sp-3); }
.step h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; margin-block-end: var(--sp-2); }
.step p { color: var(--ink-soft); font-size: var(--fs-small); }

/* ---- checklist (shared with training page) ---- */
.points { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); 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;
}

/* ---- levels (skating page) ---- */
.levels { display: grid; gap: var(--sp-3); }
.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; }

/* ---- FAQ ---- */
.faq { display: grid; gap: var(--sp-3); max-width: var(--wrap-tight); }
.faq details {
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--rad-m);
  padding: var(--sp-4) var(--sp-5);
}
.faq summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.3em; color: var(--red-strong); flex: none; transition: transform var(--dur-fast); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-block-start: var(--sp-3); color: var(--ink-soft); font-size: var(--fs-small); }

/* ---- values (about) ---- */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.value {
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--rad-m);
  background: var(--bg-raise);
  border-block-start: 3px solid var(--gold);
}
.value h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; margin-block-end: var(--sp-2); }
.value p { color: var(--ink-soft); font-size: var(--fs-small); }

/* ---- events empty state ---- */
.events-soon {
  max-width: var(--wrap-tight);
  margin-inline: auto;
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4.5rem);
  border: 1px dashed var(--line-strong);
  border-radius: var(--rad-l);
  background: var(--bg-raise);
}
.events-soon .numchip { margin-block-end: var(--sp-4); display: inline-block; }
.events-soon h2 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 800; }
.events-soon p { color: var(--ink-soft); margin-block: var(--sp-4) var(--sp-6); max-width: 34rem; margin-inline: auto; }

/* ---- contact ---- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.cform { display: grid; gap: var(--sp-4); }
.cform .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-tag);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-block-end: .45em;
}
html[lang="ar"] .field label { font-family: var(--font-ar); letter-spacing: 0; font-size: .85rem; }
.field input, .field select, .field textarea {
  inline-size: 100%;
  padding: .8em 1em;
  background: var(--bg-raise);
  border: 1px solid var(--line-strong);
  border-radius: var(--rad-s);
  color: var(--ink);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
  border-color: transparent;
}
.field textarea { min-block-size: 9rem; resize: vertical; }
.field .err {
  display: none;
  color: var(--red-strong);
  font-size: var(--fs-tag);
  font-weight: 600;
  margin-block-start: .4em;
}
.field.is-bad input, .field.is-bad select, .field.is-bad textarea { border-color: var(--red); }
.field.is-bad .err { display: block; }

.form-note {
  display: none;
  padding: var(--sp-4);
  border-radius: var(--rad-m);
  font-weight: 600;
  font-size: var(--fs-small);
}
.form-note.is-ok { display: block; background: var(--gold-soft); color: var(--gold-text); }
.form-note.is-bad { display: block; background: var(--red-soft); color: var(--red-strong); }

.cinfo {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--rad-l);
}
.cinfo h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; }
.cinfo p { color: var(--ink-soft); font-size: var(--fs-small); }
.cinfo .item { display: grid; gap: .2em; }
.cinfo .item b { font-family: var(--font-mono); font-size: var(--fs-tag); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; }
html[lang="ar"] .cinfo .item b { font-family: var(--font-ar); letter-spacing: 0; }

/* ---- related links strip ---- */
.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.related a {
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--rad-m);
  background: var(--bg-raise);
  font-family: var(--font-display);
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  transition: border-color var(--dur-fast), transform var(--dur-base) var(--ease-out);
}
.related a:hover { border-color: var(--red); transform: translateY(-3px); }
.related .arr { color: var(--red-strong); }
html[dir="rtl"] .related .arr { transform: scaleX(-1); display: inline-block; }

/* ---- 404 ---- */
.nf {
  min-height: 70vh;
  display: grid;
  place-content: center;
  text-align: center;
  padding-block: calc(var(--header-h) + var(--sp-7)) var(--sp-8);
}
.nf .code {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(5rem, 18vw, 11rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 3px var(--red);
}
.nf h1 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 800; margin-block: var(--sp-4) var(--sp-2); }
.nf p { color: var(--ink-soft); margin-block-end: var(--sp-6); }

/* ---- responsive ---- */
@media (max-width: 980px) {
  .phero__grid, .split, .split--flip, .contact-grid { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }
  .caps, .caps--4, .rail, .values, .related { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .caps, .caps--4, .rail, .values, .related, .points, .cform .row { grid-template-columns: 1fr; }
}