/* =============================================
   PAGES
   Standalone page layouts (about.php, etc.)
   ============================================= */

/* ---- Shared page banner ---- */
.page-banner {
  position: relative;
  height: clamp(240px, 38vh, 360px);
  overflow: hidden;
  /* Accounts for fixed nav so image starts from true top of viewport */
  margin-top: 0;
}

/* No-image fallback: solid bark background */
.page-banner--no-image {
  background-color: var(--color-bark);
}

.page-banner__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* object-position set inline per-instance */
  display: block;
}

/* Flat bark veil — same weight as slogan-band */
.page-banner__overlay {
  position: absolute;
  inset: 0;
  background-color: color-mix(in oklch, var(--color-bark) 68%, transparent);
}

.page-banner__content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 clamp(32px, 6vw, 96px);
}

.page-banner__logo {
  display: block;
  width: clamp(120px, 14vw, 180px);
  height: auto;
  margin-bottom: clamp(8px, 1.5vh, 16px);
  opacity: 0.92;
}

.page-banner__heading {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.05;
  color: var(--color-parchment);
  letter-spacing: 0;
  max-width: 22ch;
  word-wrap: break-word;
}

/* ---- Properties catalogue page ---- */
.page-properties {
  padding-top: 0;
  background-color: var(--color-parchment);
  min-height: 100vh;
}

/* ---- About page ---- */
.page-about {
  padding-top: 0;
  background-color: var(--color-parchment);
}

.page-content {
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(48px, 7vh, 80px) clamp(24px, 5vw, 64px) clamp(80px, 10vh, 120px);
}

/* ---- News listing + detail pages ---- */
.page-news,
.page-news-detail {
  padding-top: 0;
  background-color: var(--color-parchment);
  min-height: 100vh;
}

/* ---- Services sub-page ---- */
.page-services {
  padding-top: 0;
  background-color: var(--color-parchment);
  min-height: 100vh;
}

.svc-split {
  display: grid;
  grid-template-columns: 55fr 45fr;
  min-height: clamp(580px, 70vh, 800px);
}

/* Air between banner and first service/about block */
.page-services > .svc-split:first-child,
.page-about > .svc-split:first-child {
  margin-top: clamp(64px, 9vh, 100px);
}

/* Gap between sections — parchment strip separates adjacent images */
.page-services > .svc-split + .svc-split,
.page-about > .svc-split + .svc-split {
  margin-top: clamp(48px, 6vh, 80px);
}

.svc-split--flip {
  grid-template-columns: 45fr 55fr;
}

.svc-split--flip .svc-split__image {
  order: 2;
}

.svc-split--flip .svc-split__body {
  order: 1;
}

.svc-split__image {
  position: relative;
  overflow: hidden;
  background-color: var(--color-parchment);
}

.svc-split--blush .svc-split__image {
  background-color: var(--color-blush);
}

.svc-split__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.svc-split__body {
  background-color: var(--color-parchment);
  padding: clamp(64px, 9vh, 112px) clamp(48px, 6vw, 96px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(20px, 2.5vh, 30px);
}

.svc-split--blush .svc-split__body {
  background-color: var(--color-blush);
}

.svc-split__label {
  font-family: var(--font-sans);
  font-size: var(--fs-label-sm);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-terracotta);
  margin: 0;
}

.svc-split__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-h2);
  color: var(--color-charcoal);
  line-height: 1.1;
  margin: 0;
}

.svc-split__desc {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 52ch;
}

.svc-split__desc p {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.75;
  color: var(--color-charcoal);
  margin: 0;
  text-align: justify;
  hyphens: manual;
}

.svc-split__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.svc-split__item {
  font-family: var(--font-sans);
  font-size: var(--fs-label-sm);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-charcoal);
  padding-left: 14px;
  position: relative;
}

.svc-split__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--color-terracotta);
}

.svc-split__cta {
  margin-top: 6px;
}

