/* Al Ghorrah 2027 teaser section, v2 (Figma section "Temp / Pre-launch").

   Self-contained so it can drop into the site shell: every rule is scoped to
   .gt-teaser and nothing touches html/body. The section is a size container
   with three layouts, by its own width: mobile below 640px (Figma frame
   402px), tablet 640-1023px (834px) and desktop from 1024px (1925px).

   Unlike v1, the text column is set at the design's own pixel sizes in every
   layout (it is already compact in the Figma frames, and shrinking it would
   only make it hard to read); the illustration scales with the width. */

@font-face {
  font-family: "QF";
  src: url("../fonts/QF-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "QF";
  src: url("../fonts/QF-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

.gt-teaser {
  --gt-bg: #1e1466;
  --gt-ink: #fff;
  --gt-field: #fff;
  --gt-field-border: #b9c4eb;
  --gt-field-ink: #111f48;
  --gt-button: #3223c9;
  --gt-button-hover: #4434de;

  container: gt-teaser / inline-size;
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--gt-bg);
  color: var(--gt-ink);
  font-family: "QF", "QF Arabic", Tahoma, sans-serif;
  font-weight: 400;
}

.gt-teaser *,
.gt-teaser *::before,
.gt-teaser *::after {
  box-sizing: border-box;
}

.gt-teaser :where(h1, p, form) {
  margin: 0;
}

:where(.gt-teaser img) {
  display: block;
  max-width: none;
}

.gt-teaser strong {
  font-weight: 700;
}

.gt-visually-hidden {
  position: absolute;
  inset-inline-start: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Mobile (Figma: 402 x 874) ------------------------------------------- */

/* On phones the illustration follows the text directly, and the site footer
   comes next. From tablet up the section fills the screen with the
   illustration on its bottom edge: under a site header, take its height off
   with --gt-teaser-min-height: calc(100svh - 90px); (`auto` sizes it to
   the content). */
.gt-teaser__layout {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  overflow: hidden;
}

.gt-teaser__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(362px, 100% - 40px);
  margin-inline: auto;
  padding-top: 34px;
  text-align: center;
}

/* Each layout shows one variant of the logos, title and rule; the hidden ones
   are lazy so they are never downloaded. */
.gt-logos__wide,
.gt-title__wide,
.gt-rule--wide {
  display: none;
}

.gt-logos img {
  width: 248px;
  height: 55px;
}

/* The titles are set in Foda and QF Serif, which aren't web fonts we have,
   so they are Figma's exports as outlines; the h1 carries the text as alt.
   The exports include the glyphs' overflow, so the margins put the glyphs
   where Figma has them rather than the text boxes. */
.gt-title {
  margin-top: 18px;
}

.gt-title img {
  width: min(284px, 100%);
  height: auto;
  margin-inline: auto;
}

.gt-teaser:lang(en) .gt-title {
  margin-top: 25px;
}

.gt-teaser:lang(en) .gt-title img {
  height: auto;
}

.gt-rule {
  width: 100%;
  max-width: 362px;
  height: auto;
  margin-top: 24px;
}

/* Date, venue, pitch and sign-up */

.gt-info {
  width: 100%;
  margin-top: 24px;
}

/* Date and venue on one bold line. On a narrow screen it breaks after the
   bullet, never inside the date or the venue. */
.gt-date {
  font-size: 18px !important;
  font-weight: 700;
  line-height: 1.4;
}

.gt-date__when,
.gt-date__where {
  white-space: nowrap;
}

/* Figma trims these paragraphs to cap height and baseline; browsers without
   text-box (Firefox, for now) just space them a little more loosely. */
.gt-tagline,
.gt-invite {
  font-size: 13px !important;
  text-box: trim-both cap alphabetic;
  text-wrap: pretty;
}

.gt-tagline {
  margin-top: 24px;
  line-height: 20px;
}

.gt-invite {
  margin-top: 16px;
  line-height: 1.4;
}

.gt-teaser:lang(en) .gt-invite {
  line-height: 1.2;
}

.gt-signup {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-top: 16px;
  margin-inline: auto;
}

/* The phone field: 10px on the left, 14px on the right in both languages,
   as in the Figma frames. */
.gt-signup__row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 50px;
  padding: 10px 14px 10px 10px;
  border: 0.9px solid var(--gt-field-border);
  border-radius: 7.192px;
  background: var(--gt-field);
}

.gt-signup__row:focus-within {
  outline: 2px solid var(--gt-ink);
  outline-offset: 2px;
}

.gt-signup__email {
  flex: 1;
  min-width: 0;
  align-self: stretch;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gt-field-ink);
  font: inherit;
  font-size: var(--gt-email-size, 14.384px);
  line-height: 1.4;
  text-align: start;
}

/* Addresses are typed left to right even on the Arabic page; keep them on
   the right edge there, where the placeholder sits in the design. */
.gt-teaser[dir="rtl"] .gt-signup__email {
  text-align: right;
}

.gt-signup__email:focus {
  outline: none;
}

.gt-signup__email::placeholder {
  color: var(--gt-field-ink);
  opacity: 0.6;
}

