/* ---------------------------------------------------------------------------
   Apply modal — the interstitial between "Candidati ora" and the F6S form.

   A native <dialog>, so the browser supplies the modal semantics that would
   otherwise be hand-rolled JS: focus is trapped inside, the rest of the page
   is inert, Escape closes, and focus returns to the button that opened it.
   Everything here is presentation only; js/apply-modal.js just calls
   showModal().

   Layout rebuilt from a reference screenshot (the Hubble Acceleration
   Program's own F6S interstitial), per direct request: same structure and
   proportions, ILS colours and imagery. Measured off that screenshot:

     card            415 x ~507, square corners
     banner          227px tall (1.83:1), logo left, artwork bleeding right
     close button    18px square, overlapping the top-left corner OUTSIDE
                     the card, white glyph on a brand fill
     title           ~24px, centred, two lines
     notice          ~13px, centred, policy links in the accent colour
     button          pill, ~136 x 42, label + circled arrow
     spacing         33px above the title, 25px between blocks, 37px below

   This replaces the previous sizing entirely: the old card was 560px wide
   (784px with the +40% desktop scale) in landscape, with a square button
   matching the site's other CTAs. The reference is portrait and its button
   is a pill with an icon, so both of those earlier decisions are
   deliberately superseded here.
   --------------------------------------------------------------------------- */

/* Scroll lock. showModal() makes the page behind inert but not unscrollable.
   Keyed off the `open` attribute rather than set from JS on open/close,
   because the browser removes that attribute however the dialog goes away
   (Escape, close(), the close button), so the lock can never be left stuck on
   a path that didn't run our code. Where :has() is unsupported the page just
   scrolls behind the dialog, as it did before. */
html:has(.apply-modal[open]) { overflow: hidden; }

.apply-modal {
  /* Containing block for the close button, which sits outside the card. */
  position: relative;

  /* One factor drives the whole dialog — card, picture, logo, type, padding —
     so "a bit bigger" stays a single number here rather than a dozen edits
     that drift apart. Children inherit it. 1.32 is the reference's measured
     sizes at +20%, then +10% again, both by direct request.

     The Continue button is the one thing deliberately outside it: it has to
     stay the size of every other button on the site, so it cannot grow with
     the card. */
  --apply-scale: 1.32;

  /* 415px from the reference, scaled, and capped so it always fits a phone
     with the page's own gutter on each side. */
  width: min(calc(415px * var(--apply-scale)), 100% - var(--space-5) * 2);
  padding: 0;
  border: none;
  /* Square corners, as in the reference — deliberately not the site's usual
     8px card radius. */
  border-radius: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  /* Overflow stays visible so the close button can overhang the corner; the
     body below takes the scrolling instead. */
  overflow: visible;
  box-shadow: 0 11px 21px 1px rgba(140, 140, 140, 0.5);
}

.apply-modal::backdrop {
  /* Neutral scrim: the page behind is already cream and green, so a coloured
     one would fight the dialog's own green button. */
  background: rgba(28, 28, 28, 0.6);
}

/* Entrance. `dialog[open]` covers the whole element, backdrop included, and
   base.css already collapses animation duration under prefers-reduced-motion,
   so no separate reduced-motion rule is needed here. */
.apply-modal[open] {
  animation: apply-modal-in var(--dur-base) var(--ease-out);
}

.apply-modal[open]::backdrop {
  animation: apply-modal-backdrop-in var(--dur-base) var(--ease-standard);
}

@keyframes apply-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

@keyframes apply-modal-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- Image + logo ------------------------------------------------------- */

/* Per direct follow-up: the picture is a clean full-width block at the top of
   the card, and the wordmark sits BELOW it, centred — not laid over it as the
   reference does with its own artwork. The photograph is the fashion shot the
   hero slideshow already uses: bright, and legible even in a 415x172 crop,
   where the Ponte Vecchio skyline tried before read as a busy warm texture
   behind the logo.

   aspect-ratio rather than a fixed height, so the proportion survives on a
   phone, where the card is narrower. */
.apply-modal__media {
  aspect-ratio: 415 / 172;
  overflow: hidden;
}

.apply-modal__media img {
  width: 100%;
  height: 100%;
  /* Cover, biased upward: the faces sit in the top third of the frame, so a
     centred crop would cut them. */
  object-fit: cover;
  object-position: center 32%;
}

/* First element of the body, so it inherits the body's centring; sized in px
   because a wordmark has one right reading size, not a share of the card. */
.apply-modal__logo {
  width: calc(155px * var(--apply-scale));
  max-width: 68%;
  height: auto;
}

/* --- Close button ------------------------------------------------------- */

/* 18px square overhanging the top-left corner, per the reference. Outside the
   card, which is why the dialog keeps overflow: visible. The dialog can also
   be dismissed with Escape or by clicking the backdrop, but neither is
   discoverable — this is the visible way out. */
