/* ======================================================================
   SAIL SQUAD GREECE
   Page specific. Loaded only by this trip, deliberately NOT added to
   snow-squad.css, because touching the shared sheet changes its cache
   busting version on every other trip page.

   Mobile first, matching the rest of the trip page system.
   ====================================================================== */

/* ── Choose Your Boat ─────────────────────────────────────────────────
   The upgrade line and the payment note beneath each boat's price. The
   tabs, price figures and timeline all reuse the shared trip page styles,
   so there is nothing else to add here. */

.page-trip .boat-upgrade {
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--sand);
  margin-top: 0.9rem;
  max-width: var(--measure);
  margin-inline: auto;
}

/* A condition attached to one boat type. Sand on navy at body size, so it
   reads as a real note rather than small print someone can miss. */
.page-trip .boat-disclaimer {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--sand);
  margin-top: 1rem;
  max-width: var(--measure);
  margin-inline: auto;
  padding: 0.9rem 1.05rem;
  border-left: 3px solid var(--teal);
  background: rgba(17, 166, 141, 0.07);
  border-radius: 4px;
  text-align: left;
}

/* ── Boat photos ──────────────────────────────────────────────────────
   The same swipeable strip as the past trips gallery on the hub. Its rules
   live in snow-squad-hub.css, which this page does not load, because that
   sheet also restyles .hero-title. So the component is rebuilt here from
   the same classes, at the heights this page needs. */

/* The boat photos are the shared gallery slider (SLIDERS in style.css),
   which also centres them when there are too few to fill the width. */
.page-trip .boat-strip {
  margin-top: 1.5rem;
}

/* Height is fixed, width follows the photo, so portrait and landscape both
   keep their own shape and the strip can never grow taller than 240px. */
