/* P4 Layout Rich Landing — taxonomy-backed Kitchen Layout public surface.
 * Reuses global ZACO/frontend theme tokens; no Blissspace-specific hard colors. */
.zaco-fe-layout .zaco-fe-section { padding-block: var(--zaco-fe-editorial-section-space); }

.zaco-fe-layout-hero { background: var(--zaco-fe-surface); }
/* Breadcrumb-to-hero rhythm: the standard editorial section padding plus a second
   grid offset produced excessive blank space above Layout landing-page heroes. */
.zaco-fe-layout .zaco-fe-layout-hero.zaco-fe-section { padding-block-start: var(--zaco-fe-space-6); }

.zaco-fe-layout-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(22rem, 1.05fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: stretch;
  margin-top: var(--zaco-fe-space-6);
}
.zaco-fe-layout-hero__grid--no-media { grid-template-columns: minmax(0, 46rem); }
.zaco-fe-layout-hero__copy { align-self: center; max-width: 42rem; }
.zaco-fe-layout-hero__copy h1 {
  margin: 0;
  font-size: var(--zaco-fe-editorial-hero-size);
  line-height: var(--zaco-fe-editorial-line-height);
  font-weight: var(--zaco-fe-editorial-hero-weight);
}
.zaco-fe-layout-hero__copy .zaco-fe-lead { max-width: 38rem; margin-top: var(--zaco-fe-space-6); }
.zaco-fe-layout-hero__actions { display: flex; flex-wrap: wrap; gap: var(--zaco-fe-space-3); margin-top: var(--zaco-fe-space-8); }
.zaco-fe-layout-hero__media {
  min-height: clamp(22rem, 38vw, 34rem);
  margin: 0;
  overflow: hidden;
  border-radius: var(--zaco-fe-stitch-card-radius);
  background: var(--zaco-fe-surface-subtle);
}
.zaco-fe-layout-hero__media img { width: 100%; height: 100%; object-fit: cover; }

.zaco-fe-layout-overview__grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
/* Component overview only: its editorial explanation generally needs more width
 * than the adjacent highlight cards. Preserve the Layout factory's own ratio.
 * A 1025px threshold matches the shared Layout stack breakpoint below. */
@media (min-width: 1025px) {
  .zaco-fe-component .zaco-fe-layout-overview__grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  }
}
.zaco-fe-layout-overview__copy h2 { margin: 0 0 var(--zaco-fe-space-6); font-size: var(--zaco-fe-editorial-section-size); }
.zaco-fe-layout-overview__editorial { margin-top: var(--zaco-fe-space-6); }
.zaco-fe-layout-highlight-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--zaco-fe-space-4); }
.zaco-fe-layout-highlight {
  padding: var(--zaco-fe-space-6);
  border: 1px solid var(--zaco-fe-border);
  border-radius: var(--zaco-fe-stitch-card-radius);
  background: var(--zaco-fe-surface-raised);
}
.zaco-fe-layout-highlight h3 { margin: 0 0 var(--zaco-fe-space-3); font-size: var(--zaco-fe-text-lg); }
.zaco-fe-layout-highlight p { margin: 0; color: var(--zaco-fe-text-muted); line-height: var(--zaco-fe-leading-body); }

