/* ==========================================================================
   Projects overview + single project — STC Food Solutions
   Brand: navy #00394D / teal accent #00B7BE / grey ground #F1F2F4
   ========================================================================== */

.stc-projects {
    padding: var(--huge) 0;
    background: #ffffff;
}

.stc-projects:has(.stc-projects__hero-media) {
    padding-top: var(--large);
}

.stc-projects__intro {
    max-width: 760px;
    margin: 0 0 var(--extralarge) 0;
}

.stc-projects__intro h2 {
    color: #00394D;
    margin-bottom: var(--extrasmall);
}

.stc-projects__intro p {
    color: #4B5A61;
    font-size: 1.05rem;
    line-height: 1.7;
}

/* ---------- Type filter buttons ---------- */

.stc-projects__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--small);
    margin-bottom: var(--large);
}

.stc-projects__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.stc-projects__view-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1.5px solid rgba(132, 156, 166, 0.4);
    border-radius: 999px;
    flex-shrink: 0;
}

.stc-projects__view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 999px;
    color: #849CA6;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.stc-projects__view-btn svg {
    width: 18px;
    height: 18px;
    display: block;
}

.stc-projects__view-btn:hover {
    color: #00394D;
}

.stc-projects__view-btn.is-active {
    background: #00394D;
    color: #ffffff;
}

.stc-projects__filter {
    display: inline-flex;
    align-items: center;
    padding: 10px 22px;
    background: transparent;
    border: 1.5px solid rgba(132, 156, 166, 0.4);
    color: #00394D;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.stc-projects__filter:hover {
    border-color: #00394D;
}

.stc-projects__filter.is-active {
    background: #00394D;
    border-color: #00394D;
    color: #ffffff;
}

.stc-projects__results[aria-busy="true"] {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* ---------- Top-of-page hero media (video loop or photo) ---------- */

.stc-projects__hero-media {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    aspect-ratio: 21 / 7;
    min-height: 320px;
    margin-bottom: var(--medium);
    background: #00394D;
}

.stc-projects__hero-media video,
.stc-projects__hero-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* ---------- Featured (latest) project — big photo banner ---------- */

.stc-projects__featured {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    aspect-ratio: 21 / 9;
    min-height: 380px;
    margin-bottom: var(--extralarge);
    background: #00394D;
}

.stc-projects__eyebrow {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #00B7BE;
    margin: 0 0 14px 0;
}

.stc-projects__featured-media {
    position: absolute;
    inset: 0;
}

.stc-projects__featured-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.stc-projects__featured:hover .stc-projects__featured-media img {
    transform: scale(1.04);
}

.stc-projects__featured-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 30, 40, 0.92) 0%, rgba(0, 30, 40, 0.35) 45%, rgba(0, 30, 40, 0.05) 70%);
}

.stc-projects__featured-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: var(--large);
}

.stc-projects__featured-body {
    max-width: 640px;
}

.stc-projects__featured-meta {
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
}

.stc-projects__featured-meta span {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
}

.stc-projects__featured-title {
    font-size: clamp(1.75rem, 3.4vw, 2.75rem);
    line-height: 1.05;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 14px 0;
}

.stc-projects__featured-text {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    line-height: 1.65;
    margin: 0 0 20px 0;
}

.stc-projects__featured-location {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
    margin-bottom: 24px;
}

.stc-projects__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 30px;
    background: #00394D;
    color: #ffffff;
    text-decoration: none;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.95rem;
    width: fit-content;
    transition: background 0.25s ease, gap 0.25s ease;
}

.stc-projects__link:hover {
    background: #00B7BE;
    gap: 14px;
    color: #ffffff;
}

.stc-projects__link .arrow {
    transition: transform 0.25s ease;
}

.stc-projects__link:hover .arrow {
    transform: translateX(2px);
}

/* ---------- Placeholder (no featured image yet) ---------- */

.stc-projects__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #00394D 0%, #00566E 100%);
}

.stc-projects__placeholder svg {
    width: 30%;
    height: 30%;
    opacity: 0.35;
}

/* ---------- Grid ---------- */

