/* S13 · Contact us (#contact) — THE FEED homepage, design.md Part III.
   FINAL-SPEC §4 S13: the page's end screen. A --slab panel (black in BOTH
   themes, like a video's end frame) with the profile's slide-21 yellow bar
   across its foot; the end-cards sit on the bar as black pills. */

.endscreen {
  display: grid;
  grid-template-areas: "brand" "head" "next" "bar";
  overflow: clip;
  border-radius: var(--r-lg);
  background: var(--slab);
  color: var(--on-slab);
  box-shadow: var(--sh-2);
  --pad: clamp(var(--s-5), 4vw, var(--s-8));
}
:root[data-theme="dark"] .endscreen {
  outline: 1px solid var(--line);
}
.endscreen__top {
  display: contents;
}
.endscreen__brand {
  grid-area: brand;
  padding: var(--pad) var(--pad) 0;
}
.endscreen__head {
  grid-area: head;
  justify-self: start;
  max-inline-size: 100%;
  display: grid;
  gap: var(--s-2);
  padding: var(--s-7) var(--pad) var(--s-6);
}
.endscreen__h2 {
  color: var(--on-slab);
}
/* capped: the vw ramp is multiplied again by the 4K zoom on .wrap */
.page-home .endscreen__h2 {
  font-size: min(var(--fs-h2), 5.5rem);
}
.page-home:lang(ar) .endscreen__h2 {
  font-size: min(var(--fs-ar-h2), 6rem);
}
.endscreen__head .echo {
  color: color-mix(in srgb, var(--on-slab) 72%, transparent);
}
.endnext {
  grid-area: next;
  margin-block: 0 var(--pad);
  margin-inline: var(--pad);
}
.endscreen__bar-zone {
  grid-area: bar;
}

/* ── the top: the brand + "Up next" ── */
.endscreen__brand {
  display: grid;
  justify-items: start;
  gap: var(--s-3);
}
.endscreen__mark {
  display: block;
  inline-size: clamp(120px, 22vw, 260px);
  color: var(--on-slab);
}
.endscreen__mark svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
}
.endscreen__kicker {
  margin: 0;
  color: var(--yellow);
}

