/* Shared section vocabulary over ordinary core blocks (Cover, Group, Columns,
   Column, Image, Button). Names come from wordpress/plugins/shootcal-blocks/vocabulary.json:
   block styles are .is-style-sc-*, helpers are plain .sc-* Additional CSS classes.
   This file is STRUCTURE only (layout, spacing, stacking). Colors, glass, type and
   motion styling come from the selected look in assets/looks/. */
:root {
  --sc-card-bg: var(--sc-paper);
  --sc-card-radius: 20px;
  --sc-photo-band-bg: var(--sc-band);
  --sc-photo-band-highlight: rgb(255 255 255 / .7);
}

/* Boxed sections: a centered, wide content area with generous vertical padding. */
:is(.entry-content, .editor-styles-wrapper) :is(.is-style-sc-boxed, .is-style-sc-boxed-full) {
  width: min(var(--sc-wide), calc(100% - 2 * var(--sc-gutter)));
  max-width: var(--sc-wide);
  margin-inline: auto;
  padding-block: clamp(32px, 5vw, 72px);
}
/* Full-width boxed: the band (and a look's --sc-boxed-full-bg) runs edge to
   edge; its content keeps the wide measure. Rows, columns and photo bands inside
   a boxed section use the wide measure too, not the reading measure. */
:is(.entry-content, .editor-styles-wrapper) .is-style-sc-boxed-full {
  width: 100%;
  max-width: none;
  padding-inline: max(var(--sc-gutter), (100% - var(--sc-wide)) / 2);
  background: var(--sc-boxed-full-bg, transparent);
}
:is(.entry-content, .editor-styles-wrapper) :is(.is-style-sc-boxed, .is-style-sc-boxed-full) > :is(.wp-block-columns, .wp-block-gallery, .is-style-sc-photo-band) { max-width: var(--sc-wide); }
:is(.entry-content, .editor-styles-wrapper) .is-style-sc-photo-band .wp-block-columns { max-width: var(--sc-wide); }
:is(.entry-content, .editor-styles-wrapper) :is(.is-style-sc-boxed, .is-style-sc-boxed-full) .is-style-sc-photo-band { padding-inline: 0; background: transparent; }
.entry-content > .is-style-sc-category-links { max-width: var(--sc-wide); }
/* A boxed section inside a full-width one does not box or pad twice. */
:is(.entry-content, .editor-styles-wrapper) .is-style-sc-boxed-full .is-style-sc-boxed { width: 100%; padding-block: 0; }
.entry-content > .is-style-sc-boxed-full { margin-block: 0; }
:is(.entry-content, .editor-styles-wrapper) .is-style-sc-tinted {
  padding: clamp(24px, 3vw, 48px);
  border-radius: var(--sc-card-radius);
  background: var(--sc-band);
}
:is(.entry-content, .editor-styles-wrapper) .is-style-sc-location-cards img { border-radius: var(--sc-radius); }
:is(.entry-content, .editor-styles-wrapper) .is-style-sc-location-cards h4 { text-align: center; }
:is(.entry-content, .editor-styles-wrapper) .is-style-sc-location-cards h4 a { display: inline-block; padding: 10px 15px; border: 1px solid var(--sc-accent); color: inherit; text-decoration: none; }
:is(.entry-content, .editor-styles-wrapper) .sc-narrow { max-width: var(--sc-reading); margin-inline: auto; }

/* Page hero: a core Cover that holds the opening heading. */
:is(.entry-content, .editor-styles-wrapper) .is-style-sc-page-hero {
  min-height: max(600px, 80svh);
  padding: 150px var(--sc-gutter) 56px;
  isolation: isolate;
}
:is(.entry-content, .editor-styles-wrapper) .is-style-sc-page-hero.sc-hero-short { min-height: max(500px, 70svh); }
:is(.entry-content, .editor-styles-wrapper) .is-style-sc-page-hero .wp-block-cover__inner-container {
  width: min(var(--sc-wide), 100%);
  max-width: var(--sc-wide);
  margin-inline: auto;
}

/* Glass card: the text panel that sits on a hero photograph. */
:is(.entry-content, .editor-styles-wrapper) .is-style-sc-glass-card {
  width: min(620px, 100%);
  margin-left: auto;
  padding: 36px 40px;
  border-radius: 26px;
  color: var(--sc-text);
  text-align: left;
}
:is(.entry-content, .editor-styles-wrapper) .is-style-sc-glass-card h1 { color: var(--sc-heading); font-size: clamp(36px, 4vw, 60px); line-height: 1.08; text-align: left; }
:is(.entry-content, .editor-styles-wrapper) .is-style-sc-glass-card p { float: none; max-width: none; color: inherit; }
:is(.entry-content, .editor-styles-wrapper) .is-style-sc-glass-card .sc-lead { margin-block: 24px; }
:is(.entry-content, .editor-styles-wrapper) .is-style-sc-glass-card .wp-block-buttons { justify-content: flex-start; }

