/* =================================================================
   STATIC CONTENT PAGES  (body.lux-content-page)
   About Paleopetres (671), Contact (1257), Corfu Recommendations (10510).

   Brings WordPress' plain page template in line with the rest of the
   site: a full-bleed featured-image hero carrying the page title (in
   place of the bare H1), a warm-paper canvas, luxury typography + brass
   links/buttons, and — for the text pages (body.lux-content-card) — the
   content in a floating white card that overlaps the hero (like the
   checkout / confirmation cards). The Corfu grid page keeps full width
   and its image "cover" blocks are restyled as luxury cards.

   The hero + a `.lux-content-body` wrapper are injected by
   lux_content_page_prepend_hero() (a the_content filter) in functions.php.
   Enqueued standalone (filemtime cache-busting) — see functions.php.
   ================================================================= */

/* -----------------------------------------------------------------
   1. CANVAS — warm paper, content floats; kill the plain title + chrome
   ----------------------------------------------------------------- */
body.lux-content-page { overflow-x: hidden; }   /* guard the full-bleed hero */

/* The parent theme's full-width template renders its own featured-image
   banner (`.post-thumbnail`, via oceanica_post_thumbnail()) above the
   content. Our injected `.lux-page-hero` replaces it — hide the duplicate. */
.lux-content-page .post-thumbnail { display: none !important; }

.lux-content-page .main-wrapper,
.lux-content-page .content-area,
.lux-content-page .site-main,
.lux-content-page .entry-content,
.lux-content-page .entry-content > .wpb_wrapper {
  background: transparent !important;
}
.lux-content-page .main-wrapper {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Drop the parent theme's tall .hentry padding/margin and the bare title;
   the hero replaces the title. */
.lux-content-page .site-main > .hentry {
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.lux-content-page .entry-header { display: none !important; }

/* -----------------------------------------------------------------
   2. HERO — full-bleed featured image + page title (like home / search)
   ----------------------------------------------------------------- */
.lux-content-page .lux-page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 44vh;
  background-size: cover;
  background-position: center 35%;   /* frame the sea view, not the foreground */
  background-repeat: no-repeat;
  image-rendering: auto;             /* browser default — crisp on all DPR */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.lux-content-page .lux-page-hero--plain {
  background: var(--lux-primary-deep);
  min-height: 30vh;
}
.lux-content-page .lux-page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(22,40,42,.10), rgba(22,40,42,.55));
}
.lux-content-page .lux-page-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem 2.6rem;
  text-align: center;
}
.lux-content-page .lux-page-hero-title {
  font-family: "Playfair Display", serif;
  font-weight: 500;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  text-transform: uppercase;
  letter-spacing: .22em;
  line-height: 1.2;
  margin: 0;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
.lux-content-page .lux-page-hero-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin: .7em auto 0;
  background: var(--lux-accent);
}

/* -----------------------------------------------------------------
   3. CONTENT BODY — centered column on the paper (grid page),
      or a floating white card that overlaps the hero (text pages).
   ----------------------------------------------------------------- */
.lux-content-page .lux-content-body {
  max-width: 1120px;
  margin: 0 auto;
  padding: 2.75rem 1.5rem 3rem;
}

.lux-content-card .lux-content-body {
  max-width: 880px;
  margin: -4.5rem auto 3.5rem;
  position: relative;
  z-index: 2;
  background: var(--lux-card);
  border: 1px solid var(--lux-line);
  border-radius: 10px;
  box-shadow: 0 4px 32px -6px rgba(31,49,46,.12), 0 1px 6px rgba(31,49,46,.05);
  padding: 2.75rem 3rem 3rem;
}

/* -----------------------------------------------------------------
   4. TYPOGRAPHY — Playfair teal headings, brass links, generous text
   ----------------------------------------------------------------- */
