/* =========================================================
PRODUCTS / MATERIAL CATALOGUE PAGE  (products.html only)
========================================================= */

/* Prevent the sticky header from covering anchor targets */
.products-head,
.catalogue,
.faq-cta {
scroll-margin-top: 82px;
}


/* =========================================================
PAGE INTRO
========================================================= */

.products-head {
width: 100%;

padding: 82px clamp(20px, 4vw, 60px) 70px;

background: var(--white);
border-bottom: 1px solid var(--blue-line);
}

.products-head .breadcrumb {
margin-bottom: 20px;
}

.products-head h1 {
max-width: 900px;

font-size: clamp(34px, 4vw, 48px);
line-height: 0.98;
letter-spacing: -0.035em;

color: var(--blue-deep);
}

.products-head-sub {
max-width: 900px;

margin-top: 25px;

color: var(--blue-ink);

font-family: var(--font-body);
font-size: 17px;
font-weight: 400;
line-height: 1.7;
}


/* =========================================================
CATALOGUE LAYOUT
========================================================= */

.catalogue {
width: 100%;

display: grid;
grid-template-columns: minmax(220px, 270px) minmax(0, 1fr);
align-items: start;

gap: clamp(38px, 5vw, 80px);

padding: 70px clamp(20px, 4vw, 60px) 110px;

background: var(--white);
}


/* =========================================================
FILTER SIDEBAR
========================================================= */

.filters {
position: sticky;
top: 112px;

padding-right: 30px;

border-right: 1px solid var(--blue-line);
}

.filter-search {
margin-bottom: 34px;
}

.filter-search input {
width: 100%;
height: 48px;

padding: 0 15px;

border: 1px solid var(--blue-line);
border-radius: 0;
outline: none;

background: var(--white);
color: var(--blue-ink);

font-family: var(--font-body);
font-size: 14px;

transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.filter-search input::placeholder {
color: rgba(6, 62, 82, 0.48);
}

.filter-search input:focus {
border-color: var(--blue-deep);
box-shadow: 0 0 0 3px rgba(95, 204, 246, 0.14);
}

.filter-group {
padding: 26px 0;

border-top: 1px solid var(--blue-line);
}

.filter-group h4 {
margin: 0 0 17px;

color: var(--blue-deep);

font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}

.filter-group label {
display: flex;
align-items: center;

gap: 11px;

margin-bottom: 13px;

color: var(--blue-ink);

font-family: var(--font-body);
font-size: 14px;
line-height: 1.4;

cursor: pointer;
}

.filter-group label:last-child {
margin-bottom: 0;
}

.filter-group label:hover {
color: var(--blue-deep);
}

.filter-group input[type="checkbox"] {
width: 16px;
height: 16px;

flex-shrink: 0;

margin: 0;

border: 1px solid var(--blue-line);

accent-color: var(--blue-deep);

cursor: pointer;
}

.filter-clear {
width: 100%;
min-height: 44px;

margin-top: 8px;
padding: 10px 16px;

border: 1px solid var(--blue-deep);

background: transparent;
color: var(--blue-deep);

font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;

cursor: pointer;

transition:
    background 0.2s ease,
    color 0.2s ease;
}

.filter-clear:hover {
background: var(--blue-deep);
color: var(--white);
}


/* =========================================================
CATALOGUE CONTENT
========================================================= */

.catalogue-main {
min-width: 0;
}

.catalogue-bar {
min-height: 48px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 20px;

margin-bottom: 25px;
padding-bottom: 18px;

border-bottom: 1px solid var(--blue-line);
}

#resultCount {
color: var(--blue-deep);

font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}

.catalogue-bar-hint {
color: rgba(6, 62, 82, 0.58);

font-family: var(--font-body);
font-size: 13px;
}


/* =========================================================
MATERIAL CARD GRID
========================================================= */

.product-catalog-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));

gap: 28px 20px;
}

