/*
 * The page frame: one shell, one grid, and the rhythm between sections.
 */

.shell {
  width: min(100% - 2 * var(--azul-gutter), var(--azul-shell));
  margin-inline: auto;
}

.shell--wide { width: min(100% - 2 * var(--azul-gutter), var(--azul-shell-wide)); }

/* The home page and the package pages share one content width, the wide
   one: every shell of theirs follows. */
:is(.home, .has-hero-package) { --azul-shell: var(--azul-shell-wide); }

.site-main > * + * { margin-top: var(--azul-space-xl); }

.site-main { padding-bottom: var(--azul-space-xl); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--azul-space-m);
}

.page-header { margin-bottom: var(--azul-space-l); }

.section-title { margin-bottom: var(--azul-space-m); }

.entry__content > * + * { margin-top: var(--azul-space-m); }

.entry-header--media .entry-header__text { margin-top: var(--azul-space-l); }

.entry-header__media { margin: 0; }

.entry-header__img {
  width: 100%;
  max-height: 68vh;
  object-fit: cover;
}

/* Blocks that ask for the full width break out of the reading shell. */
.entry__content > .alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.entry__content > .alignwide { width: min(100vw - 2 * var(--azul-space-m), 1400px); margin-left: calc(50% - min(100vw - 2 * var(--azul-space-m), 1400px) / 2); }

/* Photo-led sections stack with a thin seam of ground between them. */
.entry__content > .azul-feature,
.entry__content > .azul-feature + .azul-cta-band { margin-top: var(--azul-space-xs); }

/* A page that ends on a full-width band runs straight into the footer. */
.site-main:has(> .entry:last-child > .entry__content > .alignfull:last-child) { padding-bottom: 0; }

/* Page sections: blocks that make a section of their own breathe like one;
   full-width bands sit closer, they carry their own padding. */
.entry__content > :is(.azul-media-cards, .azul-offers, .azul-reviews--wide, .azul-accordion--split, .azul-price-list) { margin-top: var(--azul-space-xl); }
.entry__content > .azul-feature + .azul-gallery { margin-top: var(--azul-space-l); }
.entry__content > .azul-gallery + .azul-feature,
.entry__content > .azul-reviews--wide + .azul-feature,
.entry__content > .azul-icon-strip + .azul-feature { margin-top: var(--azul-space-xl); }
.entry__content > .azul-icon-strip,
.entry__content > .azul-hero + * { margin-top: 0; }
/* The overlapping strip rides up over the hero: its own negative margin wins. */
.entry__content > .azul-icon-strip--overlap { margin-top: -48px; }
.entry__content > .azul-hero:has(+ .azul-icon-strip--overlap) .azul-hero__content { padding-bottom: calc(var(--azul-space-l) + 56px); }
.entry__content > .azul-icon-strip--overlap + * { margin-top: var(--azul-space-xl); }
@media (max-width: 1023px) { .entry__content > .azul-icon-strip--overlap { margin-top: -32px; } }
.entry__content > .azul-feature + .azul-media-cards { margin-top: var(--azul-space-m); }
.entry__content > :is(.azul-journey, .azul-gallery--mosaic, .azul-cta-band) { margin-top: var(--azul-space-xl); }
.entry__content > .azul-journey + .azul-gallery--mosaic { margin-top: 0; }
/* The reviews strip rides up over the foot of the hero above it; the bar
   variant runs full width right under it. */
.entry__content > .azul-hero + .azul-reviews-strip { margin-top: -64px; margin-inline: calc(50% - min(100vw - 32px, var(--azul-shell) + 40px) / 2); }
.entry__content > .azul-hero + .azul-reviews-strip--bar { width: auto; margin: 0; margin-inline: calc(50% - 50vw); background: var(--azul-paper); }

/* Section backgrounds. The page ground is cream; a block with the sand
   tone paints a full-bleed sand band behind itself and carries the section
   padding. A gallery row that follows a toned block stays on its band, so a
   section and its photos read as one. Bands touch, no gap. The reviews card
   paints its own box, so it never joins a band: it sits on cream with the
   section space around it. */
