/* patterns.css — systemic polish for Neverland block patterns.
   Loaded on Pages. Section rhythm, hero presence, and component detail live
   here so every pattern instance inherits the same quality. */

/* -----------------------------------------------------------------
   Section rhythm — generous, confident vertical spacing
----------------------------------------------------------------- */
/* The .is-style-section aliases below drive the registered "Section" block style
   (core/group → .is-style-section): band rhythm + the descendant type scale. */
.nv-section, .is-style-section {
  padding-block: clamp(5rem, 9vw, 9rem);
  padding-inline: clamp(1.5rem, 5vw, 4rem);
}

/* Hero — real height and presence; content vertically centred. */
.nv-hero {
  min-height: clamp(420px, 66vh, 680px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(4rem, 9vh, 7rem);
  padding-inline: clamp(1.5rem, 5vw, 4rem);
}

/* -----------------------------------------------------------------
   Type — let headings carry more weight at the larger widths
----------------------------------------------------------------- */
.nv-hero h1.wp-block-heading,
.nv-section--hero h1.wp-block-heading {
  font-size: clamp(2.75rem, 7vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.nv-section .wp-block-heading.has-3xl-font-size,
.is-style-section .wp-block-heading.has-3xl-font-size {
  font-size: clamp(2rem, 4vw, 2.875rem);
  line-height: 1.1;
}
.nv-section .wp-block-heading.has-4xl-font-size,
.is-style-section .wp-block-heading.has-4xl-font-size {
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: 1.1;
}
/* Eyebrow hugs the headline it introduces (tightens loose section tops). */
.nv-section .has-sm-font-size + .wp-block-heading,
.is-style-section .has-sm-font-size + .wp-block-heading,
.nv-section--hero .has-sm-font-size + .wp-block-heading,
.nv-hero .has-sm-font-size + .wp-block-heading { margin-top: 0.65rem; }

/* Lead paragraphs read a touch larger and looser.
   font-size is set explicitly here (rather than left to .has-lg-font-size)
   because that class has no matching rule anywhere else in the CSS — the
   "fontSize":"lg"/"sm" block attribute only ever produces a class name,
   nothing renders it without one of these scoped rules. */
.nv-hero p.has-lg-font-size,
.nv-section > p.has-lg-font-size,
.is-style-section > p.has-lg-font-size { font-size: var(--wp--preset--font-size--lg); line-height: 1.6; }
.nv-hero p.has-sm-font-size,
.nv-section > p.has-sm-font-size,
.is-style-section > p.has-sm-font-size { font-size: var(--wp--preset--font-size--sm); }

/* -----------------------------------------------------------------
   Cards — soft elevation + breathing room
----------------------------------------------------------------- */
.nv-section .wp-block-columns > .wp-block-column.has-surface-background-color,
.is-style-section .wp-block-columns > .wp-block-column.has-surface-background-color {
  box-shadow: 0 1px 2px rgba(26, 26, 26, 0.04), 0 22px 40px -28px rgba(26, 26, 26, 0.22);
}

/* -----------------------------------------------------------------
   Stats band — Poppins numerals with hairline dividers
----------------------------------------------------------------- */
.nv-stats { --divider: color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent); }
.nv-stats .wp-block-column { text-align: center; position: relative; }
.nv-stats .wp-block-column + .wp-block-column::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14%;
  bottom: 14%;
  width: 1px;
  background: var(--divider);
}
.nv-stat-num {
  font-family: var(--wp--preset--font-family--manrope);
  font-size: clamp(3rem, 7vw, 4.5rem);
  line-height: 1;
  font-weight: 700;
  color: var(--wp--preset--color--contrast);
  margin: 0 0 0.4rem;
}
.nv-stat-label {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--wp--preset--font-size--sm);
  color: color-mix(in srgb, var(--wp--preset--color--contrast) 62%, transparent);
  margin: 0;
}
@media (max-width: 600px) {
  .nv-stats .wp-block-column + .wp-block-column::before { display: none; }
  .nv-stats .wp-block-column + .wp-block-column { margin-top: 2.5rem; }
}

