/*
 * Label 7 — component styles
 * All selectors use the sc- prefix and --sc-* tokens.
 * Source of truth for values: Figma "Label Zeven", Home (node 150:5).
 */

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; height: auto; }

:focus-visible {
  outline: 2px solid var(--sc-color-ink);
  outline-offset: 2px;
}

.wp-site-blocks {
  position: relative;

  & > * { margin-block-start: 0; }
}

/* ---- Logo (header + footer) ---- */
.sc-logo {
  margin: 0;

  & a {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    color: var(--sc-color-ink);
    font-family: var(--sc-font-serif);
    font-size: 27.5px;
    line-height: 1;
    letter-spacing: -0.03em;
    text-decoration: none;
  }

  & strong {
    font-family: var(--sc-font-sans);
    font-size: 24.5px;
    font-weight: 700;
    font-stretch: var(--sc-stretch-display);
    letter-spacing: var(--sc-tracking-tight);
  }
}

/* ---- Site header ---- */
.wp-block-template-part.is-overlay {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
}

.sc-site-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sc-space-s);
  padding: 16px var(--sc-gutter);
  font-family: var(--sc-font-sans);
  font-size: var(--sc-text-sm);
  line-height: 1;

  & .sc-logo {
    justify-self: start;

    & a {
      align-items: center;
      height: var(--sc-control-height);
      padding-inline: 14px;
      background: var(--sc-color-white);
      border-radius: var(--sc-radius-button);
    }
  }

  & .sc-site-nav { justify-self: center; }

  & .sc-contact-link {
    justify-self: end;
    margin: 0;

    & a {
      display: inline-flex;
      align-items: center;
      height: var(--sc-control-height);
      padding-inline: 22px;
      color: var(--sc-color-ink);
      text-decoration: none;
      background: var(--sc-glass);
      backdrop-filter: var(--sc-glass-blur);
      border-radius: var(--sc-radius-button);
    }
  }
}

.sc-site-nav {
  /* Core sets background-color: inherit on items, which would stack the glass. */
  & .wp-block-navigation-item { background: transparent; }

  & .wp-block-navigation-item__content {
    display: block;
    padding: 8px 16px;
    color: var(--sc-color-ink);
    text-decoration: none;
    border-radius: var(--sc-radius-button);
  }

  & .current-menu-item > .wp-block-navigation-item__content,
  & .wp-block-navigation-item__content:hover {
    background: var(--sc-color-white);
  }
}

@media (min-width: 600px) {
  .sc-site-nav .wp-block-navigation__container {
    gap: 4px;
    padding: 6px;
    background: var(--sc-glass);
    backdrop-filter: var(--sc-glass-blur);
    border-radius: var(--sc-radius-button);
  }
}

/* ---- Hero (front page) ---- */
.sc-hero {
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  height: clamp(560px, 100svh, 960px);
  overflow: hidden;
  isolation: isolate;
  color: var(--sc-color-white);
  background: var(--sc-color-ink);

  & > * {
    grid-area: 1 / 1;
    margin: 0;
  }

  /* Figma: 15% black, multiply, over the photo. */
  &::after {
    content: "";
    grid-area: 1 / 1;
    z-index: -1;
    background: rgb(0 0 0 / 0.15);
    mix-blend-mode: multiply;
  }

  & .sc-hero-image {
    z-index: -2;
    height: 100%;

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

.sc-hero-title {
  align-self: center;
  justify-self: center;
  max-width: 14em;
  padding-inline: var(--sc-gutter);
  font-size: var(--sc-text-4xl);
  font-stretch: var(--sc-stretch-display);
  text-align: center;
  text-wrap: balance;

  &:empty { display: none; }
}

/* Gap typed as "|" in the hero title field (Figma: about 4em at 1440). */
.sc-hero-gap {
  display: inline-block;
  width: min(4em, 16vw);
}

/* .sc-hero prefix: core's flow-layout last-child rule would otherwise zero the margin. */
.sc-hero .sc-hero-subtitle {
  position: relative;
  align-self: end;
  justify-self: center;
  margin-block-end: 40px;
  padding-inline: var(--sc-gutter);
  font-family: var(--sc-font-serif);
  font-size: var(--sc-text-lg);
  line-height: var(--sc-leading-body);
  text-align: center;

  &::before {
    content: "";
    position: absolute;
    inset: -24px -48px;
    z-index: -1;
    background: rgb(0 0 0 / 0.6);
    filter: blur(30px);
  }

  &:empty { display: none; }
}

/* ---- Page content ---- */
.sc-page-content {
  padding-block-start: var(--sc-space-l);

  & > :where(:not(.sc-band)) {
    max-width: calc(var(--sc-width-text) + 2 * var(--sc-gutter));
    padding-inline: var(--sc-gutter);
  }
}

.sc-page-title {
  margin: 0;
  padding: calc(var(--sc-space-section) + 56px) var(--sc-gutter) 0;
  font-size: var(--sc-text-4xl);
}

/* Intro text on the homepage ("Lead") */
.is-style-sc-lead {
  max-width: var(--sc-width-text);
  font-family: var(--sc-font-sans);
  font-size: var(--sc-text-3xl);
  font-weight: 500;
  font-stretch: var(--sc-stretch-text);
  line-height: 1.2;
}

.is-style-sc-lead + .wp-block-buttons { margin-block-start: var(--sc-space-l); }

/* Small label above a section heading */
.is-style-sc-eyebrow {
  font-family: var(--sc-font-serif);
  font-size: var(--sc-text-body);
  line-height: var(--sc-leading-body);
  color: var(--sc-color-muted);
}

/* ---- Buttons ---- */
.wp-block-buttons {
  align-items: center;
  gap: 16px 35px;
}

.wp-block-button {
  & .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--sc-control-height);
    transition: opacity 120ms ease;

    &:hover { opacity: 0.85; }
  }

  &.is-style-sc-link .wp-block-button__link {
    min-height: 0;
    padding: 0;
    color: var(--sc-color-ink);
    background: transparent;
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }
}