.zaco-fe-layout-media__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(19rem, .65fr);
  gap: var(--zaco-fe-space-6);
  align-items: stretch;
  margin-top: var(--zaco-fe-space-8);
}
.zaco-fe-layout-media__grid--gallery-only { grid-template-columns: 1fr; }
.zaco-fe-layout-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  grid-auto-rows: minmax(10rem, 14rem);
  gap: var(--zaco-fe-space-3);
}
.zaco-fe-layout-gallery__item { position: relative; margin: 0; overflow: hidden; border-radius: var(--zaco-fe-stitch-card-radius); background: var(--zaco-fe-surface-raised); }
.zaco-fe-layout-gallery__item--lead { grid-row: span 2; }
.zaco-fe-layout-gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.zaco-fe-layout-gallery__item figcaption {
  position: absolute; inset-inline: var(--zaco-fe-space-3); bottom: var(--zaco-fe-space-3);
  width: fit-content; max-width: calc(100% - 1.5rem); padding: .4rem .65rem;
  border-radius: .35rem; background: color-mix(in srgb, var(--zaco-fe-theme-text) 82%, transparent);
  color: var(--zaco-fe-theme-surface); font-size: var(--zaco-fe-text-xs);
}
.zaco-fe-layout-video { min-height: 100%; overflow: hidden; border-radius: var(--zaco-fe-stitch-card-radius); background: var(--zaco-fe-surface-raised); }
.zaco-fe-layout-video iframe,
.zaco-fe-layout-video video { display: block; width: 100%; height: 100%; min-height: 24rem; border: 0; object-fit: cover; }

.zaco-fe-layout-related__grid,
.zaco-fe-layout-discovery__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--zaco-fe-space-6); margin-top: var(--zaco-fe-space-8); align-items: stretch; }
.zaco-fe-layout-related__panel,
.zaco-fe-layout-discovery__panel { min-width: 0; }
.zaco-fe-layout-related__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--zaco-fe-space-4); margin-bottom: var(--zaco-fe-space-5); }
.zaco-fe-layout-related__head h3 { margin: 0; font-size: var(--zaco-fe-text-xl); }
.zaco-fe-layout-related__head a { font-size: var(--zaco-fe-text-sm); }
.zaco-fe-layout-card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--zaco-fe-space-3); }
.zaco-fe-layout-card-grid .zaco-fe-card__media { aspect-ratio: 4/3; }
.zaco-fe-layout-card-grid .zaco-fe-card__body { padding: var(--zaco-fe-space-4); }

.zaco-fe-layout-discovery__panel {
  padding: clamp(1.25rem, 2vw, 2rem);
  border: 1px solid var(--zaco-fe-border);
  border-radius: var(--zaco-fe-stitch-card-radius);
  background: var(--zaco-fe-surface-raised);
}
.zaco-fe-layout-discovery__panel .zaco-fe-section-heading { margin-bottom: var(--zaco-fe-space-6); }
.zaco-fe-layout-other-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--zaco-fe-space-3); }
.zaco-fe-layout-other-grid .zaco-fe-card__media { aspect-ratio: 4/3; }
.zaco-fe-layout .zaco-fe-text-link { margin-top: var(--zaco-fe-space-5); }

.zaco-fe-layout-editorial__content { max-width: var(--zaco-fe-richtext-measure); margin-inline: auto; }
.zaco-fe-layout-cta {
  --zaco-fe-photo-cta-min-height: 16rem;
  --zaco-fe-photo-cta-measure: 38rem;
  padding-block: var(--zaco-fe-space-8) var(--zaco-fe-space-12);
}
.zaco-fe-layout-cta__actions { display: flex; flex-wrap: wrap; gap: var(--zaco-fe-space-3); margin-top: var(--zaco-fe-space-5); }
.zaco-fe-layout-cta .zaco-fe-button--ghost { margin-block-start: var(--zaco-fe-space-3); }