.entry__content > .tone-sand { position: relative; padding-block: var(--azul-space-xl); isolation: isolate; }
.entry__content > .tone-sand::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background: var(--azul-sand); }
.entry__content > .azul-feature--sand { background: var(--azul-sand); }
.entry__content > :is(.tone-sand, .azul-feature--sand) + .azul-gallery:not(.tone-sand) { position: relative; margin-top: 0; padding-block: var(--azul-space-l) var(--azul-space-xl); isolation: isolate; }
.entry__content > :is(.tone-sand, .azul-feature--sand) + .azul-gallery:not(.tone-sand)::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background: var(--azul-sand); }
/* A cream feature and its gallery row: the row carries the bottom space. */
.entry__content > .azul-feature:not(.azul-feature--sand, .azul-feature--dark) + .azul-gallery:not(.tone-sand) { margin-top: var(--azul-space-l); padding-bottom: var(--azul-space-xl); }
/* The reviews card after a feature: section space on both sides, as margins. */
.entry__content > .azul-feature + .azul-reviews--wide { margin-top: var(--azul-space-l); margin-bottom: var(--azul-space-xl); }
/* Bands touch what comes before them. */
.entry__content > :is(.azul-gallery, .azul-reviews--wide, .azul-section, .tone-sand, .azul-feature--sand, .azul-feature--dark) + :is(.tone-sand, .azul-feature--sand, .azul-feature--dark) { margin-top: 0; }
.entry__content > :is(.tone-sand, .azul-feature--sand) + .azul-feature:not(.azul-feature--sand) { margin-top: var(--azul-space-xl); }

/* Section tones: full-width sections in a row on a very slightly different
   ground each (is-tone-ground, is-tone-sand), set as the block's class.
   has-wave-top joins a section to the one above with a gentle wave of its
   own ground, at most 30 px high, over the full width. */
.entry__content > .is-tone-ground { --section-bg: var(--azul-ground); }
.entry__content > .is-tone-sand { --section-bg: var(--azul-sand); }
.entry__content > :is(.is-tone-ground, .is-tone-sand) { position: relative; background: var(--section-bg); }
.entry__content > :is(.is-tone-ground, .is-tone-sand) + :is(.is-tone-ground, .is-tone-sand) { margin-top: 0; }
.entry__content > .has-wave-top::before {
  content: "";
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: calc(100% - 1px);
  left: 0;
  height: 30px;
  background: var(--section-bg);
  pointer-events: none;
  -webkit-mask: url("../img/marks/section-wave.svg") center bottom / 100% 100% no-repeat;
  mask: url("../img/marks/section-wave.svg") center bottom / 100% 100% no-repeat;
}
/* The last toned section, whatever it is, ends on the same wave, upside
   down, over the top of the footer. */
.entry__content > :is(.is-tone-ground, .is-tone-sand):last-child { z-index: 2; }
.entry__content > :is(.is-tone-ground, .is-tone-sand):last-child::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: calc(100% - 1px);
  right: 0;
  left: 0;
  height: 30px;
  background: var(--section-bg);
  pointer-events: none;
  transform: scaleY(-1);
  -webkit-mask: url("../img/marks/section-wave.svg") center bottom / 100% 100% no-repeat;
  mask: url("../img/marks/section-wave.svg") center bottom / 100% 100% no-repeat;
}
@media (max-width: 719px) {
  .entry__content > .has-wave-top::before,
  .entry__content > :is(.is-tone-ground, .is-tone-sand):last-child::after { height: 16px; }
}

/* Search form (searchform.php), on the empty results and the 404 page. */
.search-form { display: flex; gap: var(--azul-space-xs); }

.search-form__field {
  flex: 1 1 auto;
  padding: 0.7em 0.8em;
  border: 1px solid var(--azul-line);
  border-radius: var(--azul-radius);
  font: inherit;
}

/* Inline links in running text get a taller hit area without moving the lines. */
.entry__content p a:not(.button), .entry__content li a:not(.button), .entry__content td a:not(.button), .entry__content th a:not(.button) { padding-block: .25em; }