/* -----------------------------------------------------------------
   Photography — light, photo-centric sections
----------------------------------------------------------------- */
/* Hero text sits tight to its photo band. */
.nv-section--hero { padding-bottom: clamp(3rem, 5vw, 4.5rem); }

/* Full-bleed cinematic hero image band. */
.nv-hero-img { margin: 0; }
.nv-hero-img img {
  display: block;
  width: 100%;
  height: clamp(300px, 50vh, 560px);
  object-fit: cover;
}

/* Founders / featurette media — tall rounded portrait.
   Also drives the registered "Portrait" block style (core/image → .is-style-portrait). */
.nv-media, .is-style-portrait { margin: 0; }
.nv-media img, .is-style-portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 28px;
  display: block;
}

/* Gallery — rounded, equal-height photo tiles. */
.nv-gallery img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 20px;
  display: block;
}
.nv-photo { margin: 0; }
.nv-photo img { border-radius: 20px; }

@media (max-width: 781px) {
  .wp-block-columns.nv-gallery { flex-wrap: wrap !important; gap: 0.75rem; }
  .wp-block-columns.nv-gallery > .wp-block-column { flex: 1 1 calc(50% - 0.5rem) !important; }
}

/* -----------------------------------------------------------------
   Pattern catalogue labels (the /blocks showcase page)
----------------------------------------------------------------- */
.nv-pattern-label { padding-top: clamp(3.5rem, 7vw, 6rem); padding-inline: clamp(1.5rem, 5vw, 4rem); }
.nv-pattern-label p { margin: 0; }
/* Hug the label to the section it introduces. */
.nv-pattern-label + .nv-section,
.nv-pattern-label + .nv-hero,
.nv-pattern-label + .wp-block-cover { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.nv-pattern-label + .nv-hero { min-height: 0; }

/* Library meta-divider: index number + slug + description above each pattern. */
.nv-pattern-label .nv-lib-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 0.9rem;
	padding-top: clamp(1.75rem, 4vw, 2.75rem);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent);
}
.nv-pattern-label .nv-lib-index {
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--primary);
}
.nv-pattern-label .nv-lib-slug {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.82em;
	color: var(--wp--preset--color--text-secondary);
	background: var(--wp--preset--color--base-alt);
	padding: 0.15em 0.55em;
	border-radius: 6px;
}
.nv-pattern-label .nv-lib-title { margin: 0.55rem 0 0; }
.nv-pattern-label .nv-lib-desc {
	margin-top: 0.4rem;
	max-width: 60ch;
	color: var(--wp--preset--color--text-secondary);
}

/* -----------------------------------------------------------------
   Button styles — registered types, hover states for all
   - default (theme.json): coral fill, white text
   - is-style-outline: coral outline
   - is-style-light: white fill, coral text (use on photos / dark)
----------------------------------------------------------------- */
.wp-element-button,
.wp-block-button__link {
  transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease, transform 220ms ease, box-shadow 240ms ease;
}
/* Gentle, smooth lift on every button. */
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -10px rgba(26, 26, 26, 0.45);
}

/* Hover language: fill to ink, text stays white (always high contrast). */
.wp-block-button:not(.is-style-outline):not(.is-style-light) .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline):not(.is-style-light) .wp-block-button__link:focus-visible {
  background-color: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--surface);
}

/* Outline — coral border + coral text at rest; ink fill + white on hover. */
.wp-block-button.is-style-outline .wp-block-button__link {
  border: 2px solid var(--wp--preset--color--primary);
  color: var(--wp--preset--color--primary-dark);
  background: transparent;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
  background: var(--wp--preset--color--contrast);
  border-color: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--surface);
}