.stc-projects__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--small);
}

.stc-projects__tile {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 15px;
    aspect-ratio: 4 / 3;
    background: #F1F2F4;
    grid-column: span 3;
    text-decoration: none;
}

.stc-projects__grid .stc-projects__tile:nth-child(6n + 1),
.stc-projects__grid .stc-projects__tile:nth-child(6n + 4) {
    grid-column: span 4;
}

.stc-projects__grid .stc-projects__tile:nth-child(6n + 2),
.stc-projects__grid .stc-projects__tile:nth-child(6n + 3),
.stc-projects__grid .stc-projects__tile:nth-child(6n + 5),
.stc-projects__grid .stc-projects__tile:nth-child(6n + 6) {
    grid-column: span 2;
}

.stc-projects__tile-media {
    position: absolute;
    inset: 0;
}

.stc-projects__tile-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.stc-projects__tile:hover .stc-projects__tile-media img {
    transform: scale(1.08);
}

.stc-projects__tile-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 22px;
    background: linear-gradient(180deg, transparent 45%, rgba(0, 57, 77, 0.88) 100%);
    opacity: 0.92;
    transition: opacity 0.3s ease;
}

.stc-projects__tile:hover .stc-projects__tile-overlay {
    opacity: 1;
}

.stc-projects__tile-content {
    color: #ffffff;
    transform: translateY(6px);
    transition: transform 0.3s ease;
}

.stc-projects__tile:hover .stc-projects__tile-content {
    transform: translateY(0);
}

.stc-projects__tile-meta {
    font-size: 0.8rem;
    font-weight: 700;
    color: #00B7BE;
    margin-bottom: 4px;
}

.stc-projects__tile-title {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 6px 0;
}

.stc-projects__tile-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
}

.stc-projects__tile-view {
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    white-space: nowrap;
}

.stc-projects__tile:hover .stc-projects__tile-view {
    opacity: 1;
    transform: translateX(0);
}

/* ---------- Brand logo badge (shown on grid + list tiles) ---------- */

.stc-projects__tile-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 8px;
    padding: 6px 10px;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}

.stc-projects__tile-brand img {
    max-height: 20px;
    max-width: 84px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* ---------- List view (title-only rows, no photos) ---------- */

.stc-projects__results.is-list-view .stc-projects__grid {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: #E3E7E9;
    border-radius: 15px;
    overflow: hidden;
}

.stc-projects__results.is-list-view .stc-projects__tile {
    aspect-ratio: auto;
    grid-column: unset !important;
    border-radius: 0;
    background: #ffffff;
    transition: background 0.2s ease;
}

.stc-projects__results.is-list-view .stc-projects__tile:hover {
    background: #F1F2F4;
}

.stc-projects__results.is-list-view .stc-projects__tile-media {
    display: none;
}

.stc-projects__results.is-list-view .stc-projects__tile-overlay {
    position: relative;
    inset: auto;
    display: flex;
    align-items: center;
    padding: 16px 24px;
    background: none;
    opacity: 1;
}

.stc-projects__results.is-list-view .stc-projects__tile-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--small);
    width: 100%;
    transform: none;
    color: #00394D;
}

.stc-projects__results.is-list-view .stc-projects__tile-brand {
    margin-bottom: 0;
    flex-shrink: 0;
}

.stc-projects__results.is-list-view .stc-projects__tile-meta,
.stc-projects__results.is-list-view .stc-projects__tile-footer > span:first-child {
    display: none;
}

.stc-projects__results.is-list-view .stc-projects__tile-title {
    margin: 0;
    color: #00394D;
    font-size: 1.05rem;
    flex: 1 1 auto;
}

.stc-projects__results.is-list-view .stc-projects__tile-footer {
    color: #00394D;
    flex-shrink: 0;
    width: auto;
}

@media (max-width: 600px) {
    .stc-projects__results.is-list-view .stc-projects__tile-overlay {
        padding: 14px var(--tiny);
    }

    .stc-projects__results.is-list-view .stc-projects__tile-brand img {
        max-height: 16px;
        max-width: 60px;
    }
}
/* ---------- Load more ---------- */

