/* ==========================================================================
   Project modal
   Figma "project gallery modal": a 1280px panel (the page container) over
   the dimmed page — close icon top right, the project image (1194 × 480),
   label, title, description, link, and a Previous / Next bar at the
   bottom. One <dialog> for every project (js/modules/project-modal.js).

   Height comes from the content: at 1920 × 1080 it adds up to Figma's
   923px. When the screen is shorter the content scrolls inside the panel,
   while the close button and the Previous / Next bar stay in view.
   Colours (Figma Inspect / reference): black panel with a 1px white 20%
   border, 8px corners (on request); backdrop black 80%; grey (#191919) bar with
   muted labels and arrows and a #868686 divider; muted "PROJECT" label.
   ========================================================================== */

@layer components {
  /* No page scrolling behind the open modal; the reserved gutter keeps the
     page from shifting where scrollbars take up space. */
  html:has(.project-modal[open]) {
    overflow: hidden;
    scrollbar-gutter: stable;
  }

  .project-modal {
    --modal-padding: clamp(1.5rem, 1.1042rem + 1.7593vw, 2.6875rem); /* 24 → 43: content inset (Figma 42 / 44) */
    --modal-space: clamp(3.5rem, 3.2083rem + 1.2963vw, 4.375rem); /* 56 → 70: above and below the content */

    max-inline-size: none;
    max-block-size: calc(100svh - 2 * var(--grid-gutter));
    padding: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--color-white) 20%, transparent);
    border-radius: var(--radius-medium); /* 8 (on request; Figma: square) */
    background-color: var(--color-bg);
    color: var(--color-text);
  }

  .project-modal[open] {
    display: flex;
    flex-direction: column;
  }

  .project-modal::backdrop {
    background-color: color-mix(in srgb, var(--color-black) 80%, transparent);
  }

  /* Close: the icon 13 / 16 from the panel's top right (Figma), in a 48px
     target; it stays in place while the content scrolls. */
  .project-modal__close {
    position: absolute;
    inset-block-start: 0.3125rem; /* 13 − 8 */
    inset-inline-end: 0.5rem; /* 16 − 8 */
    z-index: 1;
    display: grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-button);
    background: none;
    cursor: pointer;
  }

  .project-modal__body {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    padding: var(--modal-space) var(--modal-padding);
    scrollbar-width: none;
  }

  .project-modal__body::-webkit-scrollbar {
    display: none;
  }

  /* Any project image fills the Figma frame (1194 × 480), cropped. On a
     short screen it gives up height first (down to half), so the whole
     modal fits without scrolling; only on very small screens does the
     content still scroll (without a visible scrollbar). */
  .project-modal__image {
    flex: 0 1 auto;
    inline-size: 100%;
    min-block-size: calc(100cqi * 480 / 1194 / 2);
    aspect-ratio: 1194 / 480;
    object-fit: cover;
    border-radius: var(--radius-medium);
  }

  .project-modal__label {
    margin-block-start: var(--grid-gutter); /* 24 under the image */
    color: var(--color-text-muted);
    text-transform: uppercase;
  }

  .project-modal__title {
    margin-block-start: 0.5rem; /* 8 */
  }

  .project-modal__link {
    align-self: flex-start;
    margin-block-start: 1.0625rem; /* 17 */
  }

  /* Previous | Next: a grey bar of two halves, each centred, split by a
     line 42px tall in the 56px bar.
     Each label stays on one line: label, arrow and gap scale together with
     the bar width (18px text and 32px arrow at desktop, as in Figma, down
     to 10px text on the narrowest phones). */
  .project-modal__nav {
    container-type: inline-size;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-block: 0.4375rem; /* 7 */
    background-color: var(--color-bg-alt);
  }

  .project-modal__nav-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(8em / 18);
    min-block-size: 2.625rem; /* 42 */
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text-muted);
    font-size: clamp(0.625rem, 3.8cqi, var(--font-size-text));
    white-space: nowrap;
    text-transform: uppercase;
    cursor: pointer;
    transition: color var(--transition-duration) ease;
  }

  /* Pressed: label and arrow turn the primary colour at once, then ease
     back once released, so even a quick click shows. */
  .project-modal__nav-button:active:not(:disabled) {
    color: var(--color-accent);
    transition: none;
  }

  .project-modal__nav-button + .project-modal__nav-button {
    border-inline-start: 1px solid var(--color-border);
  }

  /* The arrow-left.svg asset used as a mask, so the arrow takes the label
     colour; mirrored for "next" (arrow-right.svg is the framed variant
     used on the cards). */
  .project-modal__nav-icon {
    flex: none;
    inline-size: calc(32em / 18); /* 32 at 18px */
    block-size: calc(32em / 18);
    background-color: currentColor;
    mask: url("../../assets/icons/arrow-left.svg") no-repeat center / contain;
  }

  .project-modal__nav-icon--next {
    scale: -1 1;
  }

  .project-modal__nav-button:disabled {
    opacity: 0.4;
    cursor: default;
  }
}