/**
 * Our Stays V2 — page sections.
 *
 * Every rule is scoped to .sn-our-stays-v2-page (the body class added by
 * inc/our-stays-v2.php). The chrome primitives live in v2-chrome.css, the
 * property chapters in v2-collection.css and the trust band and reviews in
 * v2-shared.css; this file holds only the sections that belong to this page:
 * the masthead, the planner, Stay Together, Standards, What's Included, the
 * add-ons ledger and the attractions index.
 *
 * Values come from tokens.css. No raw hex belongs in this file.
 */

.sn-our-stays-v2-page {
  --sn-container: var(--sn-v2-container);
}

/* ------------------------------------------------------------------ *
 * Masthead
 *
 * The page opener under the solid header. Tighter on top than a regular
 * section so the eyebrow sits close to the header's hairline.
 * ------------------------------------------------------------------ */

.sn-our-stays-v2-page .sn-v2-stays-masthead {
  padding-top: clamp(48px, 6vw, 88px);
  padding-bottom: 0;
  background-color: var(--sn-ivory);
}

.sn-our-stays-v2-page .sn-v2-stays-masthead .sn-v2-masthead {
  padding-bottom: clamp(48px, 6vw, 88px);
  border-bottom: 0;
}

/* ------------------------------------------------------------------ *
 * Planner — the ledger row
 *
 * The invitation in columns 1–5, the form in 6–12: two selects and the
 * submit on one line, the hint beneath. Stacks to a single column on phones.
 * ------------------------------------------------------------------ */

.sn-our-stays-v2-page .sn-v2-planner__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sn-space-8) var(--sn-v2-gap);
  align-items: end;
}

.sn-our-stays-v2-page .sn-v2-planner__lead {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--sn-space-5);
}

/* On the dark ground the orange italic reads as a warning; the second line
   is set in ivory instead, as the trust band does. */
.sn-our-stays-v2-page .sn-v2-title em.sn-v2-planner__title-line,
.sn-our-stays-v2-page .sn-v2-title em.sn-v2-included__title-line {
  color: var(--sn-ivory);
  opacity: 0.82;
}

.sn-our-stays-v2-page .sn-v2-planner__form {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sn-space-5) var(--sn-space-5);
  align-items: end;
  padding-top: var(--sn-space-6);
  border-top: 1px solid var(--sn-v2-hairline-inverse);
}

.sn-our-stays-v2-page .sn-v2-planner__label {
  display: block;
  margin-bottom: var(--sn-space-2);
  color: var(--sn-text-inverse-muted);
  font-family: var(--sn-font-body);
  font-size: var(--sn-label);
  font-weight: var(--sn-weight-medium);
  letter-spacing: var(--sn-tracking-label);
  text-transform: uppercase;
}

.sn-our-stays-v2-page .sn-v2-planner__control {
  width: 100%;
  min-height: var(--sn-tap-target);
  padding: 12px 16px;
  border: 1px solid var(--sn-border-inverse);
  border-radius: var(--sn-radius-sm);
  background-color: rgba(249, 248, 244, 0.06);
  color: var(--sn-white);
  font-family: var(--sn-font-body);
  font-size: var(--sn-body);
}

.sn-our-stays-v2-page .sn-v2-planner__control:focus-visible {
  outline: var(--sn-focus-ring);
  outline-offset: 2px;
}

.sn-our-stays-v2-page .sn-v2-planner__control option {
  color: var(--sn-text);
}

.sn-our-stays-v2-page .sn-v2-planner__submit .sn-v2-btn {
  width: 100%;
  min-height: var(--sn-tap-target);
}

.sn-our-stays-v2-page .sn-v2-planner__hint {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--sn-text-inverse-muted);
  font-family: var(--sn-font-body);
  font-size: var(--sn-small);
  line-height: var(--sn-leading-body);
}

@media (min-width: 768px) {
  .sn-our-stays-v2-page .sn-v2-planner__form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  }

  .sn-our-stays-v2-page .sn-v2-planner__submit .sn-v2-btn {
    width: auto;
  }
}

@media (min-width: 1024px) {
  .sn-our-stays-v2-page .sn-v2-planner__lead {
    grid-column: 1 / span 5;
    padding-right: var(--sn-space-6);
  }

  .sn-our-stays-v2-page .sn-v2-planner__form {
    grid-column: 6 / -1;
    padding-top: 0;
    border-top: 0;
  }
}

