/* Bands: gingham, photo strip, CTA band, service groups.
   Ported from GinghamBand, PhotoStrip, CtaBand and ServiceGroups. */

.rw-gingham {
  height: 44px;
  border-top: 2px solid var(--color-night-3);
  border-bottom: 2px solid var(--color-night-3);
}

/* ── rw-photo-strip ─────────────────────────────────────────────────────── */
.rw-strip {
  position: relative;
  overflow: hidden;
  padding-block: 100px;
}
.rw-strip-fire {
  padding-bottom: 200px;
}
/* Firelight rising off the fire; rw-flames.js sets --firelight on this section. */
.rw-strip-fire::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(100% 50% at 50% 100%, rgb(255 96 16 / 0.3), transparent 70%);
  opacity: var(--firelight, 0);
}
.rw-strip-flames {
  position: absolute;
  inset: auto 0 0;
  height: 300px;
}
.rw-strip-inner {
  position: relative;
  text-align: center;
}
.rw-strip-orn {
  color: var(--color-orange);
  letter-spacing: 0.4em;
}
.rw-strip-title {
  font-size: clamp(30px, 4vw, 48px);
  margin-top: 10px;
}
.rw-strip-prints {
  list-style: none;
  padding: 0;
  /* One row, one column per print: prints shrink on narrower screens instead of wrapping. */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 320px);
  justify-content: center;
  gap: 40px;
  margin-top: 50px;
}

/* ── rw-cta ─────────────────────────────────────────────────────────────── */
.rw-cta {
  position: relative;
  overflow: hidden;
}
.rw-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(100% 50% at 50% 100%, rgb(255 96 16 / 0.3), transparent 70%);
  opacity: var(--firelight, 0);
}
.rw-cta-flames {
  position: absolute;
  inset: auto 0 0;
  height: 300px;
}
.rw-cta-inner {
  position: relative;
  text-align: center;
  padding-block: 100px 200px;
}
.rw-cta-title {
  font-size: clamp(34px, 4.6vw, 58px);
}
.rw-cta-text {
  max-width: 620px;
  margin: 18px auto 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-cream-body);
}
.rw-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 22px 40px;
  margin-top: 36px;
}
.rw-cta-bigph {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  font-family: var(--font-slab);
  font-size: clamp(26px, 3vw, 36px);
}
.rw-cta-bigph-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-orange);
}
.rw-cta-bigph:hover {
  color: var(--color-yellow);
}

/* ── rw-services ────────────────────────────────────────────────────────── */
.rw-groups {
  padding-block: 110px;
}
.rw-groups-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.rw-groups-title {
  font-size: clamp(34px, 4.6vw, 58px);
  margin: 14px 0 16px;
}
.rw-groups-intro {
  color: var(--color-smoke);
  font-size: 17px;
  line-height: 1.6;
}
.rw-svc-rows {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 110px;
  margin-top: 80px;
}
.rw-svc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
/* A row with no photos has nothing for the first column to hold. */
.rw-svc-solo {
  grid-template-columns: 1fr;
}
.rw-svc-flip .rw-svc-photos {
  order: 2;
}
.rw-svc-photos {
  width: 100%;
  max-width: 460px;
  justify-self: center;
}
/* Prints keep their own height; the second one sits lower and overlaps the first. */
.rw-svc-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  max-width: 560px;
}
.rw-svc-pair > .rw-polaroid:nth-child(2) {
  margin: 80px 0 0 -40px;
  z-index: 1;
}
.rw-svc-ticket {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 36px 16px;
  transform: rotate(-1.5deg);
}
.rw-svc-flip .rw-svc-ticket {
  transform: rotate(1.2deg);
}
.rw-svc-ticket::before {
  inset: 7px 18px;
}
.rw-svc-number {
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--color-ember-dark);
}
.rw-svc-covers {
  font-size: 18px;
  line-height: 1.2;
}
.rw-svc-title {
  font-size: clamp(28px, 3vw, 40px);
  margin: 26px 0 14px;
}
.rw-svc-body {
  max-width: 520px;
  font-size: 17px;
  line-height: 1.68;
  color: var(--color-cream-body);
}
.rw-svc-go {
  display: inline-block;
  margin-top: 22px;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-orange);
}
.rw-svc-go:hover {
  color: var(--color-yellow);
}

@media (max-width: 767.98px) {
  .rw-strip {
    padding-block: 70px;
  }
  .rw-strip-fire {
    padding-bottom: 160px;
  }
  .rw-strip-flames {
    height: 220px;
  }
  /* A swipeable row that runs edge to edge, with the next print peeking in. */
  .rw-strip-prints {
    display: flex;
    /* Start at the left edge: a centered row would push the first print out of reach. */
    justify-content: flex-start;
    gap: 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: clamp(20px, 5vw, 64px);
    margin-inline: calc(-1 * clamp(20px, 5vw, 64px));
    padding: 16px clamp(20px, 5vw, 64px) 28px;
    margin-top: 30px;
  }
  .rw-strip-item {
    flex: 0 0 76%;
    scroll-snap-align: start;
  }
  .rw-cta-inner {
    padding-block: 72px 160px;
  }
  .rw-cta-flames {
    height: 220px;
  }
  .rw-groups {
    padding-block: 76px;
  }
  .rw-svc-rows {
    gap: 76px;
    margin-top: 50px;
  }
  .rw-svc-row {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .rw-svc-flip .rw-svc-photos {
    order: 0;
  }
  .rw-svc-pair > .rw-polaroid:nth-child(2) {
    margin: 50px 0 0 -24px;
  }
  .rw-svc-ticket {
    padding: 16px 28px 14px;
  }
}