/* W5 layouts reuse W2 tokens and W3 components. No parallel palette. */
.cic-main {
  padding-block: var(--wp--custom--cic--home--section);
  overflow-wrap: anywhere;
}

/* Native constrained blocks otherwise cap the entire application at 48rem. */
.cic-main > .wp-block-post-content:has(.cic-institutional),
.cic-main > .wp-block-post-title,
.cic-main > .cic-breadcrumb,
.cic-main > .cic-domain,
.cic-main > .cic-catalog-layout,
.wp-block-post-content > .cic-institutional {
  max-inline-size: none;
}

.cic-container {
  inline-size: min(calc(100% - 2 * clamp(1.25rem, 4vw, 3rem)), 80rem);
}

.cic-main h1 {
  font-size: var(--wp--custom--cic--home--display);
  line-height: 1.1;
  max-inline-size: 24ch;
}

.cic-content-grid,
.cic-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--wp--custom--cic--home--gap);
}

.cic-content-card,
.cic-catalog-layout > *,
.cic-detail-hero > * {
  min-inline-size: 0;
}

.cic-content-card h2,
.cic-content-card h3 {
  font-size: 1.25rem;
  line-height: 1.4;
}

.cic-card-media {
  display: grid;
  place-items: center;
  aspect-ratio: 2 / 1;
  background: var(--cic-color-elevated);
  border-radius: .25rem;
  overflow: hidden;
}

.cic-card-media img {
  inline-size: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  block-size: auto;
}

/* Client editorial compositions contain essential text and must remain uncropped. */
.cic-type-cic_solution .cic-card-media img,
.cic-type-cic_service .cic-card-media img {
  block-size: 100%;
  object-fit: contain;
}

.cic-content-card :where(h2, h3) a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
}

.cic-content-card :where(h2, h3) a:hover {
  text-decoration: underline;
}

.cic-content-card > p:not(.cic-price):not(.cic-availability) {
  font-size: 1rem;
  color: var(--cic-color-text-secondary);
}

.cic-content-card > :last-child {
  margin-block-end: 0;
}

.cic-type-cic_product img,
.cic-type-cic_partner img {
  object-fit: contain;
}

.cic-action,
.cic-filters button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 3rem;
  max-inline-size: 100%;
  padding: .75rem 1rem;
  margin-block: .5rem;
  background: var(--cic-color-action-primary);
  color: var(--cic-color-on-action);
  border: 0;
  border-radius: var(--wp--custom--cic--home--radius);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
}

.cic-secondary-action {
  background: var(--cic-color-action-secondary);
  color: var(--cic-color-text-primary);
}

.cic-price {
  font-size: 1.25rem;
  font-weight: 700;
}

.cic-availability {
  border-inline-start: .25rem solid currentColor;
  padding-inline-start: .5rem;
  color: var(--cic-color-text-secondary);
}

.cic-availability[data-availability="AVAILABLE"] {
  color: var(--cic-color-success);
}

.cic-availability[data-availability="LIMITED"],
.cic-availability[data-availability="ON_REQUEST"] {
  color: var(--cic-color-warning);
}

.cic-availability[data-availability="UNAVAILABLE"] {
  color: var(--cic-color-error);
}

.cic-catalog-layout,
.cic-detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--wp--custom--cic--home--split-gap);
  align-items: start;
}

.cic-filters fieldset {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  margin: 0;
  padding: 1rem;
  gap: .5rem;
  border: 1px solid var(--cic-color-border);
  border-radius: var(--wp--custom--cic--home--radius);
}

.cic-filters :where(input, select) {
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 2.75rem;
  font: inherit;
}

.cic-breadcrumb ol,
.cic-article-navigation {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  padding: 0;
  list-style: none;
}

.cic-breadcrumb li + li::before {
  content: "/";
  padding-inline-end: .75rem;
}

.cic-breadcrumb,
.cic-article-meta {
  font-size: .875rem;
  color: var(--cic-color-text-secondary);
}

.cic-reading {
  max-inline-size: 65ch;
  margin-inline: auto;
  line-height: 1.75;
}

.single-post .wp-block-post-featured-image img {
  aspect-ratio: 2 / 1;
  max-block-size: 32rem;
  object-fit: cover;
}

.cic-detail-section {
  margin-block: var(--wp--custom--cic--home--section);
}

.cic-specifications > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: .5rem 1.5rem;
  padding-block: .75rem;
  border-block-end: 1px solid var(--cic-color-border);
}

.cic-specifications dt {
  font-weight: 600;
}

.cic-specifications dd,
.cic-gallery figure {
  margin: 0;
  min-inline-size: 0;
}

.cic-gallery img,
.cic-detail-media img {
  inline-size: 100%;
  block-size: auto;
}

.cic-brand img {
  max-inline-size: 5rem;
  max-block-size: 4rem;
  object-fit: contain;
}

/* The header logo scales by height only, so its proportions can never be stretched or clipped. */
.cic-brand .cic-logo {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
}

