/* =========================================================
   Duty Free at Peace Bridge — landing page
   Figma: Homepage - LP (732:650)

   Layout approach: the desktop composition is defined in ratios of the
   1346px Figma content column, so it scales smoothly from ~768px up to
   1440px+ instead of snapping between fixed layouts. There is exactly one
   structural breakpoint, at 767px, for the mobile frame.
   ========================================================= */

:root {
  --warm-red: #bd0007;
  --red-solid: #c11e19;
  --cream: #feecdd;
  --cream-alt: #fbecd6;
  --surface: #f5f5f5;
  --page: #fffcf9;
  --ink: #000000;
  --ink-strong: #0a0a0a;
  --field-border: #d1d5dc;

  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;

  --radius: 16px;
  --shell: 1346px;

  /* Every value below hits its Figma number at a 1440px viewport and
     scales down proportionally. */
  --gutter: clamp(16px, 3.264vw, 47px);

  /* section rhythm */
  --gap-outer: clamp(24px, 2.222vw, 32px);
  --gap-inner: clamp(16px, 2.222vw, 32px);
  --gap-shop: clamp(32px, 3.542vw, 51px);

  /* card metrics */
  --card-pad-y: clamp(32px, 3.333vw, 48px);
  --card-pad-x: clamp(24px, 2.222vw, 32px);
  --card-h: clamp(280px, 25.625vw, 369px);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  font-family: var(--font-body);
  color: var(--ink);
  overflow-wrap: break-word;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

button { font: inherit; }

h1, h2, h3, p { margin: 0; }

:focus-visible {
  outline: 3px solid var(--warm-red);
  outline-offset: 2px;
}

.shell {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}

/* ---------- Shared type ---------- */

.eyebrow {
  font-size: 14px;
  line-height: 32px;
  text-transform: uppercase;
  color: var(--ink);
}

.headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.222vw, 32px);
  line-height: 32px;
  text-transform: uppercase;
  color: var(--ink);
}

.body {
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 32px;
  color: var(--ink);
}

.fine {
  font-size: 14px;
  line-height: 32px;
  color: var(--ink);
}

/* ---------- Pill button ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  align-self: flex-start;
  padding: 4px 12px;
  border: 0;
  border-radius: 99px;
  background: var(--warm-red);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  line-height: 32px;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}

.pill:hover { background: #a30006; }
.pill:active { transform: translateY(1px); }
.pill img { width: 24px; height: 24px; object-fit: contain; flex: none; }

/* ---------- Hero ---------- */

.hero {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}

.hero__media {
  position: relative;
  aspect-ratio: 1346 / 701;
  border-radius: 0 0 var(--radius) var(--radius);
  background-image: url('assets/hero.webp');
  background-repeat: no-repeat;
  /* Reproduces the Figma crop: 162.36% zoom, anchored near the top-left */
  background-size: 162.36% auto;
  background-position: 2.07% 1.39%;
  overflow: hidden;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
}

.hero__logo {
  position: absolute;
  top: clamp(14px, 3.4%, 24px);
  left: clamp(16px, 3.19%, 43px);
  width: clamp(107px, 17.6%, 237px);
}

.hero__title {
  position: absolute;
  top: 36%;
  left: clamp(24px, 6.9%, 93px);
  width: 632px;
  max-width: calc(100% - clamp(48px, 13.8%, 186px));
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 4.444vw, 4rem);
  line-height: 1.001;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
}

/* ---------- Page column ---------- */

.page {
  display: flex;
  flex-direction: column;
  gap: var(--gap-outer);
  padding-block: var(--gap-outer) 33px;
}

.group {
  display: flex;
  flex-direction: column;
  gap: var(--gap-shop);
}

/* ---------- Amenities ---------- */

.amenities {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 24px clamp(20px, 3.75vw, 54px);
  padding-block: 24px;
}

.amenity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: clamp(110px, 9.722vw, 140px);
}

.amenity--wide .amenity__label { width: clamp(130px, 11.8vw, 170px); }

.amenity__icon {
  display: grid;
  place-items: center;
  height: clamp(53px, 4.444vw, 64px);
}

.amenity__icon img {
  height: clamp(37px, 3.056vw, 44px);
  width: auto;
}

.amenity__icon--currency {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(37.2px, 3.118vw, 44.9px);
  line-height: 1;
  color: var(--warm-red);
}

.amenity__label {
  font-weight: 500;
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.001;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--warm-red);
}

/* ---------- Promo row (brand card + Splash & Save) ---------- */

.promo {
  display: flex;
  flex-direction: row-reverse;
  align-items: stretch;
  gap: clamp(16px, 1.806vw, 26px);
}

