/* =========================================================================
   Move Camp × Real Sport — Family Ski Week, Val di Sole
   Mirrors the Figma file "Move Camp x Real Sport LP DESIGN"
   (Desktop page, 1551px frame, 1152px container).
   Every value comes from Figma's Properties panel.
   ========================================================================= */

:root {
  /* Colors */
  --orange: #f05a28;
  --orange-dark: #d8491c;
  --navy: #1e3a5f;
  --cyan: #1aafe6;
  --ink: #364153;
  --body: #6a7282;
  --muted: #99a1af;
  --line: #f3f4f6;
  --line-strong: #e5e7eb;
  --surface: #ffffff;
  --surface-alt: #f8fbff;
  --surface-head: #f9fafb;
  --dark: #1e2a38;
  --darker: #151e28;
  --hero-shade: 8, 16, 32;

  /* Metrics */
  --container: 1152px;
  --gutter: 40px;
  --col-gap: 64px;
  --radius-card: 16px;
  --radius-media: 8px;
  --section-y: 96px;
  --header-h: 65px;

  /* Typography */
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Nunito', system-ui, -apple-system, sans-serif;
}

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

html {
  scroll-behavior: smooth;
}

/* The header is sticky, so an anchor jump would tuck the section heading
   underneath it. Offset = header height + breathing room. */
section[id],
main[id] {
  scroll-margin-top: calc(var(--header-h) + 24px);
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 26px;
  -webkit-font-smoothing: antialiased;
}

/* Locks page scrolling while the registration script shows its modal. */
html.registration-modal-open {
  overflow: hidden;
}

body.registration-modal-open {
  position: fixed;
  inset-inline: 0;
  top: var(--registration-modal-scroll-offset, 0);
  width: 100%;
  overflow: hidden;
}

h1,
h2,
h3,
h4,
p,
figure,
ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

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

a {
  color: inherit;
}

/* Page frame — the mockup is 1551px wide and centred. */
.page {
  max-width: 1551px;
  margin-inline: auto;
  background: var(--surface);
}

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --------------- Shared section heading block (Frame 3) ----------------- */

.section-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 20px;
}

.eyebrow {
  font-size: 20px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--orange);
}

.section-head h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 50px;
  line-height: 1.15;
  color: var(--ink);
}

/* Forces text (not emoji) presentation for the stars — without it macOS
   substitutes Apple Color Emoji and they render multicoloured. */
.stars {
  font-family: 'Hiragino Sans', 'Apple Symbols', 'Segoe UI Symbol', sans-serif;
  font-variant-emoji: text;
  color: #f5b700;
}

/* ----------------------------- Navigation ------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}

.site-header > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 28px;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.02em;
}

/* The logos are image files — Figma sizes: RealSport 81.05×28,
   MoveCamp 57.09×24. object-fit: contain matches Figma's "Fit" mode. */
.brand-logo {
  display: block;
  width: auto;
  object-fit: contain;
}

.brand-logo--realsport {
  height: 28px;
}

.brand-logo--movecamp {
  height: 24px;
}

.brand-x {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--line-strong);
}

.nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav a {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--body);
  text-decoration: none;
  white-space: nowrap;
}

.nav a:hover {
  color: var(--ink);
}

.nav-cta {
  padding: 8px 20px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff !important;
  font-weight: 600;
  transition: background-color 0.15s ease;
}

.nav-cta:hover,
.nav-cta:focus-visible {
  background: var(--orange-dark);
}

.menu-toggle {
  display: none;
  background: none;
  border: 0;
  color: var(--navy);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

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

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #fff;
}

/* A CSS background cannot use <picture>, so the format is picked with
   image-set(). The plain url() declaration above it is the fallback: browsers
   without image-set() support simply keep the JPEG. */