/* Hero slideshow: the ShootCal Slider's hero layout opening a page, with its
   overlay content (normally a glass card) on the photos. Phones and tablets
   show one photo at a time across the width, cropped around each photo's
   focal point, with the card overlapping the photo's lower edge. Desktops
   show the photo ribbon: each photo at its own shape (up to 84% of the
   width), its neighbours dimmed, the card over the current photo. */
.entry-content > .natural-photo-slider--hero {
  --nps-inactive-opacity: 0;
  --nps-stage-height: max(50svh, clamp(280px, 50vw, 360px));
  margin-block: 0 40px;
}
.entry-content > .natural-photo-slider--hero .natural-photo-slider__track { height: var(--nps-stage-height); }
.entry-content > .natural-photo-slider--hero .natural-photo-slider__slide { width: 100%; }
.entry-content > .natural-photo-slider--hero .natural-photo-slider__image { object-fit: cover; }
.entry-content > .natural-photo-slider--hero .natural-photo-slider__content { margin-top: -48px; padding-inline: var(--sc-gutter); }
.entry-content > .natural-photo-slider--hero .natural-photo-slider__content > .is-style-sc-glass-card { width: 100%; max-width: none; margin: 0; }
@media (min-width: 641px) and (max-width: 1024px) {
  .entry-content > .natural-photo-slider--hero { --nps-stage-height: max(60svh, 420px); margin-bottom: 56px; }
  .entry-content > .natural-photo-slider--hero .natural-photo-slider__content { margin-top: -64px; }
}
@media (min-width: 1025px) {
  .entry-content > .natural-photo-slider--hero { --nps-inactive-opacity: .5; --nps-stage-height: max(80svh, 600px); margin-bottom: 56px; }
  .entry-content > .natural-photo-slider--hero .natural-photo-slider__slide { width: min(calc(var(--nps-stage-height) * var(--nps-ratio, 1.5)), 84vw); }
  .entry-content > .natural-photo-slider--hero .natural-photo-slider__content {
    position: absolute; inset: auto 0 40px;
    width: min(calc(var(--nps-stage-height) * 1.5), 84vw);
    margin: 0 auto; padding: 0 40px;
    pointer-events: none;
  }
  .entry-content > .natural-photo-slider--hero .natural-photo-slider__content > * { pointer-events: auto; }
  .entry-content > .natural-photo-slider--hero .natural-photo-slider__content > .is-style-sc-glass-card { width: min(620px, 100%); margin-left: auto; }
}

/* On a motion site (assets/motion.css, body.sc-motion) the hero slideshow's title,
   text and buttons rise in like the cover hero's. */
@media screen and (prefers-reduced-motion: no-preference) {
  .sc-motion .entry-content > .natural-photo-slider--hero .natural-photo-slider__content :is(h1, h2:not(.sc-headline-sub)) { animation: sc-hero-rise .5s var(--sc-ease) both; }
  .sc-motion .entry-content > .natural-photo-slider--hero .natural-photo-slider__content .sc-headline-sub { animation: sc-hero-rise .5s var(--sc-ease) .05s both; }
  .sc-motion .entry-content > .natural-photo-slider--hero .natural-photo-slider__content p:not(.sc-headline-sub) { animation: sc-hero-rise .5s var(--sc-ease) .1s both; }
  .sc-motion .entry-content > .natural-photo-slider--hero .natural-photo-slider__content .wp-block-buttons { animation: sc-hero-rise .5s var(--sc-ease) .15s both; }
}

/* Two-part headline: either whole heading blocks or spans inside one heading. */
:is(.entry-content, .editor-styles-wrapper) .sc-headline-main { display: block; }
:is(.entry-content, .editor-styles-wrapper) .sc-headline-sub { display: block; margin-top: 8px; font-size: clamp(26px, 2.5vw, 38px); }
:is(.entry-content, .editor-styles-wrapper) h2.sc-headline-sub { font-size: clamp(22px, 1.1rem + .5vw, 32px); }
:is(.entry-content, .editor-styles-wrapper) .is-style-sc-glass-card .sc-headline-sub { color: var(--sc-muted); }
:is(.entry-content, .editor-styles-wrapper) .sc-lead { font-size: 1.1rem; }