/* 519 / 1346 of the content column. The link carries the flex sizing so the
   aspect ratio still drives the row height; the image just fills it. */
.promo__link {
  flex: 0 0 38.559%;
  min-width: 0;
  aspect-ratio: 2084 / 1459;
  border-radius: var(--radius);
  overflow: hidden;
}

.promo__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.promo__card {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  place-items: center;
  /* Deliberately NOT --card-h: the row height is driven by the promo
     artwork's own aspect ratio, so it never gets cropped sideways. */
  min-height: 160px;
  padding: clamp(24px, 3.333vw, 48px);
  border-radius: var(--radius);
  background: var(--surface);
}

.promo__card img {
  width: 100%;
  max-width: 516px;
}

/* ---------- Card rows ---------- */

.row {
  display: flex;
  align-items: stretch;
  gap: var(--gap-inner);
}

.card {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--card-h);
  display: flex;
  flex-direction: column;
  /* Top-aligned, not centred. Centring positions each card independently, so
     cards in a row start at different heights whenever their copy differs in
     length — Figma only looks centred because its blocks happen to be equal. */
  justify-content: flex-start;
  gap: 10px;
  padding: var(--card-pad-y) var(--card-pad-x);
  border-radius: var(--radius);
  background: var(--surface);
}

.card__icon { width: 24px; height: 24px; object-fit: contain; }

/* Figma sets each card's copy as one text layer on a 32px baseline grid,
   so the lines sit flush with no gap between them. */
.card__text {
  display: flex;
  flex-direction: column;
}

/* Always-open panel — 561 / 1346 of the content column */

.card--always {
  flex: 0 0 41.679%;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 3.333vw, 48px);
  background: var(--red-solid);
  text-align: center;
}

.card--always .always__label {
  width: 100%;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 1.667vw, 24px);
  line-height: 1.001;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cream-alt);
}

.card--always .always__number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 4.502vw, 64.83px);
  line-height: 1.001;
  letter-spacing: 0.02em;
  color: var(--cream);
}

/* Contact lists */

.contacts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contacts a,
.contacts p {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 32px;
  color: var(--ink);
}

.contacts img { width: 24px; height: 24px; object-fit: contain; flex: none; }
.contacts a:hover { text-decoration: underline; }

/* ---------- Shop the latest ---------- */

.shop {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.667vw, 24px);
}

.shop__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.222vw, 32px);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--warm-red);
}

.shop__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-inner);
}

.shop__grid figure {
  margin: 0;
  height: clamp(240px, 24.444vw, 352px);
  border-radius: var(--radius);
  overflow: hidden;
}

.shop__grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.shop__grid img.is-top { object-position: center top; }

/* ---------- Bus tours ---------- */

.bus__banner {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  place-items: center;
  min-height: var(--card-h);
  padding: clamp(24px, 3.333vw, 48px);
  border-radius: var(--radius);
  background: var(--red-solid);
}

.bus__banner p {
  width: 100%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(44px, 4.209vw, 60.61px);
  line-height: 1.001;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
  color: var(--cream-alt);
}

/* 751 / 1346 of the content column. Re-centred: it is the only text card in
   its row, so there is nothing to align with, and top-aligning would strand
   ~175px of empty space beneath it next to the centred red panel. */
.bus__card {
  flex: 0 0 55.795%;
  justify-content: center;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--warm-red);
  padding: 10px;
  text-align: center;
}

.site-footer p {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.001;
  letter-spacing: 0.02em;
  color: #fff;
}

.site-footer br { display: none; }

/* ---------- 404 ---------- */

.notfound {
  width: min(100% - (var(--gutter) * 2), 640px);
  margin-inline: auto;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-block: 64px;
  text-align: center;
}

.notfound__logo { width: min(320px, 80%); margin-bottom: 8px; }

.notfound__code {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(56px, 9vw, 96px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--warm-red);
}

.notfound__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--ink);
}

.notfound__body {
  max-width: 46ch;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.6;
  color: var(--ink);
}

.notfound .pill { align-self: center; margin-top: 8px; }

.notfound__help {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: #555;
}

.notfound__help a { text-decoration: underline; }

/* =========================================================
   Registration dialog
   ========================================================= */

.dialog {
  width: min(512px, calc(100% - 32px));
  max-height: min(90vh, 900px);
  padding: 24px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink-strong);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
  overflow: auto;
  overscroll-behavior: contain;
}

.dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.dialog__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--ink-strong);
  opacity: .7;
  cursor: pointer;
}

.dialog__close:hover { opacity: 1; }
.dialog__close svg { width: 16px; height: 16px; }