.svc-split__cta-link {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-terracotta);
  transition: opacity 0.2s ease-out;
}

.svc-split__cta-link:hover {
  opacity: 0.7;
}

/* =============================================
   TEAM SECTION (about page)
   ============================================= */

.about-team-rule {
  border: none;
  border-top: 1px solid var(--color-terracotta);
  margin: clamp(48px, 6vh, 80px) clamp(48px, 8vw, 120px) 0;
  opacity: 0.45;
}

/* --- Section header --- */
.about-team__header {
  padding: clamp(56px, 7vh, 96px) clamp(48px, 6vw, 96px) clamp(48px, 6vh, 72px);
  background-color: var(--color-parchment);
  border-bottom: 1px solid color-mix(in oklch, var(--color-terracotta) 30%, transparent);
}

.about-team__header-intro {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--color-charcoal);
  max-width: 52ch;
  margin: clamp(16px, 2vh, 22px) 0 0;
  text-align: justify;
  hyphens: manual;
}

/* --- Supporting trio: open air, square portraits --- */
.about-team__trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: clamp(32px, 5vw, 72px);
  padding: clamp(64px, 8vh, 104px) clamp(48px, 6vw, 96px) clamp(72px, 10vh, 120px);
  background-color: var(--color-parchment);
}

.about-team__member-photo {
  overflow: hidden;
  background-color: var(--color-blush);
  aspect-ratio: 1 / 1;
}

.about-team__member-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.about-team__member-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-h4);
  color: var(--color-charcoal);
  margin: 20px 0 6px;
  line-height: 1.2;
}

.about-team__member-role {
  font-family: var(--font-sans);
  font-size: var(--fs-label-sm);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-terracotta);
  margin: 0 0 10px;
}

.about-team__member-bio {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  line-height: 1.7;
  color: var(--color-charcoal);
  margin: 0;
  text-align: justify;
  hyphens: manual;
}

/* =============================================
   EMPTY STATE
   The shared "nothing to show in this language" notice
   (includes/shared/empty-state.php). Untranslated content is dropped by the
   service layer rather than shown in the other language, so a listing page
   can legitimately have nothing to render — this is what stands in its place.
   Sized to hold the banner off the footer so the page still has a body.
   ============================================= */

.empty-state {
  grid-column: 1 / -1;
  max-width: 65ch;
  margin: 0 auto;
  padding: clamp(80px, 12vh, 140px) clamp(48px, 8vw, 120px);
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.7;
  text-align: center;
  text-wrap: pretty;
}

/* =============================================
   NEWSLETTER STATUS PAGE
   newsletter.php?unsubscribe=<token> — the landing page for the opt-out link
   in the footer of every mail. The heading is in the shared banner above, so
   this block is only the explanation and the way back — and it is the whole
   body of the page, since footer.php's sign-up card is suppressed here
   ($hide_newsletter). Hence the generous padding: without it the footer would
   ride straight up under two lines of text.
   ============================================= */

.nl-status {
  background-color: var(--color-parchment);
  padding: clamp(64px, 10vh, 110px) clamp(48px, 8vw, 120px) clamp(80px, 12vh, 140px);
}

.nl-status__inner {
  max-width: 65ch;
  margin: 0 auto;
  text-align: center;
}

.nl-status__text {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-charcoal);
  text-wrap: pretty;
  margin: 0 auto;
}

/* .generic__cta is written for <button>; as an <a> it needs the underline off. */
.nl-status__cta {
  text-decoration: none;
}

/* Confirm state: the button unsubscribes (POST), the quiet link below it is
   the way out for someone who clicked by mistake. */
.nl-status__form {
  margin: 0;
}

.nl-status__back {
  display: inline-block;
  margin-top: var(--space-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-label-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-terracotta);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.2s ease-out;
}

.nl-status__back:hover,
.nl-status__back:focus-visible {
  color: var(--color-charcoal);
}