@media (max-width: 1024px) {
  .zaco-fe-layout-hero__grid,
  .zaco-fe-layout-overview__grid,
  .zaco-fe-layout-media__grid { grid-template-columns: 1fr; }
  .zaco-fe-layout-hero__media { min-height: 24rem; }
  .zaco-fe-layout-video iframe,
  .zaco-fe-layout-video video { min-height: 26rem; aspect-ratio: 16/9; }
  .zaco-fe-layout-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 767px) {
  .zaco-fe-layout .zaco-fe-section { padding-block: var(--zaco-fe-editorial-section-space-mobile); }
  .zaco-fe-layout-hero__grid { margin-top: var(--zaco-fe-space-6); gap: var(--zaco-fe-space-6); }
  .zaco-fe-layout-hero__media { min-height: 19rem; }
  .zaco-fe-layout-highlight-grid,
  .zaco-fe-layout-related__grid,
  .zaco-fe-layout-discovery__grid,
  .zaco-fe-layout-card-grid,
  .zaco-fe-layout-other-grid { grid-template-columns: 1fr; }
  .zaco-fe-layout-gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 9rem; }
  .zaco-fe-layout-gallery__item--lead { grid-column: span 2; grid-row: span 2; }
  .zaco-fe-layout-video iframe,
  .zaco-fe-layout-video video { min-height: auto; aspect-ratio: 16/9; }
  .zaco-fe-layout-related__head { align-items: flex-start; flex-direction: column; }
}

/* Governed Layout Hero media presets. Default (inherit) retains the approved factory. */
.zaco-fe-layout-hero__media[data-desktop-ratio="16-9"] { aspect-ratio: 16 / 9; min-height: 0; }
.zaco-fe-layout-hero__media[data-desktop-ratio="3-2"] { aspect-ratio: 3 / 2; min-height: 0; }
.zaco-fe-layout-hero__media[data-desktop-ratio="4-3"] { aspect-ratio: 4 / 3; min-height: 0; }
.zaco-fe-layout-hero__media[data-desktop-ratio="1-1"] { aspect-ratio: 1; min-height: 0; }
.zaco-fe-layout-hero__media[data-desktop-fit="contain"] img { object-fit: contain; }
.zaco-fe-layout-hero__media[data-desktop-fit="cover"] img { object-fit: cover; }
.zaco-fe-layout-hero__media[data-desktop-focus-x="left"] img { object-position-x: left; }
.zaco-fe-layout-hero__media[data-desktop-focus-x="center"] img { object-position-x: center; }
.zaco-fe-layout-hero__media[data-desktop-focus-x="right"] img { object-position-x: right; }
.zaco-fe-layout-hero__media[data-desktop-focus-y="top"] img { object-position-y: top; }
.zaco-fe-layout-hero__media[data-desktop-focus-y="center"] img { object-position-y: center; }
.zaco-fe-layout-hero__media[data-desktop-focus-y="bottom"] img { object-position-y: bottom; }
@media (max-width: 767px) {
  .zaco-fe-layout-hero__media[data-mobile-ratio="1-1"] { aspect-ratio: 1; min-height: 0; }
  .zaco-fe-layout-hero__media[data-mobile-ratio="3-4"] { aspect-ratio: 3 / 4; min-height: 0; }
  .zaco-fe-layout-hero__media[data-mobile-ratio="2-3"] { aspect-ratio: 2 / 3; min-height: 0; }
  .zaco-fe-layout-hero__media[data-mobile-ratio="3-5"] { aspect-ratio: 3 / 5; min-height: 0; }
  .zaco-fe-layout-hero__media[data-mobile-fit="contain"] img { object-fit: contain; }
  .zaco-fe-layout-hero__media[data-mobile-fit="cover"] img { object-fit: cover; }
  .zaco-fe-layout-hero__media[data-mobile-focus-x="left"] img { object-position-x: left; }
  .zaco-fe-layout-hero__media[data-mobile-focus-x="center"] img { object-position-x: center; }
  .zaco-fe-layout-hero__media[data-mobile-focus-x="right"] img { object-position-x: right; }
  .zaco-fe-layout-hero__media[data-mobile-focus-y="top"] img { object-position-y: top; }
  .zaco-fe-layout-hero__media[data-mobile-focus-y="center"] img { object-position-y: center; }
  .zaco-fe-layout-hero__media[data-mobile-focus-y="bottom"] img { object-position-y: bottom; }
}

