/* ==========================================================================
   PRODUCT/CATEGORY OVERVIEW PAGE - "pagina_overzicht" view
   Used on: /containerbouw, /containerbouw-maatwerk, /containerverhuur,
   /carrosseriebouw, and similar category landing pages
   ========================================================================== */

/* ==========================================================================
   BREADCRUMB WRAPPER (.highlighted region)
   ========================================================================== */

.highlighted {
  background: var(--bg, #f2f1ec);
}

.highlighted .container-fluid {
  max-width: var(--wrap, min(1760px, 94vw));
  margin-inline: auto;
  padding-inline: clamp(1rem, 2.2vw, 2.5rem);
}

.highlighted nav[aria-label="breadcrumb"] {
  padding-block: 0.9rem;
}

.highlighted .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
}

.highlighted .breadcrumb-item {
  display: flex;
  align-items: center;
  color: var(--ink-soft, #57626f);
}

.highlighted .breadcrumb-item + .breadcrumb-item::before {
  content: '/';
  margin-right: 0.4rem;
  color: var(--line-strong, #d2cec2);
}

.highlighted .breadcrumb-item a {
  color: var(--rust-600, #c1592b);
  font-weight: 600;
  text-decoration: none;
}

.highlighted .breadcrumb-item a:hover {
  color: var(--rust-700, #9c4420);
}

.highlighted .breadcrumb-item.active {
  color: var(--ink-soft, #57626f);
}

/* ==========================================================================
   MAIN WRAPPER
   ========================================================================== */

#main-wrapper {
  background: var(--bg, #f2f1ec);
}

#main.container-fluid {
  max-width: var(--wrap, min(1760px, 94vw));
  margin-inline: auto;
  padding-inline: clamp(1rem, 2.2vw, 2.5rem);
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
}

/* ==========================================================================
   PAGE HEADER / INTRO TEXT
   ========================================================================== */

.view-pagina-overzicht .view-header {
  column-count: 2;
  column-gap: 3rem;
  column-rule: 1px solid var(--line, #e3e0d8);
  margin-bottom: clamp(2rem, 4vw, 3rem); /* ADD THIS LINE */
}


.view-pagina-overzicht .view-header h1,
.view-pagina-overzicht .view-header h2 {
  column-span: all; /* keeps headings full-width, not split */
  margin-bottom: 0.35rem;
}

.view-pagina-overzicht .view-header h2 {
  margin-bottom: 1.25rem;
}


.view-pagina-overzicht .view-header h1 {
  font-family: var(--font-display, 'Archivo', Arial, sans-serif);
  font-size: clamp(1.5rem, 2vw + 1rem, 2.1rem);
  font-weight: 700;
  color: var(--ink, #1b2531);
  margin: 0 0 0.35rem;
  line-height: 1.2;
}

.view-pagina-overzicht .view-header h2 {
  font-family: var(--font-display, 'Archivo', Arial, sans-serif);
  font-size: clamp(1.05rem, 1vw + 0.9rem, 1.3rem);
  font-weight: 600;
  color: var(--ink-soft, #57626f);
  margin: 0 0 1.25rem;
  line-height: 1.3;
}

/* Intro body text - plain text nodes separated by <br>, style via line-height */
.view-pagina-overzicht .view-header {
  font-size: 0.98rem;
  line-height: 1.85;
  color: var(--ink-soft, #57626f);
}

.view-pagina-overzicht .view-header strong {
  color: var(--ink, #1b2531);
  font-weight: 600;
}

.view-pagina-overzicht .view-header a {
  color: var(--rust-600, #c1592b);
  font-weight: 600;
}

.view-pagina-overzicht .view-header a:hover {
  color: var(--rust-700, #9c4420);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 600px) {
  .view-pagina-overzicht .view-header h1 {
    font-size: 1.35rem;
  }
  
  .view-pagina-overzicht .view-header h2 {
    font-size: 1rem;
  }
  
  .view-pagina-overzicht .view-header {
    font-size: 0.9rem;
    line-height: 1.7;
  }
}

@media (max-width: 900px) {
  .view-pagina-overzicht .view-header {
    column-count: 1;
    column-gap: 0;
    column-rule: none;
  }
}

@media (max-width: 600px) {
  .view-pagina-overzicht .view-header h1 {
    font-size: 1.35rem;
  }
  
  .view-pagina-overzicht .view-header h2 {
    font-size: 1rem;
  }
  
  .view-pagina-overzicht .view-header {
    font-size: 0.9rem;
    line-height: 1.7;
  }
}


/* ==========================================================================
   PRODUCT/CATEGORY GRID - Cards (same view as homepage Maatwerk grid)
   Handles both structures:
   - a > .matrix-col-inner (homepage)
   - a > .matrix-col > .matrix-col-inner (category pages)
   ========================================================================== */

.view-pagina-overzicht .view-content {
  margin-top: 0;
}

/* Grid container - override Bootstrap Barrio's grid wrapper */
.view-pagina-overzicht .views-view-grid {
  display: contents;
}

.view-pagina-overzicht .views-view-grid .row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 0;
}

/* Reset Bootstrap column classes */
.view-pagina-overzicht .views-view-grid .row > div[class*="col-"] {
  width: 100%;
  max-width: 100%;
  padding: 0;
}

/* Link wrapper - fills the grid cell */
.view-pagina-overzicht .views-view-grid a {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* Optional extra wrapper (.matrix-col) - just pass through */
.view-pagina-overzicht .matrix-col {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

/* ==========================================================================
   CARD - the actual visual box
   ========================================================================== */

.view-pagina-overzicht .matrix-col-inner {
  background: var(--surface, #ffffff);
  border: 1px solid var(--line, #e3e0d8);
  border-radius: var(--r-md, 8px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.view-pagina-overzicht a:hover .matrix-col-inner {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg, 0 22px 48px -14px rgba(22,32,43,.32));
}

/* Card image */
.view-pagina-overzicht .matrix-col-inner > img {
  aspect-ratio: 4/3;
  width: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.view-pagina-overzicht a:hover .matrix-col-inner > img {
  transform: scale(1.06);
}

/* ==========================================================================
   CARD TEXT CONTENT
   ========================================================================== */

.view-pagina-overzicht .no-link-text {
  padding: 0.85rem 0.9rem 0;
  flex: 1;
  font-size: 0.83rem;
  color: var(--ink-soft, #57626f);
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin-bottom: 0.7rem;
}

.view-pagina-overzicht .no-link-text h2,
.view-pagina-overzicht .no-link-text .h2small {
  font-family: var(--font-display, 'Archivo', Arial, sans-serif);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ink, #1b2531);
  margin: 0 0 0.35rem;
  line-height: 1.3;
  -webkit-line-clamp: initial;
  display: block;
}

/* "Lees verder" link */
.view-pagina-overzicht .text-col {
  margin: auto 0.9rem 0.9rem;
  padding-top: 0.5rem;
  font-family: var(--font-display, 'Archivo', Arial, sans-serif);
  font-weight: 700;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--rust-600, #c1592b);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.view-pagina-overzicht .text-col::after {
  content: '→';
  transition: transform 0.2s ease;
}

.view-pagina-overzicht a:hover .text-col::after {
  transform: translateX(4px);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1080px) {
  .view-pagina-overzicht .views-view-grid .row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .view-pagina-overzicht .views-view-grid .row {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   PRODUCT PAGE GROUP - "text-product" + "pictures-productgroup"
   Used on: container-nieuwbouw and similar product node types
   Twig: productpagegroup.html.twig
   ========================================================================== */

.outer-block:has(.text-product) {
  max-width: var(--wrap, min(1760px, 94vw));
  margin-inline: auto;
  padding-inline: clamp(1rem, 2.2vw, 2.5rem);
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
}

.outer-block:has(.pictures-productgroup) .inner-block.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}


/* Reset Bootstrap col-md-6 since we use grid now */
.outer-block:has(.text-product) .text-product.col-md-6,
.outer-block:has(.text-product) .pictures-productgroup.col-md-6 {
  width: 100%;
  max-width: 100%;
  padding: 0;
  flex: none;
}


/* Reset Bootstrap col-md-6 since we use grid now */
.outer-block .text-product.col-md-6,
.outer-block .pictures-productgroup.col-md-6 {
  width: 100%;
  max-width: 100%;
  padding: 0;
  flex: none;
}

/* ==========================================================================
   LEFT: TEXT CONTENT - long-form article typography
   ========================================================================== */

.text-product h1 {
  font-family: var(--font-display, 'Archivo', Arial, sans-serif);
  font-size: clamp(1.6rem, 2vw + 1rem, 2.1rem);
  font-weight: 700;
  color: var(--ink, #1b2531);
  margin: 0 0 1.25rem;
  line-height: 1.2;
}

.text-product h2 {
  font-family: var(--font-display, 'Archivo', Arial, sans-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink, #1b2531);
  margin: 1.75rem 0 0.6rem;
}

.text-product h3 {
  font-family: var(--font-display, 'Archivo', Arial, sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink, #1b2531);
  margin: 1.25rem 0 0.5rem;
}

.text-product p {
  font-size: 0.96rem;
  line-height: 1.75;
  color: var(--ink-soft, #57626f);
  margin: 0 0 0.9rem;
}

.text-product ul {
  margin: 0 0 1.25rem;
  padding-left: 1.3rem;
  list-style: none;
}

.text-product ul li {
  position: relative;
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--ink-soft, #57626f);
  padding-left: 0.4rem;
  margin-bottom: 0.4rem;
}

.text-product ul li::before {
  content: '';
  position: absolute;
  left: -1.1rem;
  top: 0.65rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rust-500, #d97341);
}

.text-product a {
  color: var(--rust-600, #c1592b);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.text-product a:hover {
  color: var(--rust-700, #9c4420);
}

/* Inline highlighted phone-call-out text */
.text-product .txt-red {
  color: var(--rust-600, #c1592b);
}

/* ==========================================================================
   RIGHT: IMAGE - sticky so it stays visible while reading long text
   ========================================================================== */

.pictures-productgroup {
  position: sticky;
  top: calc(var(--product-sticky-offset, 90px));
  align-self: start;
}

.pictures-productgroup .splide {
  border-radius: var(--r-lg, 14px);
  overflow: hidden;
  box-shadow: var(--shadow-md, 0 10px 26px -10px rgba(22,32,43,.28));
}

.pictures-productgroup .slide__content {
  position: relative;
  display: block;
}

.pictures-productgroup .media {
  display: block;
}

.pictures-productgroup .media__element {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Zoom/lightbox icon on hover */
.pictures-productgroup .media__icon--litebox {
  position: absolute;
  bottom: 0.9rem;
  right: 0.9rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(22, 32, 43, 0.65);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.pictures-productgroup .slide__content:hover .media__icon--litebox {
  opacity: 1;
}

/* Splide arrows (only relevant if multiple images) */
.pictures-productgroup .splide__arrow {
  background: var(--surface, #ffffff);
  border: 1px solid var(--line, #e3e0d8);
  opacity: 0.9;
}

.pictures-productgroup .splide__arrow:hover {
  background: var(--rust-100, #f7e6da);
}

/* ==========================================================================
   RESPONSIVE - stack, no sticky below breakpoint
   ========================================================================== */

@media (max-width: 900px) {
  .outer-block:has(.text-product) .inner-block.row {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .pictures-productgroup {
    position: static;
    order: -1; /* Image above text on mobile, feels more natural */
  }

  .text-product h1 {
    font-size: 1.4rem;
  }
}

/* ==========================================================================
   ZOEKWOORDPAGINA - SEO keyword landing page (Layout Builder onecol)
   Twig structure: layout--onecol > node-title + body + views-view-unformatted grid
   ========================================================================== */

.layout--onecol {
  max-width: var(--wrap, min(1760px, 94vw));
  margin-inline: auto;
  padding-inline: clamp(1rem, 2.2vw, 2.5rem);
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
}

/* ==========================================================================
   PAGE HEADER: Title + intro text
   ========================================================================== */

.layout--onecol .field-name-node-title h1 {
  font-family: var(--font-display, 'Archivo', Arial, sans-serif);
  font-size: clamp(1.5rem, 2vw + 1rem, 2.1rem);
  font-weight: 700;
  color: var(--ink, #1b2531);
  margin: 0 0 0.75rem;
  line-height: 1.2;
}

.layout--onecol .field--name-body {
  max-width: 90ch;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.layout--onecol .field--name-body p {
  font-size: 0.96rem;
  line-height: 1.75;
  color: var(--ink-soft, #57626f);
  margin: 0 0 0.9rem;
}

.layout--onecol .field--name-body a {
  color: var(--rust-600, #c1592b);
  font-weight: 600;
}

.layout--onecol .field--name-body a:hover {
  color: var(--rust-700, #9c4420);
}

/* ==========================================================================
   CARD GRID - reuses matrix-col-inner styling from productpage/maatwerk
   ========================================================================== */

.view-zoekwoordpaginaview .view-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

/* Reset Bootstrap column classes - cards sit directly in the grid */
.view-zoekwoordpaginaview .view-content > div[class*="col-"] {
  width: 100%;
  max-width: 100%;
  padding: 0;
}

.view-zoekwoordpaginaview a {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.view-zoekwoordpaginaview .matrix-col {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.view-zoekwoordpaginaview .matrix-col-inner {
  background: var(--surface, #ffffff);
  border: 1px solid var(--line, #e3e0d8);
  border-radius: var(--r-md, 8px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.view-zoekwoordpaginaview a:hover .matrix-col-inner {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg, 0 22px 48px -14px rgba(22,32,43,.32));
}

.view-zoekwoordpaginaview .matrix-col-inner > img {
  aspect-ratio: 4/3;
  width: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.view-zoekwoordpaginaview a:hover .matrix-col-inner > img {
  transform: scale(1.06);
}

.view-zoekwoordpaginaview .no-link-text {
  padding: 0.85rem 0.9rem 0;
  flex: 1;
  font-size: 0.83rem;
  color: var(--ink-soft, #57626f);
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin-bottom: 0.7rem;
}

.view-zoekwoordpaginaview .no-link-text h2,
.view-zoekwoordpaginaview .no-link-text .h2small {
  font-family: var(--font-display, 'Archivo', Arial, sans-serif);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ink, #1b2531);
  margin: 0 0 0.35rem;
  line-height: 1.3;
  -webkit-line-clamp: initial;
  display: block;
}

.view-zoekwoordpaginaview .text-col {
  margin: auto 0.9rem 0.9rem;
  padding-top: 0.5rem;
  font-family: var(--font-display, 'Archivo', Arial, sans-serif);
  font-weight: 700;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--rust-600, #c1592b);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.view-zoekwoordpaginaview .text-col::after {
  content: '→';
  transition: transform 0.2s ease;
}

.view-zoekwoordpaginaview a:hover .text-col::after {
  transform: translateX(4px);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1080px) {
  .view-zoekwoordpaginaview .view-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .layout--onecol .field--name-body {
    max-width: none;
  }
}

@media (max-width: 600px) {
  .view-zoekwoordpaginaview .view-content {
    grid-template-columns: 1fr;
  }

  .layout--onecol .field-name-node-title h1 {
    font-size: 1.35rem;
  }
}