/* iOS zooms into inputs set smaller than 16px. */
@media (pointer: coarse) {
  .gt-signup__email {
    font-size: 16px;
  }
}

.gt-signup__submit {
  flex: none;
  height: 30px;
  padding: 0 10.788px;
  border: 0;
  border-radius: 7.192px;
  background: var(--gt-button);
  color: var(--gt-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.gt-signup__submit:hover {
  background: var(--gt-button-hover);
}

.gt-signup__submit:focus-visible {
  outline: 2px solid var(--gt-button);
  outline-offset: 2px;
}

.gt-signup[aria-busy="true"] .gt-signup__submit {
  opacity: 0.7;
  cursor: progress;
}

/* Out of the flow, so a message doesn't push the sponsors down. */
.gt-signup__status {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
}

.gt-sponsors {
  width: 309px;
  max-width: 100%;
  height: auto;
  margin-top: 32px;
}

/* Illustration. The still is always there; js/teaser.js lays the looping
   video over it once the page has loaded and the video is actually playing.
   --gt-art names the cut this layout uses: phones have their own, tablet and
   desktop share the wide one. */

.gt-art {
  --gt-art: mobile;

  position: relative;
  z-index: 0;
  flex: none;
  align-self: center;
  width: calc(100cqw * 403 / 402);
  aspect-ratio: 403 / 243;
  direction: ltr;
  pointer-events: none;
  /* A soft top edge: the video's indigo is the page's, but should a browser
     render it a shade off, there is no line where the two meet. */
  -webkit-mask-image: linear-gradient(transparent, #000 4%);
  mask-image: linear-gradient(transparent, #000 4%);
}

.gt-art__still,
.gt-art__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gt-art__video {
  opacity: 0;
}

.gt-art.is-playing .gt-art__video {
  opacity: 1;
}

.gt-art.is-playing .gt-art__still {
  visibility: hidden;
}

/* ---- Tablet (Figma: 834 x 1194) ------------------------------------------ */

/* Tablet and desktop share one text column. */
@container gt-teaser (min-width: 640px) {
  .gt-teaser__layout {
    min-height: var(--gt-teaser-min-height, 100svh);
  }

  .gt-teaser__inner {
    width: min(538px, 100% - 40px);
    margin-bottom: auto; /* spare height goes here, keeping the art at the bottom */
    padding-top: 0;
  }

  .gt-logos__compact,
  .gt-title__mobile,
  .gt-rule--mobile {
    display: none;
  }

  .gt-logos__wide,
  .gt-title__wide,
  .gt-rule--wide {
    display: block;
  }

  .gt-logos img {
    width: 306px;
    height: 68px;
  }

  .gt-title {
    margin-top: 17px;
  }

  .gt-title img {
    width: 538px;
    height: 178px;
  }

  .gt-teaser:lang(en) .gt-title {
    margin-top: 64px;
  }

  .gt-teaser:lang(en) .gt-title img {
    height: 121px;
  }

  .gt-rule {
    max-width: 538px;
  }

  .gt-info {
    width: 535px;
    max-width: 100%;
  }

  .gt-date {
    font-size: 24px !important;
  }

  .gt-tagline {
    margin-top: 22px;
    font-size: 16px !important;
    line-height: 24.674px;
  }

  .gt-invite {
    margin-top: 21.15px;
    font-size: 16px !important;
  }

  /* The larger field, its button filling the height. */
  .gt-signup {
    --gt-email-size: 12.675px;
    width: 405.61px;
    max-width: 100%;
    margin-top: 21.15px;
  }

  .gt-signup__row {
    gap: 0;
    height: 50.7px;
    padding: 6.338px;
    border-width: 0.792px;
    border-radius: 6.338px;
  }

  .gt-signup__email {
    padding-inline: 12.675px;
  }

  .gt-signup__submit {
    height: 100%;
    padding-inline: 9.506px;
    border-radius: 6.338px;
    font-size: 11.091px;
  }

  .gt-sponsors {
    width: 432.33px;
    margin-top: 48px;
  }

  .gt-art {
    --gt-art: wide;
    width: calc(100cqw * 1287 / 834);
    aspect-ratio: 1287 / 309;
    margin-top: 24px;
    translate: calc(100cqw * -16.5 / 834) 0;
  }
}

/* ---- Desktop (Figma: 1925 x 1141) ---------------------------------------- */

@container gt-teaser (min-width: 1024px) {
  .gt-teaser:lang(ar) .gt-teaser__inner {
    padding-top: 6px;
  }
}

/* A 13-inch iPad in portrait is about 1032px. Keep the tablet crop there.
   The desktop scene starts once the screen is wider than that portrait. */
@container gt-teaser (min-width: 1200px) {
  /* The scene runs edge to edge and, on wide screens, rises behind the
     sponsors as in the Figma frame. The figures stand either side, so the
     overlap only starts once the screen is wide enough for the sponsors to
     clear them, and grows from there. */
  .gt-art {
    width: calc(100cqw * 2005 / 1925);
    aspect-ratio: 2005 / 474;
    margin-top: calc(-1 * clamp(0px, (100cqw - 1300px) * 0.29, 181px));
    translate: none;
  }
}