/*
 * Printable QR cards. Each card is a size container with A-series proportions;
 * everything inside is sized in cqi (1cqi = 1% of the card width), so a card
 * looks identical as a 15rem preview and as a 148mm A5 print.
 *
 * Colors are fixed on purpose: what you see in the preview (also in dark mode)
 * is what gets printed.
 */
@layer components {
  .print-card {
    container: print-card / inline-size;
    text-decoration: none;
    aspect-ratio: 1 / 1.4142;
    overflow: hidden;
    background-color: #fff;
    color: #1b1a17;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .print-card__body {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 3cqi;
    block-size: 100%;
    padding: 10cqi 9cqi 8cqi;
    font-family: var(--font-sans);
    text-align: center;

    & p { max-inline-size: none; }
  }

  .print-card__header {
    position: relative;
    flex: none;
    display: grid;
    justify-items: center;
    gap: 2cqi;
  }

  .print-card__eyebrow {
    font-size: 3.2cqi;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  /* Each design sets --title-size; long titles scale down so the card never overflows. */
  .print-card__title {
    --title-scale: 1;
    max-inline-size: 100%;
    font-family: var(--font-sans);
    font-size: calc(var(--title-size, 9.5cqi) * var(--title-scale));
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.06;
    hyphens: auto;
    overflow-wrap: break-word;
    text-wrap: balance;

    &[data-length="long"] { --title-scale: 0.74; }
    &[data-length="very-long"] { --title-scale: 0.56; }
  }

  .print-card__headline {
    font-size: 4.6cqi;
    line-height: 1.3;
    text-wrap: balance;
  }

  /* The QR slot takes the height left over by header and footer, so long titles
     shrink the code a little instead of pushing content off the card. */
  .print-card__qr {
    position: relative;
    display: grid;
    place-items: center;
    flex: 1 1 0;
    min-block-size: 28cqi;
    inline-size: 100%;

    & svg {
      display: block;
      box-sizing: border-box;
      block-size: 100%;
      max-block-size: 52cqi;
      inline-size: auto;
      aspect-ratio: 1;
      padding: 3cqi;
      border-radius: 3cqi;
      background-color: #fff;
      color: #111;
    }
  }

  .print-card__footer {
    position: relative;
    flex: none;
    display: grid;
    justify-items: center;
    gap: 3cqi;
  }

  .print-card__steps {
    display: flex;
    justify-content: center;
    gap: 4cqi;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
    font-size: 3cqi;
    line-height: 1.25;

    & li {
      display: grid;
      justify-items: center;
      gap: 1.2cqi;
      flex: 1;
      max-inline-size: 24cqi;
      counter-increment: step;

      &::before {
        content: counter(step);
        display: grid;
        place-items: center;
        inline-size: 6cqi;
        block-size: 6cqi;
        border: 0.35cqi solid currentColor;
        border-radius: 50%;
        font-size: 3.2cqi;
        font-weight: 700;
      }
    }
  }

  .print-card__url {
    font-size: 2.7cqi;
    opacity: 0.7;
  }

  /* 1 · Minimal: white, a hairline frame, nothing else */
  .print-card--minimal {
    background-color: #fff;
    color: #161616;

    & .print-card__body {
      outline: 0.3cqi solid #161616;
      outline-offset: -5cqi;
    }

    & .print-card__eyebrow { color: #707070; }
    & .print-card__title { font-weight: 650; letter-spacing: -0.02em; }
    & .print-card__headline { color: #4a4a4a; }
  }

  /* 2 · Elegant: ivory, gold double frame, serif italics */
  .print-card--elegant {
    --gold: #b0915a;
    background-color: #fbf7ef;
    color: #3a2e23;

    & .print-card__body {
      padding-block: 12cqi 11cqi;

      &::before, &::after {
        content: "";
        position: absolute;
        pointer-events: none;
        border: solid var(--gold);
      }
      &::before { inset: 4cqi; border-width: 0.35cqi; }
      &::after { inset: 5.4cqi; border-width: 0.15cqi; }
    }

    & .print-card__eyebrow { color: var(--gold); font-family: var(--font-display); font-weight: 500; letter-spacing: 0.24em; }
    & .print-card__title { font-family: var(--font-display); --title-size: 10.5cqi; font-style: italic; font-weight: 380; }
    & .print-card__divider { inline-size: 40cqi; color: var(--gold); }
    & .print-card__headline { font-family: var(--font-display); font-size: 4.4cqi; letter-spacing: 0.04em; }
    & .print-card__qr svg { color: #3a2e23; background: transparent; }
    & .print-card__steps li::before { border-color: var(--gold); color: var(--gold); font-family: var(--font-display); }
  }

  /* 3 · Botanical: sage paper, leafy branches in the corners */
  .print-card--botanical {
    background-color: #edf1e6;
    color: #2d4635;

    & .print-card__branch {
      position: absolute;
      inline-size: 30cqi;
      color: #7d9a76;
    }
    & .print-card__branch--top { inset-block-start: 0; inset-inline-end: 0; transform: rotate(90deg); }
    & .print-card__branch--bottom { inset-block-start: 0; inset-inline-start: 0; transform: scaleX(-1) rotate(90deg); }

    & .print-card__header { padding-inline: 8cqi; }

    & .print-card__eyebrow { color: #5f7d5a; }
    & .print-card__title { font-family: var(--font-display); --title-size: 10.5cqi; font-weight: 450; }
    & .print-card__headline { font-family: var(--font-display); font-style: italic; }
    & .print-card__qr svg { color: #22382a; box-shadow: 0 1cqi 4cqi rgb(45 70 53 / 0.12); }
  }

  /* 4 · Party: deep plum, confetti, gradient headline, a playful tilt */
  .print-card--party {
    background-color: #2a1744;
    color: #fff;

    & .print-card__confetti {
      position: absolute;
      inset: 0;
      inline-size: 100%;
      block-size: 100%;

      & .c1 { fill: #ff6b81; }
      & .c2 { fill: #ffd166; }
      & .c3 { fill: #5ad2f4; }
      & .c4 { fill: #b8f28c; }
    }

    & .print-card__eyebrow { color: #ffd166; }
    & .print-card__title {
      --title-size: 11cqi;
      font-weight: 850;
      letter-spacing: -0.02em;
      text-transform: uppercase;
      color: #ffd166;
      /* Solid color plus an offset shadow: gradient text (background-clip) doesn't print. */
      text-shadow: 0.7cqi 0.7cqi 0 #ff6b81;
    }
    & .print-card__headline { font-weight: 650; }
    & .print-card__qr svg {
      rotate: -2.5deg;
      border-radius: 4cqi;
      color: #2a1744;
      box-shadow: 0 2cqi 0 #ff6b81;
    }
    & .print-card__steps li::before { border: none; background-color: #ffd166; color: #2a1744; }
  }

  /* 5 · Modern: bold black block, oversized type, the code overlapping the edge */
  .print-card--modern {
    --accent: #e8a93c;
    background-color: #f3f0e9;
    color: #121212;

    & .print-card__body {
      justify-content: flex-start;
      padding-block-start: 0;
    }

    & .print-card__header {
      justify-items: start;
      inline-size: calc(100% + 18cqi);
      margin-inline: -9cqi;
      padding: 11cqi 9cqi 24cqi;
      background-color: #121212;
      color: #f3f0e9;
      text-align: start;
    }

    & .print-card__eyebrow { color: var(--accent); }
    & .print-card__title { --title-size: 12cqi; font-weight: 820; line-height: 0.95; letter-spacing: -0.045em; text-wrap: pretty; }
    & .print-card__headline { font-size: 4.4cqi; opacity: 0.8; }
    & .print-card__qr {
      margin-block-start: -19cqi;
      margin-block-end: 3cqi;

      & svg {
        border-radius: 0;
        box-shadow: 2.4cqi 2.4cqi 0 var(--accent);
      }
    }
    & .print-card__footer { margin-block-start: auto; }
    & .print-card__steps li::before { border: none; background-color: #121212; color: #f3f0e9; }
  }

  /* 6 · Business: clean, left aligned, a blue accent bar */
  .print-card--business {
    --blue: #2c6aa8;
    background-color: #fff;
    color: #1b2633;

    & .print-card__body {
      align-items: stretch;
      padding: 12cqi 10cqi 9cqi;
      text-align: start;
      border-block-start: 2.6cqi solid var(--blue);
    }

    & .print-card__header {
      justify-items: start;
      padding-block-end: 5cqi;
      border-block-end: 0.3cqi solid #d7dee6;
    }

    & .print-card__eyebrow { color: var(--blue); }
    & .print-card__title { --title-size: 8.5cqi; font-weight: 700; letter-spacing: -0.01em; }
    & .print-card__headline { color: #4b5969; font-size: 4.2cqi; }
    & .print-card__qr svg {
      border: 0.3cqi solid #d7dee6;
      border-radius: 2cqi;
      color: #1b2633;
    }
    & .print-card__footer { justify-items: start; }
    & .print-card__steps {
      flex-direction: column;
      gap: 1.8cqi;

      & li {
        grid-template-columns: auto 1fr;
        align-items: center;
        justify-items: start;
        gap: 2.5cqi;
        max-inline-size: none;

        &::before { border: none; background-color: var(--blue); color: #fff; }
      }
    }
  }
}

@layer components {
  /* Design picker on the QR code page */
  .design-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
    gap: var(--space-m);
    margin: 0;
    padding: 0;
  }

  .design-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
    list-style: none;
  }

  .design-option__preview {
    display: block;
    color: inherit;
    text-decoration: none;
    inline-size: 100%;
    overflow: hidden;
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-m);
    outline: var(--border-width) solid var(--color-border);
    transition: translate var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);

    &:hover {
      translate: 0 -3px;
      box-shadow: var(--shadow-l);
    }

    &:focus-visible {
      border-radius: var(--radius-m);
      box-shadow: var(--focus-ring), var(--shadow-l);
    }
  }

  .design-option__text {
    & h3 { font-size: var(--step-1); }
    & p { color: var(--color-text-muted); font-size: var(--step--1); }
  }

  /* Plain QR code download */
  .qr-download {
    display: grid;
    gap: var(--space-m);
    align-items: center;

    @container main (inline-size > 40rem) {
      grid-template-columns: 12rem 1fr;
    }
  }

  .qr-download__code {
    inline-size: min(100%, 12rem);
    padding: var(--space-xs);
    border-radius: var(--radius-m);
    background-color: #fff;
    color: #111;

    & svg { inline-size: 100%; block-size: auto; }
  }
}