/* Light (on photo) — white + coral at rest; ink fill + white on hover. */
.wp-block-button.is-style-light .wp-block-button__link {
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--primary-dark);
}
.wp-block-button.is-style-light .wp-block-button__link:hover,
.wp-block-button.is-style-light .wp-block-button__link:focus-visible {
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--surface);
}

/* -----------------------------------------------------------------
   Sections butt up against each other — no body-bg gap between bands
   (fixes the stray strip above coloured sections like the stats band)
----------------------------------------------------------------- */
.neverland-landing .entry-content > * { margin-block: 0; }

/* Photo-cover headings need to read large like a hero. */
.nv-cover .wp-block-heading.has-4xl-font-size { font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1.05; }
.nv-cover .wp-block-cover__inner-container > * { margin-block: 0.6rem 0; }
.nv-cover p.has-sm-font-size { font-size: var(--wp--preset--font-size--sm); }
.nv-cover p.has-lg-font-size { font-size: var(--wp--preset--font-size--lg); line-height: 1.6; }


/* -----------------------------------------------------------------
   Testimonials — clean quote cards
----------------------------------------------------------------- */
.nv-quotes .wp-block-column { display: flex; flex-direction: column; }
.nv-review-photo { margin: 0 0 var(--wp--preset--spacing--5); }
.nv-review-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; display: block; }
.nv-stars { font-size: 1.6rem; line-height: 1; letter-spacing: 0.18em; margin: 0 0 var(--wp--preset--spacing--3); }
.nv-quote-cite { margin-top: auto; padding-top: var(--wp--preset--spacing--5); }
.nv-quote-cite strong { color: var(--wp--preset--color--contrast); }

/* -----------------------------------------------------------------
   Photo tiles (occasion covers) — rounded, equal, 2-up on mobile
----------------------------------------------------------------- */
/* Also drives the registered "Tile" block style (core/cover → .is-style-tile). */
.nv-tile, .is-style-tile { border-radius: 20px; overflow: hidden; }
.nv-tile .wp-block-cover__inner-container, .is-style-tile .wp-block-cover__inner-container { width: 100%; }
.nv-tile h3, .is-style-tile h3 { margin: 0; }
.nv-tile .wp-block-cover__inner-container p, .is-style-tile .wp-block-cover__inner-container p { margin: 0.35rem 0 0; }
/* Second (and subsequent) rows in a multi-row tile grid (e.g. venue-type-tiles' 3x2 layout). */
.wp-block-columns.nv-tiles-row { margin-top: var(--wp--preset--spacing--4); }
@media (max-width: 781px) {
  .wp-block-columns.nv-tiles { flex-wrap: wrap !important; gap: 0.75rem; }
  .wp-block-columns.nv-tiles > .wp-block-column { flex: 1 1 calc(50% - 0.5rem) !important; }
}

/* -----------------------------------------------------------------
   FAQ — card accordions with a coral toggle
----------------------------------------------------------------- */
/* The .is-style-faq-item aliases drive the registered "FAQ Item" block style
   (core/details → .is-style-faq-item) standalone — no .nv-faq wrapper required. */
.nv-faq .nv-faq-item, .is-style-faq-item {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 16px;
  padding: clamp(1.1rem, 2.5vw, 1.6rem) clamp(1.25rem, 3vw, 1.9rem);
  margin-bottom: 0.85rem;
}
.nv-faq .nv-faq-item summary, .is-style-faq-item summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--wp--preset--font-family--manrope);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 700;
  color: var(--wp--preset--color--contrast);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.nv-faq .nv-faq-item summary::-webkit-details-marker, .is-style-faq-item summary::-webkit-details-marker { display: none; }
.nv-faq .nv-faq-item summary::after, .is-style-faq-item summary::after {
  content: "+";
  font-family: var(--wp--preset--font-family--helvetica);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
  color: var(--wp--preset--color--primary-dark);
  transition: transform var(--wp--custom--transition--base, 200ms ease);
}
.nv-faq .nv-faq-item[open] summary::after, .is-style-faq-item[open] summary::after { transform: rotate(45deg); }
.nv-faq .nv-faq-item p, .is-style-faq-item p { margin: 0.85rem 0 0; }