.hero-art {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
      90deg,
      rgba(var(--hero-shade), 0.82) 0%,
      rgba(var(--hero-shade), 0.28) 50%,
      rgba(var(--hero-shade), 0) 100%
    ),
    url('/images/herro-image.jpg');
  background-image: linear-gradient(
      90deg,
      rgba(var(--hero-shade), 0.82) 0%,
      rgba(var(--hero-shade), 0.28) 50%,
      rgba(var(--hero-shade), 0) 100%
    ),
    image-set(
      url('/images/herro-image.webp') type('image/webp'),
      url('/images/herro-image.jpg') type('image/jpeg')
    );
  background-size: cover;
  background-position: center;
}

/* In Figma the content block sits 153.73px from the top and is 547px tall
   (including its 112px bottom padding), with the 79px facts bar below. */
.hero-content {
  position: relative;
  margin-top: 153.73px;
  height: 547px;
  padding-bottom: 112px;
}

.hero-eyebrow {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}

.hero h1 {
  padding-top: 16px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 104px;
  line-height: 104px;
  letter-spacing: 0;
  color: #fff;
}

.hero h1 em {
  font-style: normal;
  color: var(--orange);
}

.hero-lede {
  max-width: 576px;
  margin-top: 20px;
  font-size: 18px;
  line-height: 29.25px;
  color: rgba(255, 255, 255, 0.8);
}

.hero-choose {
  margin-top: 32px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.hero-actions {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.hotel-pill {
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

/* Solid button hover: darken the background only, leave the text colour
   alone. Filters (brightness) are out — they apply to the whole element
   and would lighten the text and icons too. */
.hotel-pill:hover,
.hotel-pill:focus-visible {
  background: var(--orange-dark);
}

/* The second hotel is the outline variant in the design: 2px accent
   border, translucent background and a backdrop blur instead of a fill. */
.hotel-pill--outline {
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid var(--orange);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.hotel-pill--outline:hover,
.hotel-pill--outline:focus-visible {
  background: rgba(255, 255, 255, 0.22);
}

/* Facts bar — full frame width, pinned to the bottom of the hero. */
.hero-facts {
  position: relative;
  background: rgba(30, 58, 95, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-facts .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-inline: var(--gutter);
}

.hero-facts .container > div {
  padding: 20px 24px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-facts .container > div:last-child {
  border-right: 0;
}

.hero-facts strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  line-height: 18px;
  color: #fff;
}

.hero-facts span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 16px;
  color: rgba(255, 255, 255, 0.4);
}

/* ------------------------ Section: Val di Sole -------------------------- */

.section {
  padding-block: var(--section-y);
}

.section-white {
  background: var(--surface);
}

.section-tint {
  background: var(--surface-alt);
}

.split-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
}

.prose p + p {
  margin-top: 24px;
}

.prose p {
  font-size: 16px;
  line-height: 26px;
  color: var(--body);
}

/* 2×2 stats card — a 1px grid gap fakes the hairline dividers. */
.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 32px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.stats div {
  padding: 24px;
  background: var(--surface);
}

.stats strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 24px;
  line-height: 32px;
  color: var(--cyan);
}

.stats span {
  display: block;
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
}

.map-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.map-card picture {
  display: block;
}

.map-card img {
  width: 100%;
  height: auto;
}

.map-caption {
  margin-top: 12px;
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
  text-align: center;
}

/* ---------------------------- Hotel sections --------------------------- */

/* Gallery: 4×3 grid with a 6px gap, the first tile spans 2×2. */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 212.63px);
  gap: 6px;
  margin-top: 4px;
}

.gallery figure {
  margin: 0;
  border-radius: var(--radius-media);
  overflow: hidden;
  background: var(--line);
}

.gallery figure:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

/* The Albergo Dimaro gallery has 5 photos — two rows instead of three. */
.gallery--short {
  grid-template-rows: repeat(2, 212.63px);
}

/* <picture> is inline by default; it has to fill the grid cell so the image
   inside can still stretch to 100% height. */
.gallery picture {
  display: block;
  height: 100%;
}

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

.hotel-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
  margin-top: 32px;
}