/* ------------------------------------------------------------------ *
 * Shared ledger geometry
 *
 * Stay Together, Standards, What's Included and the attractions index all
 * use the same hairline-divided row: items separated by a vertical rule on
 * wide screens, stacked with a top rule when narrow.
 * ------------------------------------------------------------------ */

.sn-our-stays-v2-page .sn-v2-together__list,
.sn-our-stays-v2-page .sn-v2-standards__list,
.sn-our-stays-v2-page .sn-v2-included__list,
.sn-our-stays-v2-page .sn-v2-attractions__list,
.sn-our-stays-v2-page .sn-v2-addons__list {
  display: grid;
  grid-template-columns: 1fr;
  margin: var(--sn-space-9) 0 0;
  padding: 0;
  list-style: none;
}

.sn-our-stays-v2-page .sn-v2-together__item,
.sn-our-stays-v2-page .sn-v2-standards__item,
.sn-our-stays-v2-page .sn-v2-attractions__item {
  display: flex;
  flex-direction: column;
  gap: var(--sn-space-4);
  padding: var(--sn-space-6) 0;
  border-top: 1px solid var(--sn-v2-hairline);
}

.sn-our-stays-v2-page .sn-v2-together__title,
.sn-our-stays-v2-page .sn-v2-standards__title,
.sn-our-stays-v2-page .sn-v2-attractions__title {
  margin: 0;
  font-family: var(--sn-font-display);
  font-size: var(--sn-heading-l);
  font-weight: var(--sn-weight-display);
  line-height: var(--sn-leading-heading);
}

.sn-our-stays-v2-page .sn-v2-together__item .sn-v2-prose,
.sn-our-stays-v2-page .sn-v2-standards__item .sn-v2-prose {
  max-width: 34ch;
}

@media (min-width: 768px) {
  .sn-our-stays-v2-page .sn-v2-together__list,
  .sn-our-stays-v2-page .sn-v2-standards__list,
  .sn-our-stays-v2-page .sn-v2-attractions__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sn-v2-gap);
  }
}

@media (min-width: 1024px) {
  .sn-our-stays-v2-page .sn-v2-together__list,
  .sn-our-stays-v2-page .sn-v2-attractions__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 0;
  }

  .sn-our-stays-v2-page .sn-v2-standards__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 0;
  }

  .sn-our-stays-v2-page .sn-v2-together__item,
  .sn-our-stays-v2-page .sn-v2-standards__item,
  .sn-our-stays-v2-page .sn-v2-attractions__item {
    padding: var(--sn-space-7) var(--sn-space-6) var(--sn-space-7) 0;
    border-top: 1px solid var(--sn-v2-hairline);
    border-left: 1px solid var(--sn-v2-hairline);
    padding-left: var(--sn-space-6);
  }

  .sn-our-stays-v2-page .sn-v2-together__item:first-child,
  .sn-our-stays-v2-page .sn-v2-standards__item:first-child {
    padding-left: 0;
    border-left: 0;
  }

  /* Attractions keep equal column widths so the photo slots line up:
     every item is padded, the list pulls the first column flush. */
  .sn-our-stays-v2-page .sn-v2-attractions__list {
    margin-left: calc(-1 * var(--sn-space-6));
  }

  .sn-our-stays-v2-page .sn-v2-attractions__item {
    position: relative;
    border-top: 0;
  }

  .sn-our-stays-v2-page .sn-v2-attractions__item::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    border-top: 1px solid var(--sn-v2-hairline);
  }

  .sn-our-stays-v2-page .sn-v2-attractions__item:nth-child(3n + 1) {
    border-left: 0;
  }

  .sn-our-stays-v2-page .sn-v2-attractions__item:nth-child(3n + 1)::before {
    left: var(--sn-space-6);
  }
}

/* ------------------------------------------------------------------ *
 * Stay Together
 * ------------------------------------------------------------------ */

.sn-our-stays-v2-page .sn-v2-together {
  background-color: var(--sn-white);
}

.sn-our-stays-v2-page .sn-v2-together__aside {
  display: flex;
  justify-content: flex-start;
}

@media (min-width: 1024px) {
  .sn-our-stays-v2-page .sn-v2-together__aside {
    justify-content: flex-end;
  }
}

/* ------------------------------------------------------------------ *
 * Standards
 * ------------------------------------------------------------------ */