/* -----------------------------------------------------------------
   Cover heroes — large heading + white outline button on the photo
----------------------------------------------------------------- */
.nv-cover .wp-block-heading.has-5xl-font-size { font-size: clamp(2.75rem, 7vw, 4.5rem); line-height: 1.05; }
.nv-cover .wp-block-button.is-style-outline .wp-block-button__link {
  border-color: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--surface);
}
.nv-cover .wp-block-button.is-style-outline .wp-block-button__link:hover,
.nv-cover .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
  background: var(--wp--preset--color--surface);
  border-color: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--contrast);
}
.nv-featured-quote .nv-stars { margin-bottom: 0.75rem; }

/* -----------------------------------------------------------------
   Ticked list + bookable-area cards
----------------------------------------------------------------- */
/* Also drives the registered "Ticks" block style (core/list → .is-style-ticks). */
.nv-ticks, .is-style-ticks { list-style: none; padding-left: 0; margin-top: var(--wp--preset--spacing--4); }
.nv-ticks li, .is-style-ticks li { position: relative; padding-left: 1.75rem; margin-bottom: 0.6rem; }
.nv-ticks li::before, .is-style-ticks li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--wp--preset--color--primary-dark); font-weight: 700; }
.nv-area-meta { margin: 0.15rem 0 0.5rem; }
@media (max-width: 781px) {
  .wp-block-columns.nv-areas { flex-wrap: wrap !important; gap: 0.85rem; }
  .wp-block-columns.nv-areas > .wp-block-column { flex: 1 1 calc(50% - 0.5rem) !important; }
}

/* -----------------------------------------------------------------
   Hen party landing page — editorial panel, staggered moods, clear journey
----------------------------------------------------------------- */
.nv-hen-hero {
  min-height: clamp(580px, 76vh, 760px) !important;
  padding-block: clamp(3rem, 8vh, 6rem);
  padding-inline: clamp(1.25rem, 5vw, 4rem);
}
.nv-hen-hero .wp-block-cover__inner-container {
  width: min(100%, var(--wp--style--global--wide-size));
}
.nv-hen-hero__copy {
  max-width: 700px;
  margin-left: 0 !important;
  margin-right: auto !important;
  padding: clamp(1.6rem, 4vw, 3rem);
  background: rgba(26, 26, 26, 0.78);
  border-left: 6px solid var(--wp--preset--color--primary);
  border-radius: 0 28px 28px 0;
  backdrop-filter: blur(10px);
}
.nv-hen-hero__copy h1.wp-block-heading {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
}
.nv-hen-hero__copy > * { margin-block-start: var(--wp--preset--spacing--5); }
.nv-hen-hero__copy > :first-child { margin-block-start: 0; }
.nv-hen-moods { padding-bottom: var(--wp--preset--spacing--8); }
.nv-hen-moods > .wp-block-column:nth-child(2) { transform: translateY(var(--wp--preset--spacing--8)); }
.nv-hen-mood {
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 24px 50px -34px rgba(26, 26, 26, 0.7);
}
.nv-hen-mood .wp-block-cover__inner-container { width: 100%; }
.nv-hen-mood h3 { margin: 0; }
.nv-hen-mood p { margin: 0.45rem 0 0; max-width: 28ch; }
.nv-hen-checklist-photo img { object-position: 58% center; }
.nv-hen-plan .has-surface-color { color: var(--wp--preset--color--surface) !important; }
.nv-hen-steps > .wp-block-column {
  padding-top: var(--wp--preset--spacing--6);
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}
.nv-hen-step-num {
  margin: 0 0 var(--wp--preset--spacing--6);
  font-family: var(--wp--preset--font-family--manrope);
  font-size: clamp(3.5rem, 7vw, 5.5rem);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.05em;
}
.nv-hen-steps h3 { margin-top: 0; }
.nv-hen-cta .wp-block-button.is-style-outline .wp-block-button__link {
  border-color: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--contrast);
}
.nv-hen-cta .wp-block-button.is-style-outline .wp-block-button__link:hover,
.nv-hen-cta .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--surface);
}