.hotel-body .hotel-subhead {
  padding-top: 24px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20px;
  line-height: 28px;
  color: var(--ink);
}

.hotel-body .feature-list {
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.feature-list li {
  display: flex;
  gap: 12px;
  font-size: 15px;
  line-height: 24px;
  color: var(--body);
}

.feature-list li span[aria-hidden] {
  flex: none;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.tag {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--line);
  font-size: 12px;
  line-height: 16px;
  color: var(--body);
}

.footnote {
  margin-top: 12px;
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
}

/* Price card */
.price-card {
  align-self: start;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface);
}

.price-card-title {
  padding: 16px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--ink);
}

.price-table {
  width: 100%;
  border-collapse: collapse;
}

.price-table th {
  padding: 10px 16px;
  background: var(--surface-head);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  text-align: left;
  color: var(--body);
}

.price-table td {
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
}

/* The value column is right-aligned, so its header has to follow — otherwise
   the label floats away from the numbers it describes. */
.price-table th:last-child {
  text-align: right;
}

.price-table td:last-child {
  text-align: right;
  font-family: var(--font-display);
  font-weight: 900;
}

.price-note {
  padding: 12px 16px;
  font-size: 13px;
  line-height: 20px;
  color: var(--body);
  border-top: 1px solid var(--line);
}

.price-excluded {
  margin-top: 16px;
  font-size: 13px;
  line-height: 20px;
  color: var(--muted);
}

