/* =========================
   GLOBAL
========================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  background: #000000;
  color: #ffffff;

  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
}


/* =========================
   HEADER
========================= */

.site-header {
  padding: 1rem;
}

.navbar {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  color: #ffffff;

  text-decoration: none;

  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.15;
}

.nav-links {
  display: none;

  margin: 0;

  padding: 0;

  list-style: none;
}

.nav-links.is-open {
  display: flex;

  flex-direction: column;

  gap: 1rem;

  position: absolute;

  top: 100%;
  left: 0;
  right: 0;

  padding: 1.5rem;

  background: #08080c;

  border-bottom: 1px solid rgba(200, 162, 255, 0.2);

  z-index: 10;
}

.nav-links a {
  color: #c8a2ff;

  text-decoration: none;

  transition: color 0.2s ease;
}

.nav-links a:hover {
  color: #e0c7ff;
}

.menu-toggle {
  border: 0;

  background: transparent;
  color: #ffffff;

  font-size: 1.5rem;

  cursor: pointer;
}


/* =========================
   BENTO GRID
========================= */

.bento-grid {
  display: grid;

  grid-template-columns: 1fr;

  gap: 1rem;

  padding: 1rem;
}


/* =========================
   BENTO CARD
========================= */

.bento-card {
  position: relative;

  isolation: isolate;

  overflow: hidden;

  min-height: 200px;

  padding: 1.5rem;

  border-radius: 1.5rem;

  background: #08080c;
  color: #ffffff;
}


/* =========================
   ANIMATED GLOW
========================= */

.bento-card::before {
  content: "";

  position: absolute;

  inset: -40%;

  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 30deg,
    rgba(0, 217, 255, 0.25) 55deg,
    rgba(0, 217, 255, 1) 85deg,
    rgba(124, 60, 255, 1) 120deg,
    rgba(124, 60, 255, 0.3) 155deg,
    transparent 190deg,
    transparent 360deg
  );

  filter: blur(25px);

  opacity: 1;

  animation: neon-spin 5s linear infinite;

  z-index: 0;
}


/* =========================
   CARD INNER LAYER
========================= */

.bento-card::after {
  content: "";

  position: absolute;

  inset: 1px;

  background: #08080c;

  border-radius: calc(1.5rem - 1px);

  z-index: 1;
}


/* =========================
   CARD CONTENT
========================= */

.bento-card > * {
  position: relative;

  z-index: 3;
}


/* =========================
   HERO CARD
========================= */

.hero-card {
  min-height: 320px;
}


/* =========================
   FLIP CARD MECHANICS
   (shared by hero, tour and
   contact cards)
========================= */

.flip-card {
  perspective: 1000px;
}

.flip-front,
.flip-back {
  position: absolute;

  inset: 2px;

  display: flex;

  flex-direction: column;

  padding: 1.5rem;

  background-color: #08080c;

  border-radius: calc(1.5rem - 2px);

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  transition: transform 0.7s ease;

  z-index: 3;
}

.flip-front {
  transform: rotateY(0deg);
}

.flip-back {
  transform: rotateY(180deg);
}

.flip-card.is-flipped .flip-front {
  transform: rotateY(-180deg);
}

.flip-card.is-flipped .flip-back {
  transform: rotateY(0deg);
}


/* =========================
   HERO FRONT
========================= */

.hero-front-content {
  position: relative;

  z-index: 1;

  display: flex;

  flex-direction: column;

  flex: 1;

  min-height: 0;
}


/* =========================
   HERO CAROUSEL
   Fills the hero card behind
   .hero-front-content. Fades
   between whichever of the up
   to 6 hero-N images actually
   exist -- see script.js.
========================= */

.hero-carousel {
  position: absolute;

  inset: 0;

  z-index: 0;

  overflow: hidden;

  pointer-events: none;
}

.hero-carousel-slide {
  position: absolute;

  inset: 0;

  background-repeat: no-repeat;
  background-position: center;
  background-size: 90%;

  opacity: 0;

  transition: opacity 1.5s ease;
}

.hero-carousel-slide.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {

  .hero-carousel-slide {
    transition: none;
  }

}


/* =========================
   BACK HEADING
========================= */

.hero-back h2 {
  flex-shrink: 0;

  margin-top: 0;
  margin-bottom: 1rem;
}