.lux-content-page .lux-content-body h1,
.lux-content-page .lux-content-body h2,
.lux-content-page .lux-content-body h3,
.lux-content-page .lux-content-body h4,
.lux-content-page .lux-content-body .wp-block-heading {
  font-family: "Playfair Display", serif;
  font-weight: 500;
  color: var(--lux-primary);
  letter-spacing: .01em;
}
/* h1 + h2: centered, uppercase, flanked by brass lines — matches "TEAM" style.
   Top margin compensates for the WPBakery wrapper gap that span-based headings
   (Houses / Locations) get naturally from their own wrapper div. */
.lux-content-page .lux-content-body h1,
.lux-content-page .lux-content-body h2 {
  font-size: 1.9rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .2em;
  line-height: 1.25;
  margin: 2.2em 0 0;
}

/* Brass line above */
.lux-content-page .lux-content-body h1::before,
.lux-content-page .lux-content-body h2::before {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: var(--lux-accent);
  margin: 0 auto .65em;
}

/* Brass line below — bottom margin matches the gap the WPBakery wrapper
   naturally gives the span-based headings (Houses / Locations). */
.lux-content-page .lux-content-body h1::after,
.lux-content-page .lux-content-body h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: var(--lux-accent);
  margin: .65em auto 1.4em;
}

.lux-content-page .lux-content-body h3 { font-size: 1.45rem; margin: 1.4em 0 .5em; }
.lux-content-page .lux-content-body h4 { font-size: 1.15rem; margin: 1.3em 0 .45em; }
.lux-content-page .lux-content-body > :first-child,
.lux-content-page .lux-content-body .wpb_wrapper > :first-child { margin-top: 0; }

.lux-content-page .lux-content-body p,
.lux-content-page .lux-content-body li {
  line-height: 1.85;
  color: var(--lux-ink);
}
.lux-content-page .lux-content-body p { margin: 0 0 1.2em; }

/* "Houses" and "Locations" — WPBakery inline-styled spans acting as headings.
   Override their inline colour, size (1.6em) and weight (bold), then add the
   same centered + uppercase + brass-lines treatment as h1/h2 above. */
.lux-content-page .lux-content-body span[style*="Playfair"] {
  color: var(--lux-primary) !important;
  font-size: 1.9rem !important;
  font-weight: 500 !important;
  line-height: 1.25;
  display: block;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .2em;
  margin: 0;
}

/* Collapse the WPBakery block wrapper margins that sit above these heading spans
   so the brass line starts immediately after the preceding content. */
.lux-content-page .lux-content-body .wpb_text_column:has(span[style*="Playfair"]),
.lux-content-page .lux-content-body .nicdark_section:has(span[style*="Playfair"]) {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Brass line above the span */
.lux-content-page .lux-content-body span[style*="Playfair"]::before {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: var(--lux-accent);
  margin: 0 auto .65em;
}

/* Brass line below the span */
.lux-content-page .lux-content-body span[style*="Playfair"]::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: var(--lux-accent);
  margin: .65em auto 0;
}

.lux-content-page .lux-content-body a {
  color: var(--lux-accent);
  text-decoration: none;
  transition: color .3s var(--lux-ease);
}
.lux-content-page .lux-content-body a:hover { color: var(--lux-accent-deep); }