.sn-our-stays-v2-page .sn-v2-standards {
  background-color: var(--sn-ivory);
}

.sn-our-stays-v2-page .sn-v2-standards__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sn-space-4);
}

/* ------------------------------------------------------------------ *
 * What's Included — the dark grid
 * ------------------------------------------------------------------ */

.sn-our-stays-v2-page .sn-v2-included__list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--sn-space-5);
}

.sn-our-stays-v2-page .sn-v2-included__item {
  display: flex;
  align-items: center;
  gap: var(--sn-space-4);
  padding: var(--sn-space-5) 0;
  border-top: 1px solid var(--sn-v2-hairline-inverse);
  color: var(--sn-white);
}

.sn-our-stays-v2-page .sn-v2-included__item .sn-v2-icon-ring {
  border-color: rgba(249, 248, 244, 0.18);
  background-color: rgba(249, 248, 244, 0.06);
  color: var(--sn-ivory);
}

.sn-our-stays-v2-page .sn-v2-included__item .sn-v2-icon-ring svg {
  width: 18px;
  height: 18px;
}

.sn-our-stays-v2-page .sn-v2-included__label {
  font-family: var(--sn-font-display);
  font-size: var(--sn-heading-m);
  font-weight: var(--sn-weight-display);
  line-height: 1.2;
}

@media (min-width: 1024px) {
  .sn-our-stays-v2-page .sn-v2-included__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------------ *
 * Add-ons — the numbered ledger
 * ------------------------------------------------------------------ */

.sn-our-stays-v2-page .sn-v2-addons {
  background-color: var(--sn-white);
}

.sn-our-stays-v2-page .sn-v2-addons__list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--sn-space-5);
}

.sn-our-stays-v2-page .sn-v2-addons__item {
  display: flex;
  align-items: baseline;
  gap: var(--sn-space-4);
  padding: var(--sn-space-4) 0;
  border-top: 1px solid var(--sn-v2-hairline);
}

.sn-our-stays-v2-page .sn-v2-addons__item .sn-v2-num {
  flex: 0 0 2ch;
  font-variant-numeric: tabular-nums lining-nums;
}

.sn-our-stays-v2-page .sn-v2-addons__label {
  font-family: var(--sn-font-display);
  font-size: var(--sn-heading-m);
  font-weight: var(--sn-weight-display);
  line-height: 1.2;
}

.sn-our-stays-v2-page .sn-v2-addons__foot {
  margin-top: var(--sn-space-8);
}

@media (min-width: 1024px) {
  .sn-our-stays-v2-page .sn-v2-addons__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------------ *
 * Attractions — the index on sand
 * ------------------------------------------------------------------ */

.sn-our-stays-v2-page .sn-v2-attractions {
  background-color: var(--sn-sand);
}

.sn-our-stays-v2-page .sn-v2-attractions__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--sn-radius-md);
  background-color: var(--sn-ivory);
}

.sn-our-stays-v2-page .sn-v2-attractions__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder until the client supplies destination photography. */
.sn-our-stays-v2-page .sn-v2-attractions__media--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sn-space-2);
  border: 1px dashed rgba(204, 85, 0, 0.32);
  color: var(--sn-orange-ink);
}

.sn-our-stays-v2-page .sn-v2-attractions__media-label {
  color: var(--sn-text-muted);
  font-family: var(--sn-font-body);
  font-size: var(--sn-label);
  letter-spacing: var(--sn-tracking-label);
  text-transform: uppercase;
}

.sn-our-stays-v2-page .sn-v2-attractions__head {
  display: flex;
  align-items: baseline;
  gap: var(--sn-space-3);
}

.sn-our-stays-v2-page .sn-v2-attractions__places {
  display: flex;
  flex-direction: column;
  gap: var(--sn-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--sn-text-muted);
  font-family: var(--sn-font-body);
  font-size: var(--sn-body);
  line-height: var(--sn-leading-body);
}

/* ------------------------------------------------------------------ *
 * Mobile refinements
 * ------------------------------------------------------------------ */

@media (max-width: 767px) {
  .sn-our-stays-v2-page .sn-v2-included__list,
  .sn-our-stays-v2-page .sn-v2-addons__list {
    grid-template-columns: 1fr;
  }

  .sn-our-stays-v2-page .sn-v2-together__aside .sn-v2-btn {
    width: 100%;
  }
}