/* =========================
   SCROLLABLE BACK CONTENT
========================= */

.hero-back-content {
  flex: 1;

  min-height: 0;

  overflow-y: auto;

  padding-right: 0.5rem;

  scrollbar-width: thin;
}

.hero-back-content p {
  line-height: 1.6;
}


/* =========================
   BACK CONTENT ANIMATION
========================= */

.hero-back h2,
.hero-back-content,
.hero-back .flip-back-button,
.tour-back h3,
.tour-back-content,
.tour-back .flip-back-button,
.tour-back-bottom {
  opacity: 0;

  transform: translateY(20px);

  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}


/* =========================
   FADE / SLIDE UP
   Gated on .flip-card rather than
   .hero-card/.tour-card specifically,
   so hero and tour cards share one
   set of rules.
========================= */

.flip-card.back-content-visible .hero-back h2,
.flip-card.back-content-visible .hero-back-content,
.flip-card.back-content-visible .hero-back .flip-back-button,
.flip-card.back-content-visible .tour-back h3,
.flip-card.back-content-visible .tour-back-content,
.flip-card.back-content-visible .tour-back .flip-back-button,
.flip-card.back-content-visible .tour-back-bottom {
  opacity: 1;

  transform: translateY(0);
}


/* =========================
   SCROLL REVEAL
   .reveal/.reveal-visible are
   added by script.js -- a card
   without JS (or with reduced
   motion) never gets .reveal, so
   it just stays at its normal
   opacity: 1 instead of being
   stuck invisible.
========================= */