.cic-brand .cic-logo img {
  block-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem);
  inline-size: auto;
  max-inline-size: min(14rem, 60vw);
  max-block-size: none;
  object-fit: contain;
}

/*
 * The supplied logo is dark ink on transparency, so a dark surface would swallow it. A light
 * plate keeps it legible without inverting a raster asset; a white-wordmark master replaces this.
 */
[data-theme='dark'] .cic-brand .cic-logo {
  background: var(--wp--custom--cic--brand--on-brand);
  border-radius: 0.375rem;
  padding: 0.25rem 0.5rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .cic-brand .cic-logo {
    background: var(--wp--custom--cic--brand--on-brand);
    border-radius: 0.375rem;
    padding: 0.25rem 0.5rem;
  }
}

.cic-home-footer address {
  font-style: normal;
}

.cic-home-footer > a,
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding: .5rem .75rem;
}

@media (min-width: 64rem) {
  .cic-catalog-layout {
    grid-template-columns: minmax(14rem, 1fr) minmax(0, 3fr);
  }

  .cic-detail-hero:has(.cic-detail-media img) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------------------
 * W9 art direction — business detail pages.
 * Presentation only: every value below reads a projection Core already exposes.
 * All colour comes from the mode tokens, so Light and Dark stay at parity.
 * ------------------------------------------------------------------------- */

/* A quieter, bracketed trail instead of a default row of links. */
.cic-main > .cic-breadcrumb {
  position: relative;
  padding-inline-start: 1rem;
  font-size: .8125rem;
  letter-spacing: .01em;
}

.cic-main > .cic-breadcrumb::before {
  content: "";
  position: absolute;
  inset-block: .2rem;
  inset-inline-start: 0;
  inline-size: var(--cic-rule);
  background: var(--cic-color-border);
}

.cic-breadcrumb li[aria-current="page"] {
  color: var(--cic-color-text-muted);
}

/* Hero: one composed band, opened by the CIC bracket. */
.cic-domain > .cic-detail-hero {
  position: relative;
  margin-block-start: 1.5rem;
  padding-block: 2.25rem 2.75rem;
  border-block-start: 1px solid var(--cic-color-border);
}

.cic-domain > .cic-detail-hero::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  inline-size: 3.5rem;
  block-size: var(--cic-rule);
  background: var(--cic-color-accent);
}

.cic-detail-intro > .cic-eyebrow {
  position: relative;
  margin-block: 0 .875rem;
  padding-inline-start: 1.25rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cic-color-text-muted);
}

.cic-detail-intro > .cic-eyebrow::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: .1em .1em;
  inline-size: var(--cic-rule);
  background: var(--cic-color-accent);
}

.cic-detail-intro h1 {
  margin-block: 0 1.125rem;
  max-inline-size: 18ch;
  letter-spacing: -.015em;
}

/* Controlled excerpt width: the lead never runs the full hero column. */
.cic-detail-intro .cic-lead {
  max-inline-size: 46ch;
  margin-block: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--cic-color-text-secondary);
}

.cic-detail-intro .cic-specifications {
  margin-block-start: 1.75rem;
}

/* Two ranks, one row: filled intent, outlined channel. */
.cic-detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-block-start: 1.875rem;
}

.cic-detail-actions .cic-action {
  margin-block: 0;
}

.cic-detail-actions .cic-secondary-action {
  background: transparent;
  color: var(--cic-color-action-primary);
  border: 1px solid var(--cic-color-border-strong);
  font-weight: 500;
}

.cic-detail-actions .cic-secondary-action:hover {
  border-color: var(--cic-color-action-primary);
}

/* Hero media: a real photograph fills the frame; product and partner marks stay contained. */
.cic-domain > .cic-detail-hero > .cic-detail-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.cic-domain > .cic-detail-hero > .cic-detail-media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.cic-type-cic_product > .cic-detail-hero > .cic-detail-media img,
.cic-type-cic_partner > .cic-detail-hero > .cic-detail-media img,
.cic-type-cic_solution > .cic-detail-hero > .cic-detail-media img,
.cic-type-cic_service > .cic-detail-hero > .cic-detail-media img {
  object-fit: contain;
  padding: 1.5rem;
}

/* Section headings carry the same bracket as the hero. */
.cic-detail-section > h2 {
  position: relative;
  margin-block-end: 1.5rem;
  padding-block-start: 1rem;
  font-size: 1.5rem;
  letter-spacing: -.01em;
}

.cic-detail-section > h2::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 2.5rem;
  block-size: var(--cic-rule);
  background: var(--cic-color-action-primary);
}

.cic-detail-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A structured set: hairline cells, not bullets. */
.cic-detail-set {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1px;
  background: var(--cic-color-border);
  border: 1px solid var(--cic-color-border);
}

.cic-detail-set > li {
  position: relative;
  padding: 1.5rem;
  background: var(--cic-color-background);
}

.cic-detail-set > li::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 1.25rem;
  block-size: var(--cic-rule);
  background: var(--cic-color-accent);
}

.cic-detail-set > li > h3 {
  margin-block: 0 .5rem;
  font-size: 1rem;
  line-height: 1.4;
}