.endnext {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-block-size: 44px;
  padding: var(--s-2);
  border-radius: var(--r-md);
  color: var(--on-slab);
  text-decoration: none;
  transition: transform var(--d-xs) var(--ease-out);
}
.endnext__thumb {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  inline-size: clamp(112px, 30vw, 200px);
  aspect-ratio: 16 / 9;
  overflow: clip;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--on-slab) 12%, transparent);
  outline: 1px solid color-mix(in srgb, var(--on-slab) 22%, transparent);
  outline-offset: -1px;
}
.endnext__poster {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: 0.7;
}
.endnext__play {
  position: relative;
  inline-size: 34%;
  block-size: auto;
  fill: var(--on-slab);
  transition: transform var(--d-sm) var(--ease-pop);
}
.endnext__bar {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 4px;
  background: var(--yellow);
  transform: scaleX(0.38);
  /* media/transport UI never mirrors: the progress fills left → right on /ar
     too, like the cover story segments and the skip transport bar */
  transform-origin: left center;
  transition: transform 1.2s linear;
}
.endnext__txt {
  display: grid;
  gap: 2px;
  min-inline-size: 0;
}
.endnext__kick {
  color: var(--yellow);
}
.endnext__label {
  font-family: var(--font-display);
  font-weight: 760;
  font-stretch: 110%;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.1;
  text-transform: uppercase;
}
.endnext__sub {
  font-family: var(--font-text);
  font-size: var(--fs-small);
  color: color-mix(in srgb, var(--on-slab) 76%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .endnext:hover .endnext__bar {
    transform: scaleX(1);
  }
  .endnext:hover .endnext__play {
    transform: scale(1.12);
  }
}
.endnext:focus-visible .endnext__bar {
  transform: scaleX(1);
}

/* ── the slide-21 yellow bar + the end-cards ── */
.endscreen__bar-zone {
  position: relative;
  isolation: isolate;
  padding: clamp(var(--s-4), 3vw, var(--s-6));
}
.endscreen__bar {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--yellow);
}
.js-motion .endscreen__bar[data-fx="wipe"] {
  transition-duration: 800ms;
}
.endcards {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.endcards > li {
  display: grid;
}
.endcard {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  min-block-size: 64px;
  padding: var(--s-3) var(--s-4);
  overflow: clip;
  border-radius: var(--r-md);
  background: var(--slab);
  color: var(--on-slab);
  text-decoration: none;
  transition: transform var(--d-xs) var(--ease-out);
}
/* the "next video" countdown line along the card's foot (hover/focus) */
.endcard::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 3px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 200ms var(--ease-out);
}
.endcard:dir(rtl)::after {
  transform-origin: right center;
}
.endcard__ico {
  inline-size: 28px;
  block-size: 28px;
  fill: none;
  stroke: var(--yellow);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.endcard__rec {
  display: grid;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  border: 2px solid var(--yellow);
  border-radius: 50%;
}
.endcard__rec i {
  inline-size: 12px;
  block-size: 12px;
  border-radius: 50%;
  background: var(--red);
  transition: border-radius 180ms var(--ease-out);
}
.endcard__txt {
  display: grid;
  gap: 2px;
  min-inline-size: 0;
}
.endcard__label {
  font-family: var(--font-display);
  font-weight: 760;
  font-stretch: 110%;
  font-size: 1.125rem;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.endcard__sub {
  font-family: var(--font-text);
  font-size: var(--fs-small);
  line-height: 1.35;
  color: color-mix(in srgb, var(--on-slab) 76%, transparent);
}
.endcard__phone .num {
  font-family: var(--font-ui);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--on-slab);
  white-space: nowrap;
}
.endcard__arrow {
  inline-size: 22px;
  block-size: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: scaleX(var(--dir));
  transition: transform var(--d-sm) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .endcard:hover::after {
    transform: scaleX(1);
    transition: transform 1.2s linear;
  }
  .endcard:hover .endcard__arrow {
    transform: translateX(calc(4px * var(--dir))) scaleX(var(--dir));
  }
  .endcard:hover .endcard__rec i {
    border-radius: 3px;
  }
  .endcard:hover {
    transform: translateY(-2px);
  }
}
.endcard:focus-visible::after {
  transform: scaleX(1);
  transition: transform 1.2s linear;
}
.endcard:active {
  transform: scale(0.98);
}

/* Arabic type on the panel */
.contact:lang(ar) .endnext__label,
.contact:lang(ar) .endcard__label {
  font-family: var(--font-ar-display);
  font-weight: 700;
  font-stretch: normal;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.35;
}
.contact:lang(ar) .endnext__sub,
.contact:lang(ar) .endcard__sub {
  font-family: var(--font-ar-text);
  font-size: 0.9375rem;
}
.contact:lang(ar) .endcard__phone {
  font-size: var(--fs-small);
}

@media (min-width: 600px) {
  .endscreen {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "brand next" "head next" "bar bar";
  }
  .endnext {
    align-self: start;
    margin-block: var(--pad) 0;
    margin-inline: 0 var(--pad);
    flex-direction: column;
    align-items: stretch;
    max-inline-size: 240px;
  }
  .endnext__thumb {
    inline-size: 100%;
  }
}

/* ≥900: the panel is a 16:9 frame (max 1200px, centred), the end-cards a row */
@media (min-width: 900px) {
  .endscreen {
    max-inline-size: 1200px;
    aspect-ratio: 16 / 9;
    margin-inline: auto;
  }
  .endscreen__head {
    align-self: end;
    padding-block-end: var(--s-7);
  }
  .endnext {
    max-inline-size: 280px;
  }
  .endcards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-4);
  }
  .endcard {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr;
    align-items: start;
    row-gap: var(--s-5);
    min-block-size: 140px;
    padding: var(--s-5);
  }
  .endcard__ico,
  .endcard__rec {
    grid-column: 1;
    grid-row: 1;
  }
  .endcard__arrow {
    grid-column: 2;
    grid-row: 1;
  }
  .endcard__txt {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: end;
  }
}
@media (min-width: 1280px) {
  .endcard__label {
    font-size: var(--fs-h3);
  }
  .contact:lang(ar) .endcard__label {
    font-size: var(--fs-ar-h3);
  }
  .endcard__sub {
    font-size: 1rem;
  }
}