.tour-card.reveal {
  opacity: 0;

  transform: translateY(24px);

  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.tour-card.reveal.reveal-visible {
  opacity: 1;

  transform: translateY(0);
}


/* =========================
   PUSH-TO-BOTTOM CONTENT
   .hero-bottom: pins the hero's
   role + button group to the
   bottom of the front face.
   .tour-back-bottom: only used
   where a tour card's back has
   more than one action (e.g. the
   Carry On Touring card's extra
   "Visit campaign site" link) --
   stacks them above the Back
   button. Most tour cards don't
   need it; .tour-back-content's
   flex: 1 already pushes a lone
   Back button to the bottom.
========================= */

.hero-bottom,
.tour-back-bottom {
  margin-top: auto;
}

.hero-bottom p {
  margin: 0 0 1rem;
}

.tour-back-bottom {
  display: flex;

  flex-direction: column;

  gap: 0.5rem;
}


/* =========================
   FLIP BACK BUTTON POSITION
   (hero + tour cards; the
   contact back button sits in
   .form-actions instead)
========================= */

.hero-back .flip-back-button,
.tour-back .flip-back-button {
  flex-shrink: 0;

  margin-top: 1rem;

  align-self: flex-start;
}


/* =========================
   LINK CARD
   (About + Back Catalogue
   cards on the homepage)
========================= */

.link-card {
  display: flex;

  flex-direction: column;

  color: #ffffff;

  text-decoration: none;

  cursor: pointer;
}

.link-card h2,
.link-card p {
  text-decoration: none;
}

.link-card h2 {
  margin-top: 0;

  margin-bottom: 0.25rem;
}

.link-card .card-link {
  margin-top: auto;

  color: #c8a2ff;

  font-size: 0.9rem;

  font-weight: 600;
}


/* =========================
   BUTTON
========================= */

.button {
  display: inline-block;

  align-self: flex-start;

  padding: 0.65rem 1rem;

  color: #c8a2ff;

  background: rgba(200, 162, 255, 0.08);

  border: 1px solid rgba(200, 162, 255, 0.3);

  border-radius: 0.6rem;

  text-decoration: none;

  font-size: 0.9rem;
  font-weight: 600;

  cursor: pointer;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.button:hover {
  background: rgba(200, 162, 255, 0.15);

  border-color: rgba(200, 162, 255, 0.5);

  transform: translateY(-1px);
}

.button.secondary {
  color: #ffffff;

  background: transparent;

  border-color: rgba(255, 255, 255, 0.25);
}

.button.secondary:hover {
  background: rgba(255, 255, 255, 0.08);

  border-color: rgba(255, 255, 255, 0.4);
}

/* =========================
   NEON ANIMATION
========================= */

@keyframes neon-spin {

  to {
    transform: rotate(360deg);
  }

}


/* =========================
   TABLET
========================= */

@media (min-width: 768px) {

  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-card {
    grid-column: span 2;
  }

  .nav-links {
    display: flex;

    gap: 1.5rem;
  }

  .menu-toggle {
    display: none;
  }

}


/* =========================
   DESKTOP
========================= */

@media (min-width: 1024px) {

  .bento-grid {
    max-width: 1200px;

    margin: 0 auto;

    grid-template-columns: repeat(4, 1fr);
  }

  .hero-card {
    grid-column: span 2;

    grid-row: span 2;
  }

}


/* =========================
   TAGLINE
========================= */

.tagline {
  padding: 2.5rem 1.5rem;

  text-align: center;
}

.tagline p {
  max-width: 750px;

  margin: 0 auto;

  color: #c8a2ff;

  font-size: 1.2rem;

  font-weight: 400;

  font-style: italic;

  line-height: 1.6;

  letter-spacing: 0;
}

@media (min-width: 768px) {

  .tagline p {
    font-size: 1.4rem;
  }

}


/* =========================
   ABOUT PAGE
========================= */

.about-page {
  padding-bottom: 2rem;
}

.about-grid {
  display: grid;

  grid-template-columns: 1fr;

  gap: 1rem;

  padding: 1rem;
}


/* =========================
   ABOUT INTRO
========================= */

.about-intro {
  min-height: auto;
}

.about-intro h1 {
  margin-top: 0.5rem;

  margin-bottom: 1.5rem;

  font-size: 2rem;

  line-height: 1.1;
}

.about-intro .lead {
  color: #ffffff;

  font-size: 1.15rem;

  line-height: 1.6;
}


/* =========================
   EYEBROW
========================= */

.eyebrow {
  display: block;

  color: #c8a2ff;

  font-size: 0.75rem;

  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}


/* =========================
   ABOUT TYPOGRAPHY
========================= */

.about-grid h2 {
  margin-top: 0.5rem;

  margin-bottom: 1rem;

  line-height: 1.15;
}

.about-grid p {
  color: #c8c8c8;

  line-height: 1.65;
}

.about-grid p:last-child {
  margin-bottom: 0;
}


/* =========================
   SKILLS
========================= */

.skills-card {
  min-height: auto;
}

.skills-list {
  display: grid;

  grid-template-columns: 1fr;

  gap: 1.5rem;

  margin-top: 1.5rem;
}

.skill-group h3 {
  margin: 0 0 0.5rem;

  color: #ffffff;

  font-size: 0.95rem;
}

.skill-group p {
  margin: 0;

  color: #aaaaaa;

  font-size: 0.9rem;

  line-height: 1.7;
}


/* =========================
   TOOLS STRIP
   The specific hardware/software
   names, as a scannable row of
   tags rather than another
   h3+list column -- distinct
   from the role/capability
   groups above it.
========================= */

.tools-strip {
  margin-top: 1.5rem;

  padding-top: 1.5rem;

  border-top: 1px solid rgba(200, 162, 255, 0.15);
}

.tools-strip h3 {
  margin: 0 0 0.75rem;

  color: #ffffff;

  font-size: 0.95rem;
}

.tool-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 0.5rem;

  margin: 0;

  padding: 0;

  list-style: none;
}

.tool-tags li {
  padding: 0.4rem 0.75rem;

  color: #c8a2ff;

  background: rgba(200, 162, 255, 0.08);

  border: 1px solid rgba(200, 162, 255, 0.3);

  border-radius: 0.6rem;

  font-size: 0.85rem;

  font-weight: 600;
}


/* =========================
   ABOUT QUOTE
========================= */

.about-quote {
  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 180px;

  text-align: center;
}

.about-quote p {
  max-width: 750px;

  margin: 0;

  color: #c8a2ff;

  font-size: 1.2rem;

  font-weight: 400;

  font-style: italic;

  line-height: 1.6;

  letter-spacing: 0;
}


/* =========================
   PAGE NAVIGATION
========================= */

.page-navigation {
  display: flex;

  justify-content: center;

  padding: 1rem;
}

/* =========================
   ABOUT QUOTE - NO GLOW
========================= */

.about-quote::before,
.about-quote::after {
  display: none;
}



/* =========================
   ABOUT TABLET
========================= */

@media (min-width: 768px) {

  .about-grid {
    grid-template-columns: repeat(2, 1fr);

    max-width: 1200px;

    margin: 0 auto;
  }

  .about-intro {
    grid-column: span 2;
  }

  .skills-card {
    grid-column: span 2;
  }

  .kit-card {
    grid-column: span 2;
  }

  .about-quote {
    grid-column: span 2;
  }

  .skills-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-quote p {
    font-size: 1.4rem;
  }

}


/* =========================
   ABOUT DESKTOP
========================= */

@media (min-width: 1024px) {

  .about-intro {
    min-height: 420px;
  }

  .about-intro .lead {
    max-width: 800px;

    font-size: 1.35rem;
  }

  .skills-list {
    grid-template-columns: repeat(4, 1fr);
  }

  .about-quote {
    min-height: 220px;
  }

}


/* =========================
   ABOUT IMAGES
========================= */

.about-image {
  /*
   * position: relative so .kit-card's .hero-carousel (position:
   * absolute) has something to fill -- inert for the other
   * about-image uses, which are just a plain <img>.
   */
  position: relative;

  width: 100%;
  overflow: hidden;
  border-radius: 1rem;
}

.about-image .hero-carousel-slide {
  /*
   * The other .hero-carousel uses (hero card, tour cards) are
   * logo-style art on 90% contain -- these are full-bleed
   * photos, so cover to match every other .about-image here.
   */
  background-size: cover;
}

.about-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* =========================
   IMAGE CARDS
========================= */

.image-card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.image-card .about-image {
  min-height: 240px;
}

.image-card .image-card-content {
  flex: 1;
}


/* =========================
   ABOUT INTRO IMAGE
========================= */

.about-intro .about-image {
  min-height: 250px;
}


/* =========================
   DESKTOP IMAGE CARDS
========================= */

@media (min-width: 1024px) {

  .image-card {
    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: stretch;

    gap: 1.5rem;
  }

  .image-card .about-image {
    min-height: 100%;
  }

  .about-intro {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 2rem;

    align-items: stretch;
  }

  .about-intro .about-image {
    min-height: 100%;
  }

}


/* =========================
   TOURS PAGE
========================= */

.tours-page {
  padding-bottom: 2rem;
}

/* =========================
   TOURS HERO CARD
   The intro heading/lead, laid
   over passes.JPG as a full-width
   banner card at the top of the
   grid rather than plain text
   above it.
========================= */

.tours-hero-card {
  padding: 0;

  min-height: 280px;
}

.tours-hero-front {
  position: absolute;

  inset: 1px;

  display: flex;

  overflow: hidden;

  padding: 1.5rem;

  border-radius: calc(1.5rem - 1px);

  background-image: url("../images/passes.JPG");

  /*
   * The padding creates the dark gutter; switching the
   * background's origin AND clip to inside that padding (rather
   * than shrinking it further with background-size) keeps the
   * gutter a consistent width on every side regardless of the
   * card's aspect ratio. background-origin alone only affects
   * how size/position are calculated -- background-clip is what
   * actually stops the image painting out into the padding, and
   * defaults to border-box, so it has to be set explicitly too.
   * background-size: cover then fills the clipped area completely
   * rather than letterboxing to fit it.
   */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-origin: content-box;
  background-clip: content-box;
}

.tours-hero-overlay {
  flex: 1;

  display: flex;

  flex-direction: column;

  justify-content: center;

  width: 100%;

  padding: 1.5rem;

  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.35) 50%,
    rgba(0, 0, 0, 0.75) 100%
  );
}