.cic-detail-set > li > p {
  margin-block: 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--cic-color-text-secondary);
}

/* A restrained industrial process: 01 / 02 / 03 on a single spine. */
.cic-detail-process {
  counter-reset: cic-step;
  display: grid;
  gap: 0;
}

.cic-detail-process > li {
  counter-increment: cic-step;
  position: relative;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0 1.25rem;
  padding-block: 1.25rem;
  border-block-start: 1px solid var(--cic-color-border);
}

.cic-detail-process > li:last-child {
  border-block-end: 1px solid var(--cic-color-border);
}

.cic-detail-process > li::before {
  content: counter(cic-step, decimal-leading-zero);
  grid-row: 1 / span 2;
  font-size: 1.125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  color: var(--cic-color-accent);
}

/* The spine runs between the numbers, never past the last step. */
.cic-detail-process > li::after {
  content: "";
  position: absolute;
  inset-block: 2.75rem .25rem;
  inset-inline-start: 1.5rem;
  inline-size: 1px;
  background: var(--cic-color-border);
}

.cic-detail-process > li:last-child::after {
  content: none;
}

.cic-detail-process > li > h3 {
  margin-block: 0 .375rem;
  font-size: 1.0625rem;
  line-height: 1.35;
}

.cic-detail-process > li > p {
  margin-block: 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--cic-color-text-secondary);
}

.cic-detail-process > li > :where(h3, p) {
  grid-column: 2;
}

/* The reading column aligns with the hero instead of floating centred. */
.cic-domain > .cic-reading {
  margin-inline: 0;
  margin-block: 2.5rem 0;
}

/*
 * A closing mark rather than a second horizontal rule: the footer already draws one, and two
 * parallel lines read as a mistake. The bracket answers the one that opens the hero.
 */
.cic-domain::after {
  content: "";
  display: block;
  inline-size: 3.5rem;
  block-size: var(--cic-rule);
  margin-block-start: 3rem;
  background: var(--cic-color-accent);
}

@media (min-width: 64rem) {
  .cic-domain > .cic-detail-hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
  }
}

/*
 * Product families lead the catalogue. They are published content before any product exists, so
 * the card reads as complete with a name and a description alone; the link is an extra, never a gap.
 */
.cic-families {
  margin-block: var(--wp--custom--cic--home--gap);
}

.cic-family-card h3 {
  margin-block: 0;
  font-size: 1.125rem;
  overflow-wrap: anywhere;
}

.cic-family-card p {
  overflow-wrap: anywhere;
}

.cic-family-card > :last-child {
  margin-block-end: 0;
}

.cic-family-link a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  font-weight: 600;
}

/* An authored introduction keeps its paragraphs: spacing between them, none around the block. */
.cic-intro > p {
  margin-block: 0;
}

.cic-intro > p + p {
  margin-block-start: .75em;
}

/*
 * Products overview: client photos of the range, not product models. Each image keeps its own
 * pixel size at most, so a small source stays small and sharp instead of being enlarged.
 */
.cic-overview {
  margin-block: var(--wp--custom--cic--home--gap);
}

.cic-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--wp--preset--spacing--40, 1.5rem);
  align-items: center;
}

.cic-overview-item {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 1rem;
  border-radius: var(--cic-radius-card, 0.5rem);
  background: var(--cic-color-surface);
  border: 1px solid var(--cic-color-border);
  min-inline-size: 0;
}

.cic-overview-item img {
  display: block;
  inline-size: auto;
  max-inline-size: 100%;
  block-size: auto;
  object-fit: contain;
}

/* A section waiting for its first published content: calm, never an error. */
/* Draft preview: shown to the signed-in editor only, never on a published page. */
.cic-preview-marker {
  display: inline-flex;
  align-items: center;
  margin: 0 0 1rem;
  padding: 0.25rem 0.75rem;
  border: 1px dashed var(--cic-color-warning, currentColor);
  border-radius: 999px;
  color: var(--cic-color-text-primary);
  background: var(--cic-color-surface);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cic-empty-pending {
  padding: 2rem 1.5rem;
  border: 1px dashed var(--cic-color-border);
  border-radius: var(--cic-radius-card, 0.5rem);
  background: var(--cic-color-surface);
  color: var(--cic-color-text-muted, inherit);
  text-align: center;
}

.cic-empty-pending > p {
  margin: 0;
}

/*
 * Actualités: one card per column even for a single item, so a lone Actualité keeps the size of
 * a card instead of stretching across the page. The empty state names the section and offers
 * the commercial action.
 */
.cic-news-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

.cic-news-empty {
  display: grid;
  justify-items: center;
  gap: .75rem;
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

.cic-news-empty > .cic-news-empty-title {
  color: var(--cic-color-text-primary);
  font-size: 1.25rem;
  font-weight: 600;
}

.cic-news-empty > p:not(.cic-news-empty-title) {
  max-inline-size: 48ch;
}

.cic-news-empty > .cic-action {
  margin-block-start: .5rem;
}

.cic-card-date {
  color: var(--cic-color-text-muted);
}