/* The deck's mechanics only: one slide per screen, sized by the screen, with its layout, controls and print. Colours,
   type, buttons, statuses and mocks come from style.css. Declared after style.css's layers, so it wins over them. */
@layer deck {
  :root {
    --deck-gutter: max(clamp(20px, 7.5vw, 96px), calc((100vw - 1200px) / 2));
    --deck-top: clamp(64px, 13vh, 96px);
    --deck-bottom: clamp(44px, 9vh, 64px);
    --deck-gap: clamp(14px, min(2.2vw, 3.9vh), 28px);
  }

  .deck {
    position: fixed;
    inset: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    overscroll-behavior: none;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  /* The site's base size, taken from the screen's height as well as its width, so a slide fits a projector. */
  .slide {
    --font-size: clamp(1rem, min(1.6vw, 2.9vh), 1.6rem);

    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--deck-gap);
    min-block-size: 100%;
    padding: var(--deck-top) var(--deck-gutter) var(--deck-bottom);
    overflow-x: clip;
    background-color: var(--color-ink-lightest);
    font-size: var(--font-size);
    scroll-snap-align: start;
    scroll-snap-stop: always;

    .hero__lead {
      margin: 0;
    }

    .mock {
      box-shadow: var(--shadow);
    }
  }

  .slide--dense {
    --deck-gap: clamp(12px, min(1.6vw, 2.8vh), 20px);
  }

  .slide--cover {
    background-color: var(--color-canvas);
  }

  .slide__top {
    position: absolute;
    inset-block-start: clamp(18px, 5vh, 36px);
    inset-inline: var(--deck-gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .slide__number {
    color: var(--color-ink-dark);
    font-size: var(--size-small);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }

  .slide__mark {
    font-size: calc(var(--size-display) * 1.6);
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 1;
  }

  .slide__eyebrow {
    color: var(--color-ink-dark);
    font-size: var(--size-small);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .slide__title {
    max-inline-size: 22em;
    font-size: var(--size-display);
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 1.05;
    text-wrap: balance;
  }

  h2.slide__title {
    font-size: var(--size-heading);
  }

  .slide__split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: clamp(28px, 4.4vw, 56px);
    align-items: center;
  }

  .slide__text {
    display: grid;
    gap: var(--deck-gap);
  }

  .slide__items {
    display: grid;
    gap: clamp(12px, 2.4vh, 20px) clamp(12px, 1.8vw, 24px);
  }

  .slide__items--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .slide__items--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .slide__item {
    display: grid;
    align-content: start;
    gap: 0.3em;
    padding: 1em 1.15em;
    border-radius: 0.5em;
    background-color: var(--color-canvas);
    box-shadow: var(--shadow);

    h3 {
      font-size: var(--size-subheading);
    }

    p {
      color: var(--color-ink-dark);
    }

    .plan__price,
    .plan__tagline {
      margin: 0;
    }

    .plan__price {
      color: var(--color-ink);
    }
  }

  .slide__compare {
    inline-size: 100%;
    overflow: hidden;
    border-collapse: collapse;
    border-radius: 0.5em;
    background-color: var(--color-canvas);
    box-shadow: var(--shadow);

    th,
    td {
      padding: 0.6em 1em;
      border-block-start: 1px solid var(--hairline);
      text-align: start;
    }

    thead th {
      border-block-start: 0;
      color: var(--color-ink-dark);
      font-size: var(--size-small);
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    td {
      color: var(--color-ink-dark);
    }

    td:last-child {
      color: var(--color-ink);
      font-weight: 700;
    }
  }

  .slide__contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75em 1.5em;
    font-size: var(--size-subheading);
    font-weight: 800;

    .btn {
      font-size: var(--font-size);
    }
  }

  .deck__controls {
    position: fixed;
    inset-block-end: 20px;
    inset-inline-end: 20px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border-radius: 9999px;
    background-color: var(--color-canvas);
    box-shadow: var(--shadow);
    font-size: 18px;
  }

  .deck__count {
    color: var(--color-ink-dark);
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }

  @media (width <= 900px) {
    .slide__split {
      grid-template-columns: minmax(0, 1fr);
    }

    .slide__items--4 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (width <= 720px) {
    :root {
      --deck-top: 76px;
      --deck-bottom: 60px;
    }

    .slide__items--3,
    .slide__items--4 {
      grid-template-columns: minmax(0, 1fr);
    }

    /* Each row becomes a card: the question, then both answers under their labels. */
    .slide__compare {
      display: block;

      thead {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
      }

      tbody {
        display: block;
      }

      tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0.15em 1em;
        padding: 0.75em 1em;
        border-block-start: 1px solid var(--hairline);
      }

      tr:first-child {
        border-block-start: 0;
      }

      th,
      td {
        display: block;
        padding: 0;
        border: 0;
      }

      tbody th {
        grid-column: 1 / -1;
        margin-block-end: 0.25em;
      }

      td::before {
        content: attr(data-label);
        display: block;
        color: var(--color-ink-dark);
        font-size: var(--size-x-small);
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }
    }
  }

  @media (pointer: coarse) {
    .deck {
      scroll-snap-type: y proximity;
    }

    .deck__controls {
      inset-block-end: 12px;
      inset-inline-end: 12px;
      padding: 5px 12px;

      .btn {
        display: none;
      }
    }
  }

  @media print {
    @page {
      size: 1280px 720px;
      margin: 0;
    }

    .deck {
      position: static;
      overflow: visible;
      scroll-snap-type: none;
    }

    .slide {
      block-size: 100vh;
      min-block-size: 0;
      overflow: hidden;
      break-after: page;
      print-color-adjust: exact;
    }

    .deck__controls {
      display: none;
    }
  }
}