.tours-hero-overlay h1 {
  margin: 0 0 0.5rem;

  font-size: 2rem;

  line-height: 1.1;
}

.tours-hero-overlay h2 {
  margin: 0 0 1rem;

  color: #c8a2ff;

  font-size: 1.1rem;

  font-weight: 600;
}

.tours-hero-overlay .lead {
  max-width: 700px;

  margin: 0;

  color: #c8c8c8;

  font-size: 1.05rem;

  line-height: 1.6;
}

@media (min-width: 1024px) {

  .tours-hero-card {
    min-height: 380px;
  }

}


/* =========================
   TOURS GRID
========================= */

.tours-grid {
  display: grid;

  grid-template-columns: 1fr;

  gap: 1rem;

  max-width: 1200px;

  margin: 0 auto;

  padding: 1rem;
}

/*
 * Always the full width of however many columns the grid
 * currently has (1 on mobile, 2 on tablet, 4 on desktop) --
 * `1 / -1` adapts automatically, so no breakpoint-specific
 * overrides are needed the way .featured needs below.
 */
.tours-hero-card {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {

  .tours-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /*
   * Matches .hero-card's own tablet treatment on the homepage:
   * a featured tour spans the full width at this breakpoint.
   */
  .tour-card.featured,
  .tour-card.wide {
    grid-column: span 2;
  }

}

@media (min-width: 1024px) {

  /*
   * Four columns, same as .bento-grid on the homepage, so the
   * two pages feel like one system.
   */
  .tours-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /*
   * Same 2x2 treatment as .hero-card on the homepage.
   */
  .tour-card.featured {
    grid-column: span 2;
    grid-row: span 2;
  }

  /*
   * .wide is the same double-width span as .featured, but
   * stays a single row tall instead of spanning 2x2.
   */
  .tour-card.wide {
    grid-column: span 2;
  }

}


/* =========================
   TOUR CARD (FLIP)
========================= */

.tour-card {
  /*
   * Taller than .hero-card (380 vs 320) so the front-face
   * text has more room to sit fully within the dark top band
   * of .tour-front-overlay's gradient -- at 320px, on narrow
   * (mobile-width, short) cards the background-size: cover
   * crop zooms in enough that busy parts of the image (a
   * wordmark, a face) can land right under the title text.
   */
  min-height: 380px;

  padding: 0;
}

.tour-front {
  padding: 0;

  /*
   * Each card sets --tour-img-mobile / -tablet / -desktop
   * inline (see tours.html). Mobile-first: start with the
   * mobile crop, then swap at the same breakpoints already
   * used across the site (768px / 1024px) so smaller screens
   * aren't just a randomly-cropped version of the desktop shot.
   */
  background-image: var(--tour-img-mobile);

  background-repeat: no-repeat;
  background-position: center;
  background-size: 90%;
}

.tour-front-overlay {
  /*
   * Stretch to fill the whole card (not just a bottom strip),
   * so the title/date sit at the top and the button is pinned
   * to the bottom via margin-top: auto below -- same top/
   * middle/bottom split as .tour-back, regardless of how much
   * (or little) text is in between.
   */
  flex: 1;

  /*
   * Cards using .hero-carousel instead of a plain background
   * image (see the Westlife card) layer its slides in as an
   * absolutely-positioned sibling with z-index: 0. Positioned
   * elements paint after non-positioned in-flow content, so
   * without this the carousel would cover this overlay instead
   * of sitting behind it.
   */
  position: relative;

  z-index: 1;

  display: flex;

  flex-direction: column;

  width: 100%;

  padding: 1.25rem;

  /*
   * A dark band top and bottom keeps the title and button
   * legible over the image; the lighter middle lets the photo
   * itself show through, same spirit as the hero image blend.
   * Widened from 35%/65% now that the bottom group can be two
   * lines (role + button) instead of one, so it doesn't spill
   * into the lighter middle band on cards with a longer role.
   */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 0) 60%,
    rgba(0, 0, 0, 0.35) 100%
  );

  border-radius: calc(1.5rem - 2px);

  /*
   * A long title is contained rather than pushing the button
   * past the bottom edge and into the next row.
   */
  overflow: hidden;

  /*
   * text-shadow is inherited, so this covers the title, date
   * and role text in one place. The gradient above handles
   * general contrast, but some source images (tour posters
   * with their own dense text) stay busy even in the dark
   * band -- the shadow keeps our text readable regardless.
   */
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