.stc-projects__more {
    display: flex;
    justify-content: center;
    margin-top: var(--extralarge);
}

.stc-projects__more-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 34px;
    background: transparent;
    border: 1.5px solid #00394D;
    color: #00394D;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
    font-family: inherit;
}

.stc-projects__more-btn:hover {
    background: #00394D;
    color: #ffffff;
}

.stc-projects__more-btn[disabled] {
    opacity: 0.5;
    cursor: default;
}

/* ---------- Empty state ---------- */

.stc-projects__empty {
    padding: var(--large) 0;
    color: #849CA6;
}

/* ---------- Single project: prev/next navigation ---------- */

.stc-project-nav {
    display: flex;
    border-top: 1px solid #E3E7E9;
    border-bottom: 1px solid #E3E7E9;
    margin: 0;
}

.stc-project-nav__link {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--small) var(--extrasmall);
    text-decoration: none;
    color: #00394D;
    transition: background 0.2s ease;
}

.stc-project-nav__link:hover {
    background: #F1F2F4;
}

.stc-project-nav__link--next {
    text-align: right;
    align-items: flex-end;
    border-left: 1px solid #E3E7E9;
}

.stc-project-nav__label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #849CA6;
}

.stc-project-nav__title {
    font-size: 1rem;
    font-weight: 700;
}

/* ---------- Single project: related projects ---------- */

.stc-project-related {
    padding: var(--huge) 0;
}

.stc-project-related__title {
    color: #00394D;
    margin-bottom: var(--small);
}

.stc-project-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--small);
}

.stc-project-related__grid .stc-projects__tile {
    grid-column: span 1 !important;
    aspect-ratio: 4 / 3;
}

/* ---------- Responsive ---------- */

@media (max-width: 991px) {
    .stc-projects__featured {
        aspect-ratio: 4 / 3;
        min-height: 320px;
    }

    .stc-projects__hero-media {
        aspect-ratio: 16 / 9;
        min-height: 240px;
    }

    .stc-projects__featured-overlay {
        padding: var(--small);
    }

    .stc-projects__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stc-projects__grid .stc-projects__tile,
    .stc-projects__grid .stc-projects__tile:nth-child(6n + 1),
    .stc-projects__grid .stc-projects__tile:nth-child(6n + 4) {
        grid-column: span 1;
    }

    .stc-project-related__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .stc-projects {
        padding: var(--extralarge) 0;
    }

    .stc-projects__featured {
        aspect-ratio: 3 / 4;
        min-height: 360px;
    }

    .stc-projects__hero-media {
        aspect-ratio: 4 / 5;
        min-height: 260px;
    }

    .stc-projects__grid {
        grid-template-columns: 1fr;
    }

    .stc-project-related__grid {
        grid-template-columns: 1fr;
    }

    .stc-project-nav__link {
        padding: var(--small) var(--tiny);
    }

    .stc-project-nav__title {
        font-size: 0.9rem;
    }
}


/* Two or three brands on one project (a line built from several manufacturers). */
.stc-projects__tile-brand--multi {
    gap: 10px;
}

.stc-projects__tile-brand--multi img + img {
    border-left: 1px solid #E3E7E9;
    padding-left: 10px;
}

.stc-projects__tile-brand--multi img {
    max-width: 68px;
}

.stc-projects__results.is-list-view .stc-projects__tile-brand--multi img {
    max-width: 50px;
}


/* ----- Filterknoppen op mobiel ----- */
/* Alle drie op één regel: kleiner lettertype en minder ruimte binnen de pil.
   Past het op een heel smal scherm toch niet, dan schuift de rij zijwaarts
   in plaats van dat er een knop onder springt. */
