/*
 * Phone text sizes (screens narrower than 768px) for every section except
 * the home page, and for the event pages. Desktop and tablet are untouched.
 *
 * Sizes are designed for a 390px-wide screen and scale with the screen width:
 * --pu is one "390px design pixel". No text goes below 12px; text typed into
 * form fields is exactly 16px so iPhones don't zoom in; side margins are a
 * fixed 20px so they never shrink below that on small phones.
 */
@media (max-width: 767px) {
  :root {
    --pu: calc(100vw / 390);
  }

  /* ---------- Section headings: 36px, one line ---------- */
  #our-story h2,
  #celebrations h2,
  #travel h2,
  #rsvp h2,
  #blessings h2,
  #thank-you h2 {
    font-size: calc(var(--pu) * 36);
    white-space: nowrap;
  }

  /* ---------- Our Story ---------- */
  #our-story p[class*="text-[0.875rem]"] {
    font-size: max(12px, calc(var(--pu) * 14));
  }
  #our-story p[class*="text-[1.125rem]"] {
    font-size: calc(var(--pu) * 16);
  }
  #our-story .text-step-title {
    font-size: calc(var(--pu) * 20);
  }
  #our-story .text-step-text {
    font-size: max(12px, calc(var(--pu) * 15));
  }
  /* Step illustrations and spacing, in proportion to the smaller text. */
  #our-story li > div[class*="h-[5.5rem]"] {
    height: calc(var(--pu) * 76);
  }
  #our-story ol {
    gap: calc(var(--pu) * 32);
  }

  /* ---------- Celebrations ---------- */
  #celebrations p[class*="text-[0.875rem]"] {
    font-size: max(12px, calc(var(--pu) * 14));
  }
  #celebrations p[class*="text-[1.125rem]"] {
    font-size: calc(var(--pu) * 16);
  }
  #celebrations .text-card-number {
    font-size: calc(var(--pu) * 18);
  }
  #celebrations .text-card-name {
    font-size: calc(var(--pu) * 21);
  }
  #celebrations .text-card-event {
    font-size: max(12px, calc(var(--pu) * 15));
  }
  #celebrations .text-card-text {
    font-size: max(12px, calc(var(--pu) * 15));
  }
  #celebrations a[class*="h-[2.375rem]"] {
    height: 44px;
    font-size: max(12px, calc(var(--pu) * 12));
  }

  /* Arched cards: sized from the screen height so the whole section (heading,
     intro and cards) fits on one screen. --card-h is the card height: the
     screen height minus the heading area above the cards and the space below,
     capped at the original 473px and never shorter than 340px. The arch keeps
     its width-to-height proportion (0.61), and the picture takes whatever
     height the text and button below it don't need (about 195px). */
  #celebrations {
    --card-h: clamp(340px, calc(100vh - var(--pu) * 300 - 125px), 473px);
    --card-h: clamp(340px, calc(100svh - var(--pu) * 300 - 125px), 473px);
    padding-bottom: 16px;
  }
  #celebrations ul[class*="snap-x"] {
    margin-top: 16px;
    padding-bottom: 16px;
  }
  #celebrations ul[class*="snap-x"] > li {
    width: calc(var(--card-h) * 0.61);
  }
  #celebrations article[class*="rounded-t-full"] {
    height: var(--card-h);
  }
  #celebrations article[class*="rounded-t-full"] > div:first-child {
    height: calc(var(--card-h) - 195px);
  }

  /* ---------- Travel ---------- */
  #travel p[class*="text-[1.625rem]"] {
    font-size: calc(var(--pu) * 16);
  }
  #travel .text-travel-intro {
    font-size: calc(var(--pu) * 16);
  }
  #travel h3[class*="text-[2.25rem]"] {
    font-size: calc(var(--pu) * 22);
  }
  #travel .text-travel-subtitle {
    font-size: max(13px, calc(var(--pu) * 15));
  }
  #travel .text-travel-item-title {
    font-size: max(12px, calc(var(--pu) * 13));
  }
  #travel .text-travel-item {
    font-size: max(12px, calc(var(--pu) * 15));
  }
  #travel h3[class*="text-[1.375rem]"] {
    font-size: calc(var(--pu) * 20);
  }
  /* Helpful links: button text 13px, at least 44px tall. */
  #travel a[class*="text-travel-link"] {
    height: max(44px, calc(var(--pu) * 48));
    font-size: max(12px, calc(var(--pu) * 13));
  }
  #travel a[class*="text-travel-link"] span {
    font-size: inherit;
  }
  /* Panels and the links box: at least 20px from the screen edges. */
  #travel ul[class*="px-4"] {
    padding-left: 20px;
    padding-right: 20px;
  }
  #travel div[class*="mx-4"][class*="mt-14"] {
    margin-left: 20px;
    margin-right: 20px;
  }

  /* ---------- RSVP ---------- */
  #rsvp p[class*="text-[1.5rem]"] {
    font-size: calc(var(--pu) * 16);
  }
  #rsvp p[class*="text-[1.0625rem]"] {
    font-size: calc(var(--pu) * 16);
  }
  #rsvp div:has(> div[class*="bg-rsvp-card"]) {
    padding-left: 20px;
    padding-right: 20px;
  }
  #rsvp h3[class*="text-[1.25rem]"] {
    font-size: calc(var(--pu) * 17);
  }
  /* Form labels: 14px. */
  #rsvp span[class*="text-[1rem]"] {
    font-size: max(12px, calc(var(--pu) * 14));
  }
  #rsvp span[class*="text-[0.9375rem]"],
  #rsvp span[class*="text-[0.875rem]"] {
    font-size: max(12px, calc(var(--pu) * 13));
  }

  /* ---------- Blessings ---------- */
  #blessings p[class*="text-[1.3rem]"] {
    font-size: calc(var(--pu) * 16);
  }
  #blessings p[class*="text-[1.0625rem]"] {
    font-size: calc(var(--pu) * 16);
  }
  #blessings span[class*="text-[1.0625rem]"] {
    font-size: max(12px, calc(var(--pu) * 14));
  }
  #blessings div:has(> div > svg.absolute) {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* ---------- Thank You ---------- */
  #thank-you div:has(> div > svg.absolute) {
    padding-left: 20px;
    padding-right: 20px;
  }
  #thank-you p[class*="text-[1.3rem]"] {
    font-size: calc(var(--pu) * 16);
  }
  #thank-you p[class*="text-[1.0625rem]"] {
    font-size: max(12px, calc(var(--pu) * 15));
  }
  /* The couple's names: one line, about 30px. */
  #thank-you p.font-script {
    font-size: calc(var(--pu) * 30);
  }
  #thank-you p[class*="text-[0.9rem]"] {
    font-size: max(12px, calc(var(--pu) * 13));
  }

  /* ---------- Form fields and buttons (RSVP, Blessings) ---------- */
  #rsvp :is(input, select, textarea),
  #blessings :is(input, select, textarea) {
    font-size: 16px;
  }
  #rsvp button[type="submit"],
  #blessings button[type="submit"] {
    min-height: 44px;
    font-size: max(12px, calc(var(--pu) * 13));
  }

  /* ---------- Event pages ---------- */
  h1[class*="text-[2.75rem]"] {
    font-size: calc(var(--pu) * 36);
    white-space: nowrap;
  }
  .text-event-number {
    font-size: calc(var(--pu) * 18);
  }
  .text-event-subname {
    font-size: calc(var(--pu) * 16);
  }
  .text-event-value,
  .text-event-body {
    font-size: calc(var(--pu) * 16);
  }
  .text-event-heading {
    font-size: calc(var(--pu) * 22);
  }
  .text-event-label,
  p[class*="text-[0.6875rem]"] {
    font-size: max(12px, calc(var(--pu) * 12));
  }
  span[class*="text-[1.375rem]"][class*="tracking-[0.03em]"] {
    font-size: calc(var(--pu) * 20);
  }
  span[class*="text-[1.0625rem]"][class*="italic"] {
    font-size: max(12px, calc(var(--pu) * 15));
  }
}