.apply-modal__close {
  position: absolute;
  top: calc(-9px * var(--apply-scale));
  left: calc(-9px * var(--apply-scale));
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(18px * var(--apply-scale));
  height: calc(18px * var(--apply-scale));
  padding: 0;
  border: none;
  border-radius: 0;
  background: var(--surface-eco);
  color: var(--ilp-cream-100);
  cursor: pointer;
  transition: var(--transition-control);
}

.apply-modal__close:hover { background: #61ce70; }

.apply-modal__close svg {
  width: calc(10px * var(--apply-scale));
  height: calc(10px * var(--apply-scale));
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}

/* --- Body --------------------------------------------------------------- */

.apply-modal__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(25px * var(--apply-scale));
  /* 22px above the logo, then the gap does the rest; 37px under the button,
     as measured on the reference. */
  padding:
    calc(22px * var(--apply-scale))
    calc(var(--space-6) * var(--apply-scale))
    calc(37px * var(--apply-scale));
  text-align: center;
  /* The card can outgrow a short window, and its corner button rules out
     scrolling the dialog itself, so the scrolling lives here. The picture
     above scales with the card, so its height comes out of the budget too. */
  max-height: calc(100vh - (172px * var(--apply-scale)) - var(--space-6));
  overflow-y: auto;
}

.apply-modal__title {
  margin: 0;
  max-width: 15ch; /* holds the two-line break of the reference */
  font-family: var(--type-display-family);
  /* Medium, not Regular: the reference's title carries visibly more weight
     than the site's section titles. */
  font-weight: var(--fw-medium);
  font-size: calc(24px * var(--apply-scale));
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

.apply-modal__notice {
  /* ch scales with the font size, so the line length stays ~34 characters
     however the dialog is scaled. */
  max-width: 34ch;
  font-size: calc(13px * var(--apply-scale));
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Accent-coloured, not underlined, as in the reference — the underline comes
   back on hover so the link is still unmistakably a link once reached. */
.apply-modal__notice a {
  color: var(--text-link);
  text-decoration: none;
}

.apply-modal__notice a:hover {
  color: var(--text-link-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Continue button ---------------------------------------------------- */

/* No sizing of its own, per direct request: the markup carries the site's
   shared .ils-btn .ils-btn--eco, so this is the same button as the header,
   the mobile menu and the hero — 40px tall, 16px Syne Bold at 1.6px
   tracking, 24px side padding, 4px radius, width from the label — and it
   stays that size whatever --apply-scale does to the card around it.

   This drops the reference's pill-with-a-circled-arrow, which the previous
   two passes had reproduced. Nothing to declare here beyond the reminder;
   the rule is kept so the intent is visible at the point someone would look
   for it. */

/* --- Mobile: the whole dialog on one screen ----------------------------- */

/* Per direct request. Two things were in the way on a phone:

   1. the scale. At 1.32 the card came to ~630px tall on a 320px-wide screen,
      which no phone shows in one go. Phones go back to the reference's own
      sizes (1.0) — the +20% and +10% were both asked for while looking at
      desktop, and the card there is 548px wide against 272-320px here.
   2. vh. On a phone 100vh is the screen with the browser's address bar
      IGNORED, so a card measured against it is taller than what is actually
      visible and ends up cut or scrolling. svh is the viewport WITH that bar
      showing — the small one — so budgeting against it means the dialog fits
      the screen the visitor really has, in either orientation.

   The picture is what absorbs the remaining pressure: it takes a share of the
   small viewport rather than a fixed ratio, between 96px (still reads as a
   photograph) and 140px. Everything else keeps its size.

   The dialog becomes a flex column so the body can shrink and, only on a
   screen too short even for this, scroll as a last resort instead of being
   clipped — nothing ever becomes unreachable. */
@media (max-width: 767px) {
  .apply-modal {
    --apply-scale: 1;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--space-5));  /* fallback */
    max-height: calc(100svh - var(--space-5));
  }

  .apply-modal__media {
    flex: 0 0 auto;
    aspect-ratio: auto;
    height: clamp(96px, 20svh, 140px);
  }

  .apply-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }
}

/* A phone held sideways is the hard case: ~375px of height, and the rule
   above still came to 411px, leaving the button below the fold (measured at
   667x375). The type stays where it is — it is what has to be read — and the
   space around it gives way instead: tighter gaps and padding, and a shorter
   picture. That brings it to ~338px, so the button is on screen again. */
@media (max-width: 767px) and (max-height: 480px) {
  .apply-modal__media { height: clamp(72px, 22svh, 96px); }

  .apply-modal__body {
    gap: 14px;
    padding: 14px var(--space-5) 18px;
  }
}