@media (max-width: 600px) {
    .stc-projects__filters {
        flex-wrap: nowrap;
        gap: 6px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .stc-projects__filters::-webkit-scrollbar {
        display: none;
    }

    .stc-projects__filter {
        flex: 0 0 auto;
        padding: 9px 12px;
        font-size: 0.75rem;
        letter-spacing: -0.01em;
        white-space: nowrap;
    }
}


/* ----- Lijstweergave op mobiel ----- */
/* Naast elkaar past niet: de titel hield maar 187 px over en brak in zeven
   korte regels. Op een telefoon daarom onder elkaar: eerst de titel over de
   volle breedte, daaronder het merklogo links en de link rechts. Alles begint
   op dezelfde lijn, dus de rijen lopen recht onder elkaar. */
@media (max-width: 600px) {
    .stc-projects__results.is-list-view .stc-projects__tile-overlay {
        padding: 16px var(--tiny);
    }

    .stc-projects__results.is-list-view .stc-projects__tile-content {
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 10px 12px;
    }

    .stc-projects__results.is-list-view .stc-projects__tile-title {
        order: 1;
        flex: 1 1 100%;
        font-size: 0.95rem;
        line-height: 1.3;
    }

    .stc-projects__results.is-list-view .stc-projects__tile-brand {
        order: 2;
    }

    .stc-projects__results.is-list-view .stc-projects__tile-footer {
        order: 3;
        margin-left: auto;
        font-size: 0.8rem;
        white-space: nowrap;
    }

    /* Op een telefoon bestaat hover niet, dus de link moet gewoon zichtbaar
       zijn in plaats van pas bij aanwijzen. */
    .stc-projects__results.is-list-view .stc-projects__tile-view {
        opacity: 1;
    }
}


/* ---------- Lijstweergave: alles onder elkaar uitlijnen ----------

   Niet elk project heeft een merklogo (Kronen, Watercut en Eillert hebben er
   nog geen). In een flexrij begint de titel dan bij de een achter een logo en
   bij de ander tegen de linkerrand, en dat leest als een verspringende lijst.

   Daarom in lijstweergave drie vaste kolommen: logo, titel, rechterkant. Elk
   onderdeel krijgt zijn kolom expliciet toegewezen, zodat een rij zonder logo
   kolom een gewoon leeg laat en de titel toch op dezelfde lijn begint.
   ------------------------------------------------------------------------- */

.stc-projects__results.is-list-view .stc-projects__tile-content {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr) auto;
	align-items: center;
	column-gap: var(--small);
}

.stc-projects__results.is-list-view .stc-projects__tile-brand {
	grid-column: 1;
	width: 100%;
	box-sizing: border-box;
}

.stc-projects__results.is-list-view .stc-projects__tile-title {
	grid-column: 2;
}

.stc-projects__results.is-list-view .stc-projects__tile-footer {
	grid-column: 3;
	justify-self: end;
}

/* Twee of drie logo's naast elkaar moeten binnen diezelfde kolom passen. */
.stc-projects__results.is-list-view .stc-projects__tile-brand img {
	max-width: 110px;
}

.stc-projects__results.is-list-view .stc-projects__tile-brand--multi img {
	max-width: 46%;
}

@media (max-width: 600px) {

	/* Op mobiel geen drie kolommen: de titel krijgt een eigen regel en daaronder
	   staan het merklogo links en de projectlink rechts. */
	.stc-projects__results.is-list-view .stc-projects__tile-content {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		column-gap: 12px;
		row-gap: 10px;
	}

	.stc-projects__results.is-list-view .stc-projects__tile-title {
		grid-column: auto;
		order: 1;
		flex: 1 1 100%;
	}

	.stc-projects__results.is-list-view .stc-projects__tile-brand {
		grid-column: auto;
		order: 2;
		width: auto;
		min-height: 34px;
		padding: 5px 10px;
		margin-bottom: 0;
	}

	.stc-projects__results.is-list-view .stc-projects__tile-footer {
		grid-column: auto;
		justify-self: auto;
		order: 3;
		margin-left: auto;
	}

	.stc-projects__results.is-list-view .stc-projects__tile-brand img {
		max-height: 20px;
		max-width: 100px;
	}

	/* Twee logo's naast elkaar blijven zo leesbaar in plaats van weggedrukt. */
	.stc-projects__results.is-list-view .stc-projects__tile-brand--multi img {
		max-width: 64px;
	}
}