.dialog__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  text-transform: uppercase;
  color: var(--ink-strong);
  padding-right: 32px;
}

/* ---------- Form ---------- */

.form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 24px;
}

.form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.field--full { grid-column: 1 / -1; }

/* Honeypot. Off-canvas rather than display:none — some bots skip hidden
   inputs, but they do fill this one. */
.field--hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field > label {
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-strong);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--field-border);
  border-radius: 10px;
  background: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-strong);
}

.field textarea {
  height: 78px;
  resize: vertical;
}

.field select {
  padding-left: 16px;
  padding-right: 32px;
  appearance: none;
  background-image: url('assets/icon-chevron.svg');
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 6px;
}

.field input::placeholder,
.field textarea::placeholder { color: rgba(10, 10, 10, .5); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--warm-red);
  outline-offset: 1px;
  border-color: var(--warm-red);
}

.form__submit {
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  border: 0;
  border-radius: 999px;
  background: var(--warm-red);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
  transition: background-color .18s ease;
}

.form__submit:hover:not(:disabled) { background: #a30006; }
.form__submit:disabled { opacity: .65; cursor: progress; }

.form__error {
  margin-top: 8px;
  font-size: 13px;
  line-height: 18px;
  color: var(--warm-red);
}

.form__error:empty { display: none; }

/* ---------- Confirmation panel ---------- */

.confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 16px 0 24px;
  text-align: center;
}

.confirm img { width: 80px; height: 80px; }

.confirm p {
  max-width: 399px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  text-transform: uppercase;
  color: var(--ink-strong);
}

[hidden] { display: none !important; }

/* =========================================================
   Narrow desktop / tablet — same composition, fewer columns
   ========================================================= */

@media (max-width: 900px) {
  .row { flex-wrap: wrap; }

  .card--always,
  .bus__banner,
  .bus__card { flex: 1 1 100%; }

  .card--always { min-height: 200px; }
  .bus__banner { min-height: 220px; }
}

/* =========================================================
   Mobile — the iPhone frame from the Figma file
   ========================================================= */

@media (max-width: 767px) {
  :root {
    --gutter: 16px;
    --gap-outer: 32px;
    --gap-inner: 16px;
    --gap-shop: 32px;
    --card-pad-y: 48px;
    --card-pad-x: 32px;
    --card-h: 290px;
  }

  .hero__media {
    aspect-ratio: 370 / 294;
    /* Tighter crop on the sign, per the mobile frame */
    background-size: 247.49% auto;
    background-position: 33.96% 1.38%;
  }

  .hero__logo {
    top: 16px;
    left: 50%;
    translate: -50% 0;
    width: 107px;
    max-width: 55%;
  }

  .hero__title {
    top: 24%;
    left: 17px;
    right: 17px;
    width: auto;
    max-width: none;
  }

  .amenities {
    gap: 16px 0;
    padding-block: 8px 16px;
  }

  .amenity { width: 33.3333%; }
  .amenity--wide .amenity__label { width: auto; }

  .promo { flex-direction: column; }

  .promo__link,
  .promo__card {
    flex: none;
    width: 100%;
  }

  .promo__card {
    min-height: 260px;
    padding: 24px;
  }

  .row { flex-direction: column; }

  .card,
  .card--always,
  .bus__banner,
  .bus__card {
    flex: none;
    width: 100%;
  }

  .headline { font-size: 32px; }
  .body { font-size: 18px; }

  /* Figma keeps the roomier 48/32 padding on mobile for the service cards
     and tightens only the location / nexus pair. */
  .card { justify-content: center; }

  .card--tight {
    padding: 24px;
    min-height: 0;
  }

  .card--tight .headline { font-size: 24px; }
  .card--tight .body { font-size: 16px; }

  .card--always {
    min-height: 176px;
    padding: 24px;
    margin-top: 16px;
  }

  .card--always .always__label { font-size: 24px; }
  .card--always .always__number { font-size: clamp(48px, 16vw, 64.83px); }

  .bus__banner {
    min-height: 290px;
    padding: 48px 32px;
  }

  .bus__banner p { font-size: clamp(44px, 15vw, 60.61px); }

  .shop__grid { grid-template-columns: 1fr; }
  .shop__grid figure { height: 352px; }

  .site-footer br { display: inline; }

  /* Near full-bleed on phones, matching the mobile dialog frame — it also
     keeps "Register Your Bus Tour" on a single line. */
  .dialog {
    width: calc(100% - 16px);
    padding: 24px 16px;
  }

  .dialog__title {
    font-size: 22px;
    padding-right: 24px;
  }

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

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; }
}