/* ---- Highlight ([highlight] shortcode) ---- */
.sc-highlight {
  --sc-hl: var(--sc-color-paars);

  &.like-licht-roze { --sc-hl: var(--sc-color-licht-roze); }
  &.like-groen      { --sc-hl: var(--sc-color-groen); }
  &.like-blauw      { --sc-hl: var(--sc-color-blauw); }
  &.like-oranje     { --sc-hl: var(--sc-color-oranje); }
  &.like-geel       { --sc-hl: var(--sc-color-geel); }
  &.like-roze       { --sc-hl: var(--sc-color-roze); }
  &.like-grijs      { --sc-hl: var(--sc-color-paper); }
}

mark.sc-highlight,
.sc-highlight-word {
  padding-inline: 0.12em;
  color: inherit;
  background: color-mix(in srgb, var(--sc-hl) 60%, transparent);
  border-radius: var(--sc-radius);
}

.is-style-sc-lead .sc-highlight-word { background: var(--sc-hl); }

.sc-highlight.has-note {
  position: relative;

  & .sc-highlight-word { cursor: help; }

  /* Hidden notes use display:none so they never widen the page on phones. */
  & .sc-highlight-note {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 10;
    display: none;
    width: min(15.625rem, 70vw);
    padding: 12px;
    color: var(--sc-color-ink);
    background: var(--sc-hl);
    border-radius: var(--sc-radius);
    font-family: var(--sc-font-sans);
    font-size: var(--sc-text-md);
    font-weight: 500;
    font-stretch: var(--sc-stretch-text);
    line-height: var(--sc-leading-body);
    letter-spacing: 0;
    text-align: left;
  }

  &:hover .sc-highlight-note,
  &:focus-within .sc-highlight-note { display: block; }
}

/* position="above": the note grows upward from the word, whatever its length. */
@media (min-width: 37.5625em) {
  .sc-highlight.has-note-above .sc-highlight-note {
    top: auto;
    bottom: calc(100% + 4px);
  }
}

/* Phones: an opened note docks to the bottom of the screen instead of next to the word. */
@media (max-width: 37.5em) {
  .sc-highlight.has-note .sc-highlight-note {
    position: fixed;
    inset: auto var(--sc-gutter) var(--sc-gutter);
    width: auto;
    padding: 12px;
    box-shadow: 0 4px 24px rgb(0 0 0 / 0.2);
  }
}

/* ---- Sections (locked patterns) ---- */
.sc-band {
  margin-block-start: var(--sc-space-section);

  & .sc-band-image {
    margin: 0;

    & img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: var(--sc-radius);
    }
  }

  /* Grid and flex children: drop the flow-layout block gap margins. */
  & .sc-band-body > *,
  & .sc-band-head > *,
  & .sc-cards > * { margin-block: 0; }
}