.page-trip .boat-strip .gallery-img {
  height: 200px;
  width: auto;
  max-width: none;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

/* stand in tiles, same height as a real photo */
.page-trip .boat-strip .placeholder {
  height: 200px;
  width: 150px;
  aspect-ratio: auto;
  margin: 0;
}

@media (min-width: 768px) {
  .page-trip .boat-strip .gallery-img,
  .page-trip .boat-strip .placeholder {
    height: 240px;
  }
  .page-trip .boat-strip .placeholder {
    width: 180px;
  }
}

/* ── Day mosaics ──────────────────────────────────────────────────────
   One connected block of landscape tiles under each day's copy. A 2px gap
   keeps the tiles distinct while the block still reads as a single unit,
   so only the four outside corners are rounded.

   Tiles are 3:2, so a two by two block is wider than it is tall. That is
   the point on a phone: the block takes less vertical space, and the
   moments and copy underneath stay on screen while you flick through. */

.page-trip .mosaic {
  display: grid;
  gap: 2px;
  max-width: 720px;
  margin: 1.5rem auto 0;
  border-radius: 8px;
  overflow: hidden;            /* this is what rounds the outside corners only */
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-trip .mosaic-tile {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

/* 1 and 2 photos: a single row, tiles keep the same height */
.page-trip .mosaic--1 { grid-template-columns: minmax(0, 1fr); }
.page-trip .mosaic--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 3: one row of three. 4: two by two. */
.page-trip .mosaic--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 5: three across the top, two wider beneath */
.page-trip .mosaic--5 > *:nth-child(4) { grid-column: span 2; }
.page-trip .mosaic--5 > *:nth-child(4),
.page-trip .mosaic--5 > *:nth-child(5) { aspect-ratio: 3 / 2; }

/* 6: three across, two rows, every tile square */

/* no photos yet: one block the size a six tile mosaic would be */
.page-trip .mosaic--0 { grid-template-columns: minmax(0, 1fr); }

.page-trip .mosaic .placeholder.mosaic-empty {
  aspect-ratio: 3 / 2;
  height: auto;
  margin: 0;
  border-radius: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   A DAY IN THE WEEK
   Targeted by id prefix, so only the seven day panels are affected and
   the boats and details tabs on this page are left alone. No template
   change, which is why every other trip page is untouched.

   The point of the layout is that the photos stay in view while you read
   the day. On a phone the mosaic sits directly under the heading; from
   900px it moves into a column beside the text.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Mobile: heading, mosaic, moments, copy ─────────────────────────── */

.page-trip [id^="week-panel-day"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0.9rem;
}

/* Left aligned: it heads the timeline and copy beneath it, not the page. */
.page-trip [id^="week-panel-day"] > h3        { grid-row: 1; margin: 0; text-align: left; }
.page-trip [id^="week-panel-day"] > .mosaic   { grid-row: 2; margin: 0 auto; }
.page-trip [id^="week-panel-day"] > .day-grid { grid-row: 3; margin: 0; }

/* the two by two runs the full content width. At 3:2 a four tile block is
   two thirds as tall as it is wide, so it stays short without a cap. */
.page-trip [id^="week-panel-day"] > .mosaic--4 { max-width: none; }
.page-trip [id^="week-panel-day"] > .mosaic--1 { max-width: 260px; }
.page-trip [id^="week-panel-day"] > .mosaic--5,
.page-trip [id^="week-panel-day"] > .mosaic--6 { max-width: 390px; }
.page-trip [id^="week-panel-day"] > .mosaic--0 { max-width: 390px; }

/* moments and copy now stack, because both live in the same column */
.page-trip [id^="week-panel-day"] .day-grid {
  display: block;
}

/* ── Compact moments ────────────────────────────────────────────────── */

.page-trip [id^="week-panel-day"] .moments {
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0 0 0 1rem;
  border-left: 2px solid rgba(17, 166, 141, 0.35);
}

.page-trip [id^="week-panel-day"] .moment {
  position: relative;
  padding: 0 0 0.42rem;
  line-height: 1.45;
}

.page-trip [id^="week-panel-day"] .moment:last-child { padding-bottom: 0; }

.page-trip [id^="week-panel-day"] .moment::before {
  content: '';
  position: absolute;
  left: -1.4rem;
  top: 0.45rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px var(--navy);
}

/* all three parts on one line, wrapping only when they must */
.page-trip [id^="week-panel-day"] .moment-when,
.page-trip [id^="week-panel-day"] .moment-title,
.page-trip [id^="week-panel-day"] .moment-detail {
  display: inline;
  margin: 0;
}

.page-trip [id^="week-panel-day"] .moment-when {
  font-family: 'Inter', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
}

.page-trip [id^="week-panel-day"] .moment-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.12rem;
  color: var(--white);
}

.page-trip [id^="week-panel-day"] .moment-detail {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  color: var(--sand);
}

/* the dot between each part */
.page-trip [id^="week-panel-day"] .moment-when::after,
.page-trip [id^="week-panel-day"] .moment-title::after {
  content: ' · ';
  color: var(--sand);
  opacity: 0.55;
  font-weight: 400;
  letter-spacing: 0;
}

/* The day's copy fills its column rather than the reading measure. The gap
   between paragraphs comes from the shared --flow rule. */
.page-trip [id^="week-panel-day"] .day-copy .copy {
  max-width: none;
  margin-inline: 0;
}

/* ── 768px to 900px: two columns, smaller mosaic ────────────────────── */

@media (min-width: 768px) {
  .page-trip [id^="week-panel-day"] {
    grid-template-columns: minmax(0, 55%) minmax(0, 45%);
    column-gap: 1.75rem;
    align-items: start;
  }
  .page-trip [id^="week-panel-day"] > h3        { grid-column: 1; grid-row: 1; }
  .page-trip [id^="week-panel-day"] > .day-grid { grid-column: 1; grid-row: 2; }
  .page-trip [id^="week-panel-day"] > .mosaic   { grid-column: 2; grid-row: 1 / span 2; margin: 0; }

  .page-trip [id^="week-panel-day"] > .mosaic,
  .page-trip [id^="week-panel-day"] > .mosaic--0,
  .page-trip [id^="week-panel-day"] > .mosaic--1,
  .page-trip [id^="week-panel-day"] > .mosaic--4,
  .page-trip [id^="week-panel-day"] > .mosaic--5,
  .page-trip [id^="week-panel-day"] > .mosaic--6 {
    max-width: 380px;
  }
}

/* ── 900px and up: full size mosaic beside the text ─────────────────── */

@media (min-width: 900px) {
  .page-trip [id^="week-panel-day"] > .mosaic,
  .page-trip [id^="week-panel-day"] > .mosaic--0,
  .page-trip [id^="week-panel-day"] > .mosaic--1,
  .page-trip [id^="week-panel-day"] > .mosaic--4,
  .page-trip [id^="week-panel-day"] > .mosaic--5,
  .page-trip [id^="week-panel-day"] > .mosaic--6 {
    max-width: 460px;
  }
}