/* Photo band: a full-width band holding an image-and-text row. Its highlight
   always belongs to the PHOTO column, grows vertically and never covers the text.
   :has() keeps saved core Columns editable and preserves no-script rendering. */
:is(.entry-content, .editor-styles-wrapper) .is-style-sc-photo-band {
  max-width: none;
  width: 100%;
  margin-block: 0;
  padding: clamp(64px, 7.5vw, 112px) var(--sc-gutter);
  background: var(--sc-photo-band-bg);
  /* The highlight behind a feature row reaches 40px past the row; never past the screen. */
  overflow-x: clip;
}
:is(.entry-content, .editor-styles-wrapper) .is-style-sc-photo-band > .wp-block-group { max-width: var(--sc-wide); margin-inline: auto; }
/* Inside a boxed section the band is only as wide as the page measure, so its own
   clip would cut the highlight off at the row's edge. Let the full-width section
   clip instead, so the highlight reaches 40px past the row as on live. */
:is(.entry-content, .editor-styles-wrapper) :is(.is-style-sc-boxed, .is-style-sc-boxed-full):has(> .is-style-sc-photo-band) { overflow-x: clip; }
:is(.entry-content, .editor-styles-wrapper) :is(.is-style-sc-boxed, .is-style-sc-boxed-full) > .is-style-sc-photo-band { overflow-x: visible; }
:is(.entry-content, .editor-styles-wrapper) .is-style-sc-photo-band .wp-block-columns:has(> .wp-block-column .is-style-sc-feature-photo) {
  display: grid;
  position: relative;
  isolation: isolate;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 48px;
  margin: 0;
}
:is(.entry-content, .editor-styles-wrapper) .is-style-sc-photo-band .wp-block-columns:has(> .wp-block-column .is-style-sc-feature-photo) > .wp-block-column { grid-row: 1; min-width: 0; }
:is(.entry-content, .editor-styles-wrapper) .is-style-sc-photo-band .wp-block-column:has(.is-style-sc-feature-photo) { margin-top: 50px; }
:is(.entry-content, .editor-styles-wrapper) .is-style-sc-feature-photo img { display: block; width: 100%; height: auto; border-radius: var(--sc-radius); box-shadow: var(--sc-shadow); }
:is(.entry-content, .editor-styles-wrapper) .is-style-sc-photo-band .wp-block-columns:has(> .wp-block-column .is-style-sc-feature-photo)::before {
  content: "";
  position: absolute;
  /* Exactly the photo's column: an absolute grid child's `auto` end line would be the
     row's far edge (live's RowBand uses var(--band-col) / span 1). */
  grid-row: 1;
  grid-column: 1 / span 1;
  z-index: -1;
  top: -56px;
  bottom: -56px;
  left: -40px;
  right: 28%;
  border-radius: 20px;
  background: var(--sc-photo-band-highlight);
  /* navigation.js grows the panel out from its outer edge with the scroll by
     setting --sc-band-hidden on the row; unset (no script, the editor, reduced
     motion, print) it is whole. */
  clip-path: inset(0 var(--sc-band-hidden, 0%) 0 0);
  pointer-events: none;
}
:is(.entry-content, .editor-styles-wrapper) .is-style-sc-photo-band .wp-block-columns:has(> .wp-block-column:nth-child(2) .is-style-sc-feature-photo)::before { grid-column: 2 / span 1; left: 28%; right: -40px; clip-path: inset(0 0 0 var(--sc-band-hidden, 0%)); }
:is(.entry-content, .editor-styles-wrapper) .is-style-sc-photo-band .wp-block-columns:has(> .wp-block-column .is-style-sc-feature-photo) > .wp-block-column:not(:has(.is-style-sc-feature-photo)) { padding: 40px; border-radius: var(--sc-card-radius); background: var(--sc-card-bg); border: 1px solid var(--sc-line); box-shadow: var(--sc-shadow); }

/* Columns styles. */
:is(.entry-content, .editor-styles-wrapper) .is-style-sc-category-links { gap: 24px; }
:is(.entry-content, .editor-styles-wrapper) .is-style-sc-category-links img { border-radius: var(--sc-radius); box-shadow: var(--sc-shadow); }
:is(.entry-content, .editor-styles-wrapper) .is-style-sc-card { padding: 28px; border: 1px solid var(--sc-line); border-radius: var(--sc-card-radius); background: var(--sc-card-bg); box-shadow: var(--sc-shadow); }
:is(.entry-content, .editor-styles-wrapper) .is-style-sc-price-table { align-items: stretch; gap: 24px; }
:is(.entry-content, .editor-styles-wrapper) .is-style-sc-price-table > .wp-block-column { padding: 28px; border: 1px solid var(--sc-line); border-radius: var(--sc-card-radius); }
:is(.entry-content, .editor-styles-wrapper) .sc-items-center { align-items: center !important; }