.sc-band.like-media-text > * { margin-block: 0; }

.sc-band-title {
  margin: 0;
  font-size: var(--sc-text-4xl);
  font-stretch: var(--sc-stretch-display);
  text-wrap: balance;

  & em {
    font-family: var(--sc-font-serif);
    font-style: normal;
    font-weight: 400;
    font-stretch: normal;
  }
}

.sc-band-link {
  font-family: var(--sc-font-sans);
  font-size: var(--sc-text-md);
  letter-spacing: var(--sc-tracking-tight);

  & a {
    color: var(--sc-color-muted);
    text-underline-offset: 0.15em;
  }
}

/* Section 1: photo with quote */
.sc-band.like-photo-quote {
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  min-height: 480px;
  margin-inline: var(--sc-gutter);
  aspect-ratio: 1376 / 827;
  overflow: hidden;
  border-radius: var(--sc-radius);

  & > * {
    grid-area: 1 / 1;
    margin-block: 0;
  }

  & .sc-band-image { height: 100%; }

  /* Figma: scrim towards the bottom-left so the white quote stays readable. */
  &::after {
    content: "";
    position: relative;
    grid-area: 1 / 1;
    background: linear-gradient(223deg, rgb(0 0 0 / 0) 44.8%, rgb(0 0 0 / 0.5) 81.3%);
    border-radius: var(--sc-radius);
    pointer-events: none;
  }

  /* Core positions the image block; lift the text above it. */
  & .sc-band-body {
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-self: end;
    align-items: flex-start;
    gap: var(--sc-space-m);
    padding: var(--sc-space-m);
    text-align: left;
  }

  & .sc-band-link {
    font-weight: 500;
    font-stretch: var(--sc-stretch-text);
    line-height: var(--sc-leading-body);

    & a { color: var(--sc-color-muted-on-dark); }
  }
}

.sc-quote {
  max-width: 37rem;
  font-family: var(--sc-font-serif);
  font-size: var(--sc-text-2xl);
  line-height: 1;
  letter-spacing: var(--sc-tracking-tight);
  color: var(--sc-color-white);
}

/* Section 2: the seven bouwstenen */
.sc-band.like-bouwstenen {
  padding-inline: var(--sc-gutter);

  & .sc-band-head {
    display: grid;
    grid-template-columns: minmax(0, 776fr) minmax(0, 600fr);
    gap: var(--sc-space-s) 9px;
    align-items: start;
  }

  & .sc-band-text {
    max-width: 23.875rem;
    padding-block-start: 7px;
  }

  & .sc-cards { margin-block-start: var(--sc-space-section); }
}

.sc-cards {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 16px;
}

.sc-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  min-height: 245px;
  padding: 20px;
  color: var(--sc-color-ink);
  text-align: center;
  border-radius: var(--sc-radius);
  container-type: inline-size;

  & > * { margin-block: 0; }

  /* Scales with the card (24px at 1440, Figma) down to 18px (at the default root size), so "Vakmanschap" never
     leaves a narrow card. As in Figma the title may use 14px of the card padding; break-word is the
     safety net for a longer word. */
  & .sc-card-title {
    max-width: calc(100% + 28px);
    margin-inline: -14px;
    font-size: clamp(var(--sc-text-md), 16.8cqi, var(--sc-text-xl));
    overflow-wrap: break-word;
    font-weight: 500;
    font-stretch: 100%;
    line-height: 1;
  }

  & .sc-card-question {
    font-size: var(--sc-text-body);
    line-height: var(--sc-leading-body);
  }
}

/* Sections 3 and 4: media + text */
.sc-band.like-media-text {
  display: grid;
  align-items: center;
  gap: 17px;
  padding-inline: var(--sc-gutter);

  &.has-media-start {
    grid-template-columns: minmax(0, 777fr) minmax(0, 581fr);

    & .sc-band-image img { aspect-ratio: 777 / 972; }
  }

  &.has-media-end {
    grid-template-columns: minmax(0, 580fr) minmax(0, 779fr);
    padding-block: 40px;

    & .sc-band-image img { aspect-ratio: 779 / 744; }
  }
}

.sc-band-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sc-space-m);
  padding: var(--sc-space-m);
  text-align: center;

  /* Running text only (core adds .wp-block-paragraph to every paragraph). */
  & > p:not([class*="is-style-"], [class*="sc-"]) { max-width: 32.3125rem; }
}