.tour-front-overlay h3 {
  margin: 0 0 0.25rem;

  font-size: 1.1rem;

  line-height: 1.25;

  /* Clamp long titles to 3 lines so the layout stays predictable. */
  display: -webkit-box;

  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;

  overflow: hidden;
}

.tour-front-overlay p {
  margin: 0;

  color: #c8c8c8;

  font-size: 0.85rem;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}

.tour-front-bottom {
  /*
   * Role line + button as one group, pinned to the bottom of
   * the front face -- same pattern as .hero-bottom on the
   * homepage hero card. Its own rule (rather than reusing
   * .hero-bottom) so it isn't caught up in a same-specificity
   * ordering fight with .tour-front-overlay p below.
   */
  margin-top: auto;
}

.tour-front-overlay .tour-front-bottom p {
  margin: 0 0 0.5rem;

  /*
   * .tour-front-overlay p below truncates the date line to one
   * line with an ellipsis -- role text (e.g. "PPU Systems
   * Engineer / Camera Director (Nottingham)") is often too long
   * for that and should wrap instead of being cut off.
   */
  white-space: normal;
}

.tour-back h3 {
  flex-shrink: 0;

  margin: 0 0 0.5rem;

  font-size: 1.1rem;

  line-height: 1.25;
}

.tour-back-content {
  /*
   * Same pattern as .hero-back-content: grows to fill whatever
   * space is left between the title and the button, and scrolls
   * if the role/detail text is too long to fit -- so the button
   * always ends up in the same place regardless of how much text
   * is here. padding-right + thin scrollbar keeps the scrollbar
   * from sitting flush against the text, also matching
   * .hero-back-content.
   */
  flex: 1;

  min-height: 0;

  overflow-y: auto;

  padding-right: 0.5rem;

  scrollbar-width: thin;
}