/* Image helpers. */
:is(.entry-content, .editor-styles-wrapper) .sc-rounded img { border-radius: var(--sc-radius); }
:is(.entry-content, .editor-styles-wrapper) .sc-no-shadow img { box-shadow: none !important; }

/* Spacing helpers: one small/medium/large scale for every look. */
:is(.entry-content, .editor-styles-wrapper) .sc-mt-0 { margin-top: 0 !important; }
:is(.entry-content, .editor-styles-wrapper) .sc-mt-s { margin-top: var(--sc-space-s) !important; }
:is(.entry-content, .editor-styles-wrapper) .sc-mt-m { margin-top: var(--sc-space-m) !important; }
:is(.entry-content, .editor-styles-wrapper) .sc-mt-l { margin-top: var(--sc-space-l) !important; }
:is(.entry-content, .editor-styles-wrapper) .sc-mb-0 { margin-bottom: 0 !important; }
:is(.entry-content, .editor-styles-wrapper) .sc-mb-s { margin-bottom: var(--sc-space-s) !important; }
:is(.entry-content, .editor-styles-wrapper) .sc-mb-m { margin-bottom: var(--sc-space-m) !important; }
:is(.entry-content, .editor-styles-wrapper) .sc-mb-l { margin-bottom: var(--sc-space-l) !important; }

/* Motion hooks (navigation.js adds these once IntersectionObserver is ready). */
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
  .sc-legacy-motion-ready .sc-legacy-row > .wp-block-column { transition: opacity .8s var(--sc-ease), transform 1s var(--sc-ease); }
  .sc-legacy-motion-ready .sc-legacy-row:not(.is-visible) > .wp-block-column { opacity: .85; transform: translateY(24px); }
}
@media (max-width: 1024px) {
  :is(.entry-content, .editor-styles-wrapper) .is-style-sc-photo-band .wp-block-columns:has(> .wp-block-column .is-style-sc-feature-photo) { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  :is(.entry-content, .editor-styles-wrapper) .is-style-sc-photo-band .wp-block-columns:has(> .wp-block-column .is-style-sc-feature-photo)::before { display: none; }
  :is(.entry-content, .editor-styles-wrapper) .is-style-sc-photo-band .wp-block-columns:has(> .wp-block-column .is-style-sc-feature-photo) > .wp-block-column { grid-row: auto; margin: 0; }
  :is(.entry-content, .editor-styles-wrapper) .sc-stack-tablet { flex-wrap: wrap !important; }
  :is(.entry-content, .editor-styles-wrapper) .wp-block-columns.sc-stack-tablet > .wp-block-column { flex-basis: 100% !important; }
  :is(.entry-content, .editor-styles-wrapper) .sc-two-up-tablet { flex-wrap: wrap !important; }
  :is(.entry-content, .editor-styles-wrapper) .wp-block-columns.sc-two-up-tablet > .wp-block-column { flex-basis: calc(50% - 12px) !important; flex-grow: 0; }
  :is(.entry-content, .editor-styles-wrapper) .sc-order-1 { order: 1; }
  :is(.entry-content, .editor-styles-wrapper) .sc-order-2 { order: 2; }
}
@media (max-width: 640px) {
  :is(.entry-content, .editor-styles-wrapper) .is-style-sc-page-hero { min-height: 600px; padding: 120px 20px 28px; }
  :is(.entry-content, .editor-styles-wrapper) .is-style-sc-page-hero.sc-hero-short { min-height: 500px; }
  :is(.entry-content, .editor-styles-wrapper) .is-style-sc-glass-card { padding: 26px 24px; border-radius: 20px; }
  :is(.entry-content, .editor-styles-wrapper) .is-style-sc-photo-band .wp-block-columns:has(> .wp-block-column .is-style-sc-feature-photo) > .wp-block-column:not(:has(.is-style-sc-feature-photo)) { padding: 26px; }
  :is(.entry-content, .editor-styles-wrapper) .is-style-sc-category-links { flex-wrap: wrap !important; }
  :is(.entry-content, .editor-styles-wrapper) .wp-block-columns.is-style-sc-category-links > .wp-block-column { flex-basis: calc(50% - 12px) !important; flex-grow: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-legacy-row, .sc-legacy-row > .wp-block-column { transition: none !important; transform: none !important; opacity: 1 !important; }
  :is(.entry-content, .editor-styles-wrapper) .is-style-sc-photo-band .wp-block-columns::before { clip-path: none !important; }
}