.material-card {
min-width: 0;

display: block;

overflow: hidden;

border: 1px solid var(--blue-line);

background: var(--white);
color: var(--blue-ink);

text-decoration: none;

transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.material-card:hover {
transform: translateY(-5px);

border-color: rgba(12, 124, 168, 0.48);

box-shadow: 0 18px 38px rgba(6, 62, 82, 0.1);
}

.material-media {
width: 100%;
aspect-ratio: 4 / 3;

position: relative;
overflow: hidden;

background-color: var(--blue-pale);
}

/* Use this when you replace the gradients with images */
.material-media img {
display: block;

width: 100%;
height: 100%;

object-fit: cover;
object-position: center;

transition: transform 0.5s ease;
}

.material-card:hover .material-media img {
transform: scale(1.055);
}

.material-meta {
min-height: 104px;

display: flex;
flex-direction: column;
justify-content: flex-end;

padding: 19px 20px 21px;

background: var(--white);
}

.material-type {
display: block;

margin-bottom: 8px;

color: var(--blue-deep);

font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
}

.material-meta h3 {
margin: 0;

color: var(--blue-ink);

font-size: clamp(17px, 1.5vw, 21px);
line-height: 1.2;
letter-spacing: -0.015em;

transition: color 0.2s ease;
font-family: var(--font-mono);
}

.material-card:hover .material-meta h3 {
color: var(--blue-deep);
}


/* =========================================================
EMPTY STATE
========================================================= */

.no-results {
margin: 60px 0 0;
padding: 55px 30px;

border: 1px solid var(--blue-line);

background: var(--blue-pale);
color: var(--blue-deep);

text-align: center;

font-size: 15px;
line-height: 1.6;
}


/* =========================================================
CATALOGUE PAGINATION
(moved here from styles.css + the inline <style> tag in
products.html — remove that inline block once this is linked)
========================================================= */

.material-card[hidden] {
display: none !important;
}

.catalogue-pagination {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 6px;
margin-top: 55px;
}

.catalogue-pagination[hidden] {
display: none;
}

.pagination-button {
min-width: 42px;
height: 42px;

display: inline-flex;
align-items: center;
justify-content: center;

padding: 0 12px;

border: 1px solid var(--blue-line);

background: var(--white);
color: var(--blue-deep);

font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;

cursor: pointer;

transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.pagination-button:hover:not(:disabled),
.pagination-button.is-active {
border-color: var(--blue-deep);

background: var(--blue-deep);
color: var(--white);
}

.pagination-button.is-active {
cursor: default;
}

.pagination-button:disabled {
color: rgba(6, 62, 82, 0.28);

border-color: rgba(12, 124, 168, 0.12);

background: var(--white);

cursor: not-allowed;
}


/* =========================================================
BOTTOM CTA
========================================================= */

.catalogue + .faq-cta {
padding: 90px clamp(20px, 6vw, 60px);

border-top: 1px solid var(--blue-line);

background: var(--blue-pale);
}

.faq-cta .btn {
    display: block;
    width: fit-content;
    margin: 20px auto 0;
}

.catalogue + .faq-cta h2 {
max-width: 750px;

margin: 0 auto 16px;

color: var(--blue-deep);
text-align: center;
font-size: clamp(26px, 3vw, 34px);
line-height: 1.08;
}

.catalogue + .faq-cta p {
max-width: 630px;
text-align: center;
margin: 0 auto 30px;

color: var(--blue-ink);

font-size: 16px;
line-height: 1.65;
}

.catalogue + .faq-cta .btn-ghost {
border-color: var(--blue-deep);
color: var(--blue-deep);
}

.catalogue + .faq-cta .btn-ghost:hover {
background: var(--blue-deep);
color: var(--white);
}


/* =========================================================
TABLET
========================================================= */

@media (max-width: 1100px) {
.catalogue {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 38px;
}

.filters {
    padding-right: 22px;
}

.product-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
}


/* =========================================================
SMALL TABLET
========================================================= */

@media (max-width: 820px) {
.products-head {
    padding: 65px clamp(20px, 6vw, 60px) 55px;
}

.catalogue {
    display: block;

    padding: 48px clamp(20px, 6vw, 60px) 85px;
}

}


/* =========================================================
MOBILE
========================================================= */

@media (max-width: 560px) {
.products-head {
    padding: 48px 20px 42px;
}

.products-head h1 {
    font-size: clamp(26px, 3vw, 34px);
}

.products-head-sub {
    margin-top: 20px;

    font-size: 15px;
    line-height: 1.65;
}

.catalogue {
    padding: 35px 20px 70px;
}

.catalogue-bar {
    align-items: flex-start;
    flex-direction: column;

    gap: 7px;
}

.product-catalog-grid {
    grid-template-columns: 1fr;
    gap: 20px;
}

.material-meta {
    min-height: 92px;
    padding: 17px 18px 19px;
}

.material-meta h3 {
    font-size: 19px;
}

.catalogue-pagination {
    gap: 4px;
    margin-top: 38px;
}

.pagination-button {
    min-width: 36px;
    height: 38px;
    padding: 0 9px;
}

.catalogue + .faq-cta {
    padding: 70px 20px;
}
}
/* Card with no photo yet — shown when the material image file is missing */
.material-media.is-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;

background: #f3f8fb;
}

.material-media.is-empty::before {
content: "";

width: 32px;
height: 32px;

opacity: 0.4;

background-color: var(--blue-deep);

-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2Z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2Z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.material-media.is-empty::after {
content: "";

color: var(--blue-deep);
opacity: 0.6;

font-family: "Open Sans", Arial, sans-serif;
font-size: 12px;
letter-spacing: 0.04em;
}

/* Material code under the name (client amendment 04/11/2026) */
.material-code {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: #6b6b6b;
    font-family: var(--font-mono);
}


/* =========================================================
INTRO LINE: keep the first sentence on one line on wide
screens; on phones let it wrap naturally.
========================================================= */

@media (max-width: 820px) {
.products-head-sub br {
    display: none;
}
}


/* =========================================================
CATALOGUE FILTERS ON MOBILE: search + "Filters" button share
one row. The bottom sheet itself is styled in filter-sheet.css
(shared with portfolio and events).
========================================================= */

/* Desktop: section headings are plain labels, not buttons. */
.filter-group-toggle {
    display: block;
    width: 100%;
    padding: 0;

    border: 0;
    background: none;
    color: inherit;

    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    text-transform: inherit;

    pointer-events: none;
}

@media (max-width: 820px) {
.filters {
    position: static;

    margin-bottom: 26px;
    padding: 0;

    border: 0;
}

.filter-search {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.filter-search input {
    height: 44px;
    padding: 0 0 0 30px;

    border: 0;
    border-bottom: 1px solid var(--blue-line);

    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23063E52' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") left center / 17px no-repeat;

    /* 16px stops iOS zooming into the field */
    font-size: 16px;
}

.filter-search input:focus {
    border-bottom-color: var(--blue-ink);
    box-shadow: none;
}
}