.tour-back-content p {
  margin: 0 0 0.5rem;

  color: #c8c8c8;

  font-size: 0.9rem;

  line-height: 1.5;
}

.tour-back-content p:last-child {
  margin-bottom: 0;
}


/* =========================
   TOUR CARD RESPONSIVE IMAGES
========================= */

@media (min-width: 768px) {

  .tour-front {
    background-image: var(--tour-img-tablet);
  }

}

@media (min-width: 1024px) {

  .tour-front {
    background-image: var(--tour-img-desktop);
  }

}


/* =========================
   TOUR CARD ORIENTATION IMAGES
   Cards whose images were shot as
   a matched portrait/landscape
   pair (--tour-img-mobile /
   --tour-img-tablet) rather than
   three width tiers use the large
   --tour-img-desktop image by
   default, only swapping to the
   narrower crop that actually
   matches the screen's own
   orientation below the desktop
   breakpoint -- so a landscape
   phone or tablet doesn't end up
   with a portrait-cropped image
   and vice versa. Higher
   specificity than .tour-front
   alone, so this overrides the
   width-tier rules above.
========================= */

.tour-front.orientation-images {
  background-image: var(--tour-img-desktop);
}

@media (max-width: 1023px) and (orientation: landscape) {

  .tour-front.orientation-images {
    background-image: var(--tour-img-tablet);
  }

}

@media (max-width: 1023px) and (orientation: portrait) {

  .tour-front.orientation-images {
    background-image: var(--tour-img-mobile);
  }

}


/* =========================
   FOOTER
========================= */

footer {
  padding: 1.5rem;

  text-align: center;
}

footer p {
  margin: 0;
}



/* =========================
   CONTACT CARD
========================= */

.contact-front h2 {
  margin-top: 0;
  margin-bottom: 0.25rem;
}

.contact-front .flip-open-button {
  margin-top: auto;
}

/*
 * Sized to the FRONT face's teaser text + button (~165px at
 * mobile card widths), not the back face -- the back face's
 * full form needs ~550-570px, way out of proportion with every
 * other card on the page, so it scrolls internally instead
 * (.contact-back overflow-y: auto below) rather than forcing
 * the whole card that tall.
 */
.contact-card {
  min-height: 190px;
}

.contact-back {
  overflow-y: auto;
}

.contact-back h2 {
  margin-top: 0;
  margin-bottom: .5rem;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(200, 162, 255, 0.25);
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
}

.contact-form textarea {
  resize: vertical;
}

.contact-form select option {
  background: #08080c;
  color: #ffffff;
}

.form-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  min-height: 1.4rem;
}

@media (min-width: 768px) {

  /*
   * Front face needs more height here than at mobile width --
   * the card is narrower per-column (2-4 col grid vs. full-width
   * single column), so the teaser paragraph wraps to more lines.
   */
  .contact-card {
    min-height: 340px;
  }

}