/*
 * Plain content pages, posts, archives, search and the 404.
 *
 * Everything the modules do not cover. The hero repeats the attractions page's
 * geometry on purpose, so a page with a photo and a page built from modules sit
 * at the same height and corner; the copy below it is set to one readable
 * measure with the site's own type, and the classes the migration left behind
 * (dea-import-bg, wp-block-button__link, dea-import-note) are given a home
 * rather than left to render raw.
 */
.dea-pg { background: var(--dea-page); padding-bottom: 72px; }

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

/* ---------------- hero ---------------- */
.dea-pg__hero {
  max-width: calc(var(--dea-max) + var(--dea-gutter) * 2);
  margin: 28px auto 0;
  padding-inline: var(--dea-gutter);
}
.dea-pg__herocard {
  position: relative; overflow: hidden;
  border-radius: var(--dea-radius-card);
  background: var(--dea-navy);
  display: flex; align-items: flex-end;
  min-height: 380px;
}
.dea-mod .dea-pg__heroimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dea-pg__herocard::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(27, 16, 40, .86) 0%, rgba(27, 16, 40, .42) 46%, rgba(27, 16, 40, .06) 100%);
}
.dea-pg__hero--flat .dea-pg__herocard { min-height: 0; background: var(--dea-peach); }
.dea-pg__hero--flat .dea-pg__herocard::after { display: none; }

.dea-pg__heroinner {
  position: relative; z-index: 1;
  padding: 44px var(--dea-inset-x) 40px;
  max-width: 820px;
}
.dea-pg__eyebrow,
.dea-pg__back {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 14px;
  padding: 8px 16px; border-radius: 999px;
  background: var(--dea-orange); color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none;
}
.dea-pg__back { padding-left: 13px; transition: background .2s var(--dea-ease); }
.dea-pg__back:hover, .dea-pg__back:focus-visible { background: var(--dea-orange-3); color: #fff; }

.dea-pg__title {
  font-size: clamp(32px, 3.8vw, 52px);
  font-weight: 700; line-height: 1.05; letter-spacing: -.038em;
  color: #fff;
  text-wrap: balance;
}
.dea-pg__hero--flat .dea-pg__title { color: var(--dea-orange); }
.dea-pg__intro { margin: 16px 0 0; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .9); max-width: 62ch; }
.dea-pg__hero--flat .dea-pg__intro { color: var(--dea-meta); }

.dea-pg__meta {
  margin: 14px 0 0;
  font-size: 14px; font-weight: 600; letter-spacing: .02em;
  color: rgba(255, 255, 255, .78);
}
.dea-pg__hero--flat .dea-pg__meta { color: var(--dea-meta); }

/* ---------------- the copy ----------------
   One measure, centred, with photos allowed to run wider than the words. */
.dea-pg__body {
  max-width: 760px;
  margin: 52px auto 0;
  font-size: 17px; line-height: 1.68;
  color: var(--dea-ink-2);
}
.dea-pg__byline {
  max-width: 760px;
  margin: 44px auto -22px;
  font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--dea-brown);
}

.dea-pg__body > :first-child { margin-top: 0; }
.dea-pg__body > :last-child { margin-bottom: 0; }

.dea-pg__body p { margin: 0 0 20px; }
.dea-pg__body strong, .dea-pg__body b { font-weight: 700; }
.dea-pg__body a { color: var(--dea-orange); text-underline-offset: 3px; }
.dea-pg__body a:hover { color: var(--dea-orange-3); }

.dea-pg__body h2 {
  margin: 48px 0 16px;
  font-size: clamp(25px, 2.4vw, 32px);
  font-weight: 700; line-height: 1.14; letter-spacing: -.03em;
  color: var(--dea-orange);
  text-wrap: balance;
}
.dea-pg__body h3 {
  margin: 36px 0 12px;
  font-size: 21px; font-weight: 700; line-height: 1.25; letter-spacing: -.018em;
  color: var(--dea-ink);
}
.dea-pg__body h4 {
  margin: 30px 0 10px;
  font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dea-brown);
}

.dea-pg__body ul, .dea-pg__body ol { margin: 0 0 20px; padding-left: 24px; display: grid; gap: 9px; }
.dea-pg__body li { line-height: 1.6; }
.dea-pg__body li::marker { color: var(--dea-orange); font-weight: 700; }

.dea-pg__body blockquote {
  margin: 32px 0; padding: 24px 28px;
  border-radius: 20px; background: var(--dea-peach);
  font-size: 19px; line-height: 1.5;
}
.dea-pg__body blockquote p:last-child { margin-bottom: 0; }

.dea-pg__body hr { margin: 40px 0; border: 0; border-top: 1px solid var(--dea-sand); }

.dea-pg__body table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 16px; }
.dea-pg__body th, .dea-pg__body td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--dea-sand); }
.dea-pg__body th { font-weight: 700; color: var(--dea-ink); }

