/* thank-you — screen-specific styles. Merged into style.css once the screens settle.
 *
 * Scope: everything here is prefixed `.terrago-ty-` and only ever appears inside
 * patterns/page-thank-you.php, so this sheet is inert on every other screen even
 * though functions.php enqueues it site-wide.
 *
 * Specificity note (see CLAUDE.md → "CSS gotcha worth remembering"): core prints
 * `body .is-layout-flow > * { margin-block-start: … }` at (0,1,1) and
 * `body .is-layout-flex { display: flex }` at (0,1,1). Any rule here that has to
 * beat those carries a doubled class (`.wp-block-group.terrago-ty-…`) rather than
 * reaching for !important.
 */

/* ------------------------------------------------------------------- hero -- */

/* The white confirmation card straddles the photo: the photo band ends and the
   card hangs ~230px below it onto the page background. The wrapper is pulled up
   rather than the card, so the card keeps a normal static flow inside it. */
.terrago-ty-herowrap {
  position: relative;
  z-index: 1;
  margin-top: -230px;
}

.terrago-card.terrago-ty-herocard {
  padding: 3rem 3.5rem 3.25rem;
  border-color: transparent;
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(1, 1, 1, 0.08);
  text-align: center;
}

/* The design's label is a centred bullet + text with no rule running off to the
   edge, so suppress `.terrago-sectionlabel`'s trailing hairline and centre it. */
.terrago-ty-herocard .terrago-sectionlabel,
.terrago-sectionlabel.terrago-ty-label-centred {
  justify-content: center;
  margin-bottom: 1rem;
}
.terrago-ty-herocard .terrago-sectionlabel::after,
.terrago-sectionlabel.terrago-ty-label-centred::after {
  display: none;
}

.terrago-ty-herocard h1 {
  margin: 0 0 1.5rem;
  line-height: 1.08;
}

.terrago-ty-herocard p {
  margin-inline: auto;
}

.terrago-ty-spamnote {
  margin-top: 0.75rem;
}
.terrago-ty-spamnote a {
  color: inherit;
  text-decoration: underline;
}

/* Core's `is-style-outline` leaves the link at `currentColor`, which renders the
   design's blue-outlined secondary buttons in ink. Repaint them primary blue on
   white. (0,3,0) clears core's `.wp-block-button.is-style-outline > …` at (0,2,1). */
.terrago-ty-herocard .is-style-outline > .wp-block-button__link,
.terrago-ty-rowcta .is-style-outline > .wp-block-button__link {
  background-color: var(--wp--preset--color--contrast);
  border-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--primary);
}
.terrago-ty-herocard .is-style-outline > .wp-block-button__link:hover,
.terrago-ty-rowcta .is-style-outline > .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--contrast);
}

/* --------------------------------------------------------- booking summary -- */

/* Static placeholder data — see the header comment in page-thank-you.php. */
.terrago-ty-summary {
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--mint) 70%, var(--wp--preset--color--border));
  border-radius: var(--terrago-radius-sm);
  background: color-mix(in srgb, var(--wp--preset--color--mint) 22%, var(--wp--preset--color--contrast));
  overflow: hidden;
}
.wp-block-group.terrago-ty-summary > * {
  margin-block-start: 0;
}

/* Meta strips: a wrapping row of label/value pairs, with the last pair (Booking
   ID) pushed to the far edge on wide viewports. */
.terrago-ty-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.75rem;
  padding: 1.25rem 1.5rem;
}
.wp-block-group.terrago-ty-strip > * {
  margin-block-start: 0;
}
.terrago-ty-strip--head {
  border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--mint) 70%, var(--wp--preset--color--border));
}
.terrago-ty-strip--foot {
  border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--mint) 70%, var(--wp--preset--color--border));
}

.wp-block-group.terrago-ty-field > * {
  margin-block-start: 0;
}
.terrago-ty-field__label {
  margin: 0 0 0.2rem;
}
.terrago-ty-field__value {
  margin: 0;
  font-weight: 500;
}
@media (min-width: 900px) {
  .terrago-ty-field--end {
    margin-left: auto;
    text-align: right;
  }
}

/* Retreat row: thumbnail · body · stacked CTAs. */
.terrago-ty-row {
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: start;
  padding: 1.5rem;
}
.wp-block-group.terrago-ty-row > * {
  margin-block-start: 0;
}