/* -----------------------------------------------------------------
   Marketplace landing pages — shared hero, steps and CTA treatment.
   Same design language as the hen-party page, generalized so every
   rebuilt occasion page (birthday, Christmas, bingo, brunch, ...)
   inherits one maintained ruleset.
----------------------------------------------------------------- */
.nv-landing-hero {
  min-height: clamp(580px, 76vh, 760px) !important;
  padding-block: clamp(3rem, 8vh, 6rem);
  padding-inline: clamp(1.25rem, 5vw, 4rem);
}
.nv-landing-hero .wp-block-cover__inner-container {
  width: min(100%, var(--wp--style--global--wide-size));
}
.nv-landing-hero__copy {
  max-width: 700px;
  margin-left: 0 !important;
  margin-right: auto !important;
  padding: clamp(1.6rem, 4vw, 3rem);
  background: rgba(26, 26, 26, 0.78);
  border-left: 6px solid var(--wp--preset--color--primary);
  border-radius: 0 28px 28px 0;
  backdrop-filter: blur(10px);
}
.nv-landing-hero__copy h1.wp-block-heading {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
}
.nv-landing-hero__copy > * { margin-block-start: var(--wp--preset--spacing--5); }
.nv-landing-hero__copy > :first-child { margin-block-start: 0; }

.nv-landing-steps > .wp-block-column {
  padding-top: var(--wp--preset--spacing--6);
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}
.nv-landing-step-num {
  margin: 0 0 var(--wp--preset--spacing--6);
  font-family: var(--wp--preset--font-family--manrope);
  font-size: clamp(3.5rem, 7vw, 5.5rem);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.05em;
}
.nv-landing-steps h3 { margin-top: 0; }
.nv-landing-dark .has-surface-color { color: var(--wp--preset--color--surface) !important; }

.nv-landing-cta .wp-block-button.is-style-outline .wp-block-button__link {
  border-color: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--contrast);
}
.nv-landing-cta .wp-block-button.is-style-outline .wp-block-button__link:hover,
.nv-landing-cta .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--surface);
}

@media (max-width: 781px) {
  .nv-landing-hero {
    min-height: 620px !important;
    padding-inline: 0;
    align-items: flex-end;
  }
  .nv-landing-hero__copy {
    max-width: none;
    padding: 1.5rem;
    border-left: 0;
    border-top: 5px solid var(--wp--preset--color--primary);
    border-radius: 24px 24px 0 0;
    backdrop-filter: none;
  }
  .nv-landing-hero__copy h1.wp-block-heading { font-size: clamp(2.35rem, 11vw, 3.5rem); }
  .nv-landing-steps { gap: var(--wp--preset--spacing--10) !important; }
}

@media (max-width: 781px) {
  .nv-hen-hero {
    min-height: 620px !important;
    padding-inline: 0;
    align-items: flex-end;
  }
  .nv-hen-hero__copy {
    max-width: none;
    padding: 1.5rem;
    border-left: 0;
    border-top: 5px solid var(--wp--preset--color--primary);
    border-radius: 24px 24px 0 0;
    backdrop-filter: none;
  }
  .nv-hen-hero__copy h1.wp-block-heading { font-size: clamp(2.35rem, 11vw, 3.5rem); }
  .nv-hen-moods { gap: var(--wp--preset--spacing--4) !important; padding-bottom: 0; }
  .nv-hen-moods > .wp-block-column:nth-child(2) { transform: none; }
  .nv-hen-mood { min-height: 360px !important; }
  .nv-hen-steps { gap: var(--wp--preset--spacing--10) !important; }
}