/* Photos break out of the measure to the width of the content column. The
   breakout is half the difference between the two, pulled off each side, so
   the figure stays centred whatever the viewport does. */
.dea-pg__body {
  --pg-measure: 760px;
  --pg-wide: min(var(--dea-max), calc(100vw - var(--dea-gutter) * 2));
  --pg-bleed: calc((var(--pg-wide) - var(--pg-measure)) / 2);
}
.dea-pg__body figure,
.dea-pg__body > img,
.dea-pg__body .wp-block-gallery {
  margin-block: 36px;
  margin-inline: calc(var(--pg-bleed) * -1);
  width: var(--pg-wide);
  max-width: none;
}
.dea-mod .dea-pg__body figure img,
.dea-mod .dea-pg__body > img {
  width: 100%; height: auto; display: block;
  border-radius: 24px;
}
.dea-pg__body figcaption { margin-top: 10px; font-size: 14px; color: var(--dea-grey); text-align: center; }

/* The importer's section backgrounds: wide, and capped so a tall one does not
   take over the page. */
.dea-mod .dea-pg__body figure.dea-import-bg img { aspect-ratio: 16 / 7; object-fit: cover; }

.dea-pg__body .wp-block-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px;
}
.dea-mod .dea-pg__body .wp-block-gallery img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }

.dea-pg__body iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 20px; }

/* An imported button, and anything the editor marks as one. */
.dea-pg__body a.wp-block-button__link {
  display: inline-block; margin: 4px 0;
  padding: 14px 26px; border-radius: 999px;
  background: var(--dea-plum); color: #fff;
  font-size: 15px; font-weight: 600; text-decoration: none;
  transition: background .2s var(--dea-ease);
}
.dea-pg__body a.wp-block-button__link:hover,
.dea-pg__body a.wp-block-button__link:focus-visible { background: var(--dea-navy); color: #fff; }

/* Notes the importer left where a background video used to be. */
.dea-pg__body p.dea-import-note {
  padding: 12px 16px; border-radius: 12px;
  background: var(--dea-peach);
  font-size: 14px; color: var(--dea-meta);
  word-break: break-word;
}

/* ---------------- children of a page ---------------- */
.dea-pg__children {
  max-width: calc(var(--dea-max) + var(--dea-gutter) * 2);
  margin: 64px auto 0;
  padding-inline: var(--dea-gutter);
}
.dea-pg__childgrid,
.dea-pg__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px 37px;
}
@media (max-width: 1000px) { .dea-pg__childgrid, .dea-pg__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 26px; } }
@media (max-width: 560px) { .dea-pg__childgrid, .dea-pg__list { grid-template-columns: minmax(0, 1fr); } }
.dea-pg__childgrid .dea-attr__card,
.dea-pg__list .dea-attr__card { scroll-snap-align: none; }

/* ---------------- archives, search, 404 ---------------- */
.dea-pg__list { margin-top: 44px; }
.dea-pg__none { margin: 44px 0 0; font-size: 17px; color: var(--dea-meta); }

.dea-pg__pager {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 52px 0 0;
}
.dea-pg__pager .page-numbers {
  display: grid; place-items: center;
  min-width: 44px; height: 44px; padding: 0 14px;
  border: 1.5px solid var(--dea-sand); border-radius: 999px;
  color: var(--dea-ink-2); font-size: 15px; font-weight: 600; text-decoration: none;
}
.dea-pg__pager .page-numbers:hover { border-color: var(--dea-orange-2); background: var(--dea-peach); }
.dea-pg__pager .page-numbers.current { background: var(--dea-orange); border-color: var(--dea-orange); color: #fff; }

.dea-pg__search { display: flex; gap: 10px; margin: 26px 0 8px; max-width: 460px; }
/* The 404 puts a rail under the search box; it needs air above it. */
.dea-pg .dea-attr { padding-top: 56px; }
.dea-pg__search input[type="search"] {
  flex: 1 1 auto; min-width: 0;
  padding: 13px 18px; border: 1.5px solid var(--dea-sand); border-radius: 999px;
  background: #fff; font: inherit; font-size: 15px; color: var(--dea-ink);
}
.dea-pg__search input[type="search"]:focus-visible { outline: 3px solid var(--dea-orange); outline-offset: 2px; }
.dea-pg__search button {
  padding: 13px 24px; border: 0; border-radius: 999px;
  background: var(--dea-orange); color: #fff;
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
/* hello-elementor paints every button:hover and :focus #c36. */
.dea-pg__search button:hover,
.dea-pg__search button:focus { background: var(--dea-orange-3); color: #fff; }

@media (max-width: 700px) {
  .dea-pg__heroinner { padding: 30px 22px 28px; }
  .dea-pg__body { margin-top: 36px; font-size: 16px; }
  .dea-pg__body figure,
  .dea-pg__body > img,
  .dea-pg__body .wp-block-gallery { margin-inline: 0; width: 100%; }
  .dea-pg__body { --pg-bleed: 0px; }
}