.terrago-ty-thumb {
  margin: 0;
}
.terrago-ty-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--terrago-radius-sm);
}

.wp-block-group.terrago-ty-rowbody > * {
  margin-block-start: 0;
}
.terrago-ty-triptitle {
  margin: 0 0 0.5rem;
  line-height: 1.25;
}
.terrago-ty-rowbody > p {
  margin: 0 0 0.5rem;
}
.terrago-ty-includeslabel {
  margin-top: 1.25rem !important;
  margin-bottom: 0.75rem !important;
}

/* Two-column "Includes:" checklist with coral check tiles. */
.terrago-ty-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 2.5rem;
}
.terrago-ty-checks li {
  position: relative;
  break-inside: avoid;
  padding-left: 1.9rem;
  margin-bottom: 0.65rem;
}
.terrago-ty-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.12em;
  width: 1.1em;
  height: 1.1em;
  border-radius: 4px;
  background-color: var(--wp--preset--color--accent);
  /* White tick, drawn rather than typed so it never depends on a font. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 76%;
}

.wp-block-buttons.terrago-ty-rowcta {
  align-items: stretch;
}
.terrago-ty-rowcta .wp-block-button__link {
  display: block;
  padding: 0.8rem 1.5rem;
  font-size: var(--wp--preset--font-size--small);
  text-align: center;
  white-space: nowrap;
}

/* ----------------------------------------------------- what happens next -- */

/* Three columns, each holding a step card and a media tile in its own order
   (card→tile, tile→card, card→tile). The columns are separate flex stacks, not
   cells of one 6-slot grid: the design deliberately staggers them, so locking
   them to shared row lines would misalign every tile. */
.terrago-ty-mosaic {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
  align-items: start;
}
.wp-block-group.terrago-ty-mosaic > * {
  margin-block-start: 0;
}

.terrago-ty-col {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.wp-block-group.terrago-ty-col > * {
  margin-block-start: 0;
}

.terrago-card.terrago-ty-step {
  padding: 2rem 1.5rem;
  border-color: transparent;
  border-radius: var(--terrago-radius-sm);
  box-shadow: 0 10px 30px rgba(1, 1, 1, 0.05);
  text-align: center;
}
.wp-block-group.terrago-ty-step > * {
  margin-block-start: 0;
}
.terrago-ty-step .terrago-iconcircle {
  margin-bottom: 1.25rem;
}
.terrago-ty-step h3 {
  margin: 0.1rem 0 0.6rem;
}
.terrago-ty-step p {
  margin: 0;
}

.terrago-ty-tile {
  margin: 0;
}
.terrago-ty-tile img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--terrago-radius-sm);
}
/* The middle column leads with a taller portrait tile, which is what produces
   the design's staggered rhythm across the three columns. */
.terrago-ty-tile--lead img {
  aspect-ratio: 3 / 4.4;
}

/* ------------------------------------------------------------- responsive -- */

@media (max-width: 1023px) {
  .terrago-ty-row {
    grid-template-columns: 140px minmax(0, 1fr);
  }
  .terrago-ty-rowcta.wp-block-buttons {
    grid-column: 1 / -1;
  }
  .terrago-ty-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* The staggered column-2 placement only makes sense in the 3-up grid. */
  .terrago-ty-mosaic > *:nth-child(3),
  .terrago-ty-mosaic > *:nth-child(4) {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 781px) {
  .terrago-ty-herowrap {
    margin-top: -120px;
  }
  .terrago-card.terrago-ty-herocard {
    padding: 2rem 1.5rem 2.25rem;
  }
  .terrago-ty-herocard h1 {
    line-height: 1.14;
  }
}

@media (max-width: 599px) {
  .terrago-ty-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1.25rem;
  }
  .terrago-ty-thumb img {
    aspect-ratio: 16 / 9;
  }
  .terrago-ty-checks {
    columns: 1;
  }
  .terrago-ty-strip {
    gap: 0.9rem 1.75rem;
    padding: 1.1rem 1.25rem;
  }
  .terrago-ty-mosaic {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Needs the extra class: core prints `body .is-layout-flex{display:flex}`
     at (0,1,1) and a media query adds no specificity of its own. */
  .wp-block-buttons.terrago-ty-rowcta {
    width: 100%;
  }
}