.button-block {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 16px;
  padding: 14px 24px;
  border-radius: 12px;
  background: var(--orange);
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.button-block:hover,
.button-block:focus-visible {
  background: var(--orange-dark);
}

/* ---------- Cards (training, selling points) and rate tables ----------- */

.section-lede {
  max-width: 900px;
  font-size: 16px;
  line-height: 26px;
  color: var(--body);
}

.section-head h2 em {
  font-style: normal;
  color: var(--orange);
}

/* 3×2 card grid from the design: 370.66×200 card, 20px gap. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}

.card {
  padding: 24px;
  background: var(--surface-head);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

.card-icon {
  display: block;
  font-size: 20px;
  line-height: 28px;
}

.card h3 {
  margin: 8px 0 8px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
}

.card p {
  font-size: 12px;
  line-height: 19.5px;
  color: var(--muted);
}

.rate-tables {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}

.rate-card {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface);
}

.rate-card-title {
  padding: 10px 16px;
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
  color: #fff;
}

.rate-card-title--orange {
  background: var(--orange);
}

/* The design marks the second table with a yellow bar — dark text for contrast. */
.rate-card-title--yellow {
  background: #ffc933;
  color: var(--ink);
}

/* --------------------- Included / excluded lists ----------------------- */

.list-title {
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: var(--ink);
}

.check-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.check-list li {
  display: flex;
  gap: 12px;
  font-size: 14px;
  line-height: 22px;
  color: var(--body);
}

.mark {
  flex: none;
  font-weight: 700;
}

.mark--yes {
  color: var(--cyan);
}

.mark--no {
  color: var(--orange);
}

/* ---------------------- "Na śniegu najlepiej" gallery ------------------- */

/* The 12 photos share a height but not a shape (281×500 portraits up to an
   890×500 panorama), so they keep their own aspect ratio — nothing is cropped.
   CSS `columns` was dropped: it lets the engine decide where each photo lands,
   and WebKit (every browser on iOS) balances it differently from Blink, which
   left a hole on iPhone. Here the columns are fixed in the markup instead, so
   every engine renders the same layout.
   Two pairs of two columns: side by side they give 4 columns on desktop;
   on narrow screens each pair stacks into one column, giving 2. The photos
   are pre-assigned so both layouts come out balanced. */
.photo-grid {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 32px;
}

.photo-pair {
  flex: 1;
  display: flex;
  gap: 6px;
}

.photo-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.photo-grid figure {
  margin: 0;
  border-radius: var(--radius-media);
  overflow: hidden;
  background: var(--line);
}

/* <picture> is inline by default, which would add a baseline gap under each
   photo and break the flush mosaic. */
.photo-grid picture {
  display: block;
}

.photo-grid img {
  width: 100%;
  height: auto;
}

.section-dark {
  background: var(--dark);
  color: rgba(255, 255, 255, 0.8);
}

.section-dark .section-head h2 {
  color: #fff;
}

/* ----------------------------- Registration ---------------------------- */

.registration .lead {
  max-width: 576px;
  margin-bottom: 32px;
  font-size: 16px;
  line-height: 26px;
  color: rgba(255, 255, 255, 0.8);
}

.form-switcher {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.form-switcher button {
  padding: 12px 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.form-switcher button.active {
  background: var(--orange);
  border-color: var(--orange);
}

.booking-frame {
  display: none;
  padding: 24px;
  border-radius: var(--radius-card);
  background: #fff;
}

.booking-frame.active-frame {
  display: block;
}

/* iframeResizer grows the frame to fit Skaleo's content (see script.js).
   This min-height is a hard floor that stays in place: the resizer can only
   push the frame taller, never below it, so an under-reported height cannot
   clip the booking button. */
.skaleo-iframe {
  display: block;
  width: 1px;
  min-width: 100%;
  max-width: 100%;
  min-height: 180px;
  border: 0;
  overflow: hidden;
}

/* Narrow screens wrap the CTA label onto two lines and render it larger, so
   the floor has to be higher there. */
@media (max-width: 860px) {
  .skaleo-iframe {
    min-height: 240px;
  }
}

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

.footer {
  padding-block: 32px;
  background: var(--darker);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.6);
}

.footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Footer logos are flattened to a single grey silhouette: brightness(0)
   collapses every colour to black while keeping the alpha channel, then
   invert() lifts that black to the target grey. Both brands stay equally
   quiet against the dark footer instead of competing with it. */
.footer .brand-logo {
  filter: brightness(0) invert(0.62);
}

.footer .brand-x {
  color: #3a4654;
}

.footer p {
  font-size: 12px;
  line-height: 16px;
}

/* The copyright line is secondary to the trip details — dropping its opacity
   gives the block a reading order instead of two equally loud lines. */
.footer p:last-child {
  color: rgba(255, 255, 255, 0.38);
}

/* ------------------------------ Responsive ------------------------------ */

@media (max-width: 1100px) {
  .hero h1 {
    font-size: 72px;
    line-height: 76px;
  }

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


}

@media (max-width: 860px) {
  :root {
    --gutter: 20px;
    --col-gap: 32px;
    --section-y: 64px;
  }

  .nav {
    display: none;
  }

  .nav.nav-open {
    display: flex;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 18px var(--gutter);
    background: #fff;
    border-bottom: 1px solid var(--line);
  }

  .nav.nav-open .nav-cta {
    text-align: center;
  }

  .menu-toggle {
    display: block;
  }

  .hero {
    min-height: 620px;
  }

  /* On narrow screens the hero content has to grow — the fixed 547px from
     the desktop design clipped the second hotel button. */
  .hero-content {
    margin-top: 0;
    height: auto;
    padding-top: 96px;
    padding-bottom: 64px;
  }

  .hero h1 {
    font-size: 48px;
    line-height: 52px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-facts .container {
    grid-template-columns: 1fr 1fr;
  }

  .hero-facts div:nth-child(2n) {
    border-right: 0;
  }

  .split-2,
  .hotel-body {
    grid-template-columns: 1fr;
  }

  .section-head h2 {
    font-size: 32px;
  }

  .gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 140px);
  }

  .card-grid,
  .rate-tables {
    grid-template-columns: 1fr;
  }

  .photo-pair {
    flex-direction: column;
  }

  /* Stacked and centred: the logo row stays horizontal, everything is
     centred on the axis. The two copy lines belong together, so they get a
     tight 8px gap while the logo keeps its distance from the block. */
  .footer .container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
  }

  .footer .brand {
    margin-bottom: 12px;
  }
}