/* Section 5: articles */
.sc-band.like-articles {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sc-space-m);
  max-width: calc(54.875rem + 2 * var(--sc-gutter));
  margin-inline: auto;
  padding-inline: var(--sc-gutter);
  text-align: center;

  & > * { margin-block: 0; }

  & .sc-band-title { max-width: 44.8125rem; }
}

.sc-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--sc-font-sans);
  font-size: var(--sc-text-md);
  font-weight: 500;
  font-stretch: var(--sc-stretch-text);
  line-height: var(--sc-leading-body);

  & li {
    --sc-chip: var(--sc-color-groen);
    display: flex;
    align-items: center;
    gap: 12px;

    &::before {
      content: "";
      flex: none;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: var(--sc-chip);
    }

    &:nth-child(7n + 2) { --sc-chip: var(--sc-color-roze); }
    &:nth-child(7n + 3) { --sc-chip: var(--sc-color-paars); }
    &:nth-child(7n + 4) { --sc-chip: var(--sc-color-blauw); }
    &:nth-child(7n + 5) { --sc-chip: var(--sc-color-oranje); }
    &:nth-child(7n + 6) { --sc-chip: var(--sc-color-geel); }
    &:nth-child(7n + 7) { --sc-chip: var(--sc-color-licht-roze); }
  }

  & a {
    color: inherit;
    text-decoration: none;
  }

  & .cat-item-none { display: none; }
}

.sc-articles { width: 100%; }

.sc-article-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;

  & > li { margin: 0; }

  & > li:nth-child(3n + 2) { --sc-article-fallback: url("../images/artikel-2.svg"); }
  & > li:nth-child(3n + 3) { --sc-article-fallback: url("../images/artikel-3.svg"); }
}

.sc-article-card {
  height: 100%;
  padding: 10px;
  text-align: left;
  background: var(--sc-color-white);
  border-radius: var(--sc-radius);

  & > * { margin-block: 0; }

  & .wp-block-post-featured-image {
    aspect-ratio: 262 / 279.5;

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: var(--sc-radius);
    }
  }

  &:not(:has(.wp-block-post-featured-image))::before {
    content: "";
    display: block;
    aspect-ratio: 262 / 279.5;
    background: var(--sc-article-fallback, url("../images/artikel-1.svg")) center / cover no-repeat;
    border-radius: var(--sc-radius);
  }

  & .wp-block-post-title {
    padding-block: 12px;
    font-family: var(--sc-font-serif);
    font-size: var(--sc-text-body);
    font-weight: 400;
    line-height: var(--sc-leading-body);
    letter-spacing: 0;

    & a {
      color: inherit;
      text-decoration: none;
    }
  }
}

.sc-empty { color: var(--sc-color-muted); }

/* ---- Site footer ---- */
.sc-site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-space-s);
  min-height: 59px;
  margin-block-start: var(--sc-space-section);
  padding: 16px var(--sc-gutter);
  border-top: 1px solid var(--sc-color-ink);

  & > * { margin: 0; }

  & .sc-logo a { font-size: 29px; }

  & .sc-logo strong { font-size: 26px; }
}

.sc-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  font-family: var(--sc-font-sans);
  font-size: var(--sc-text-sm);
  font-weight: 500;
  font-stretch: var(--sc-stretch-text);

  & a {
    color: inherit;
    text-decoration: none;

    &:hover { text-decoration: underline; }
  }
}

/* ---- Responsive ----
   em breakpoints: a reader with a larger browser font gets the narrower layout sooner.
   (The 600px nav rule above stays in px: it pairs with core's navigation overlay.) */
@media (max-width: 68.75em) {
  .sc-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .sc-card { min-height: 180px; }
}

@media (max-width: 48.875em) {
  .sc-site-header { grid-template-columns: auto 1fr auto; }

  .sc-site-header .sc-site-nav { justify-self: end; }

  .sc-band.like-bouwstenen .sc-band-head,
  .sc-band.like-media-text.has-media-start,
  .sc-band.like-media-text.has-media-end {
    grid-template-columns: minmax(0, 1fr);
  }

  .sc-band.like-media-text .sc-band-body { padding-inline: 0; }

  .sc-band.like-photo-quote {
    aspect-ratio: auto;
    min-height: 520px;
  }

  .sc-article-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 37.5em) {
  .sc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .sc-card { min-height: 140px; }
}

/* Only reached on small phones or with a large browser font (480px wide at a 24px root). */
@media (max-width: 20em) {
  .sc-cards { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}