/* Explicit media ratios opt into a bounded frame; inherit preserves legacy stretch. */
.zaco-fe-layout-hero__media:not([data-desktop-ratio="inherit"]) { align-self: center; width: 100%; }
@media (max-width: 767px) {
  .zaco-fe-layout-hero__media[data-mobile-ratio="inherit"] { align-self: stretch; }
}

/* Component editorial sections reuse the existing factory tokens and breakpoints. */
.zaco-fe-component-guidance__grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--zaco-fe-space-8,2rem);align-items:start}
.zaco-fe-component-guidance__grid--solo{display:block}
.zaco-fe-component-guidance__grid--solo .zaco-fe-component-guidance__copy{max-width:68ch}
.zaco-fe-component-guidance__checklist{background:var(--zaco-fe-surface-soft,var(--zaco-fe-surface,#f5f7f4));border-radius:var(--zaco-fe-card-radius,1rem);padding:var(--zaco-fe-space-6,1.5rem)}
.zaco-fe-component-guidance__checklist h3{margin-block:0 var(--zaco-fe-space-4,1rem)}
.zaco-fe-component-guidance__checklist ul{margin:0;padding-inline-start:1.25em}
.zaco-fe-component-guidance__checklist li+li{margin-top:var(--zaco-fe-space-3,.75rem)}
.zaco-fe-component-faq__grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:var(--zaco-fe-space-8,2rem);align-items:start}
.zaco-fe-component-faq__intro p{max-width:42ch}
.zaco-fe-component-faq__answers{min-width:0}
.zaco-fe-component-faq__answers .zaco-fe-faqs{width:100%}
.zaco-fe-component-faq__answers .zaco-fe-text-link{margin-top:var(--zaco-fe-space-5,1.25rem)}
@media(max-width:767px){.zaco-fe-component-guidance__grid,.zaco-fe-component-faq__grid{grid-template-columns:minmax(0,1fr)}}

/* Component collection uses the shared collection renderer. Three/two/one grid baseline. */
:is(.zaco-fe-component-options,.zaco-fe-component-child-components) .zaco-fe-component-cards.zaco-fe-collection--grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--zaco-fe-space-4,1rem)}
@media(max-width:1023px){:is(.zaco-fe-component-options,.zaco-fe-component-child-components) .zaco-fe-component-cards.zaco-fe-collection--grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){:is(.zaco-fe-component-options,.zaco-fe-component-child-components) .zaco-fe-component-cards.zaco-fe-collection--grid{grid-template-columns:minmax(0,1fr)}}
/* Component editorial backgrounds follow existing factory/theme palette tokens. */
/* Component surfaces use existing theme-derived editorial tokens; the previous
 * --zaco-fe-surface-soft variable was undefined and collapsed to normal. */
.zaco-fe-component [data-zaco-component-surface="soft"]{background:var(--zaco-fe-editorial-surface-mint,var(--zaco-fe-surface-subtle,var(--zaco-fe-surface)))}
.zaco-fe-component [data-zaco-component-surface="surface"]{background:var(--zaco-fe-surface)}

/* Component factory collections: fixed 3/2/1 tracks, even with only one card.
   Scoped to this factory; existing Layout and Product collections are unchanged. */
.zaco-fe-component :is(.zaco-fe-component-products,.zaco-fe-component-projects,.zaco-fe-component-articles,.zaco-fe-component-others) .zaco-fe-component-cards.zaco-fe-collection--grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1023px){.zaco-fe-component :is(.zaco-fe-component-products,.zaco-fe-component-projects,.zaco-fe-component-articles,.zaco-fe-component-others) .zaco-fe-component-cards.zaco-fe-collection--grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.zaco-fe-component :is(.zaco-fe-component-products,.zaco-fe-component-projects,.zaco-fe-component-articles,.zaco-fe-component-others) .zaco-fe-component-cards.zaco-fe-collection--grid{grid-template-columns:minmax(0,1fr)}}