/* Lead / intro paragraph (first paragraph on the grid page reads as a standfirst) */
.lux-content-page:not(.lux-content-card) .lux-content-body > .wp-block-columns:first-of-type p,
.lux-content-page .lux-content-body > p.has-text-align-center:first-child {
  text-align: center;
  font-size: 1.05rem;
  color: var(--lux-muted);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Hide the inline breakfast-table image (apolisies1_206.jpg, att. 729) —
   it is now used as the page hero background instead. */
.lux-content-page .lux-content-body img.wp-image-729 { display: none !important; }

/* The image was wrapped in its own <h2> — with the image gone, that h2
   only emits orphaned ::before/::after brass lines. Hide the whole element. */
.lux-content-page .lux-content-body h2:has(img.wp-image-729) { display: none !important; }

/* Hide the Guests Testimonials blockquote (title + quotes + vertical border lines).
   The About page has no other blockquotes so this is safe. */
.lux-content-page .lux-content-body blockquote { display: none !important; }

/* Locations ordered list — replace numbers with brass map-pin icons (FA \f041) */
.lux-content-page .lux-content-body ol {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.lux-content-page .lux-content-body ol li {
  position: relative;
  padding-left: 1.8em;
  margin-bottom: .55em;
}

.lux-content-page .lux-content-body ol li::before {
  content: "\f041";               /* FA map-marker */
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  color: var(--lux-accent);
  font-size: .95rem;
  position: absolute;
  left: .1em;
  top: .1em;
  line-height: 1;
}

/* Content images: gentle rounding + shadow (never the cover backgrounds) */
.lux-content-page .lux-content-body img:not(.wp-block-cover__image-background) {
  border-radius: 6px;
  box-shadow: var(--lux-shadow);
  height: auto;
}

/* -----------------------------------------------------------------
   5. BUTTONS — match the site's brass-on-hover buttons
   (WP block buttons + Jetpack WhatsApp button)
   ----------------------------------------------------------------- */
.lux-content-page .lux-content-body .wp-block-button__link,
.lux-content-page .lux-content-body .whatsapp-block__button {
  display: inline-block;
  background-color: var(--lux-primary) !important;
  border: 1px solid var(--lux-primary) !important;
  color: #fff !important;
  border-radius: 2px;
  padding: 1em 2.4em;
  font-family: "Poppins", sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.4;
  box-shadow: none;
  transition: background-color .35s var(--lux-ease), border-color .35s var(--lux-ease);
}
.lux-content-page .lux-content-body .wp-block-button__link:hover,
.lux-content-page .lux-content-body .wp-block-button__link:focus,
.lux-content-page .lux-content-body .whatsapp-block__button:hover,
.lux-content-page .lux-content-body .whatsapp-block__button:focus {
  background-color: var(--lux-accent) !important;
  border-color: var(--lux-accent) !important;
  color: #fff !important;
}

/* -----------------------------------------------------------------
   6. COVER "CARDS"  (Corfu Recommendations grid)
   Each wp-block-cover becomes a luxury card: rounded, shadowed, lifts
   and zooms on hover. The button inside is the label.
   ----------------------------------------------------------------- */
.lux-content-page .wp-block-columns { gap: 2rem; align-items: stretch; margin-bottom: 2rem; }
.lux-content-page .wp-block-column { margin: 0; }

.lux-content-page .wp-block-cover {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--lux-shadow);
  transition: box-shadow .4s var(--lux-ease), transform .4s var(--lux-ease);
}
.lux-content-page .wp-block-cover:hover {
  box-shadow: var(--lux-shadow-lg);
  transform: translateY(-4px);
}
.lux-content-page .wp-block-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(22,40,42,.15), rgba(22,40,42,.45));
  z-index: 1;
}
.lux-content-page .wp-block-cover__image-background {
  transition: transform 1.1s var(--lux-ease);
}
.lux-content-page .wp-block-cover:hover .wp-block-cover__image-background {
  transform: scale(1.06);
}
.lux-content-page .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
}

/* -----------------------------------------------------------------
   7. JETPACK CONTACT BLOCKS (Contact page) — tidy spacing
   ----------------------------------------------------------------- */
.lux-content-page .wp-block-jetpack-send-a-message { margin: 1.4em 0; }
.lux-content-page .wp-block-jetpack-whatsapp-button { text-align: left; }

/* -----------------------------------------------------------------
   8. RESPONSIVE
   ----------------------------------------------------------------- */
@media (max-width: 48em) {
  .lux-content-page .lux-page-hero { min-height: 32vh; }
  .lux-content-card .lux-content-body {
    margin: -2.5rem 1rem 2rem;
    padding: 1.75rem 1.4rem 2rem;
  }
  .lux-content-page .wp-block-columns { gap: 1.25rem; }
}