/* =============================================================
   landing.css - Styles for category landing pages
   Complements global utility classes from core.css, Site.css,
   responsive.css and button.css
   ============================================================= */

/* ---------------------------------------------------------------
   1. HERO MASTHEAD
   --------------------------------------------------------------- */
.lp-hero { position: relative; min-height: 500px; display: flex; align-items: center; background-size: cover; background-position: center; }

/* Dark overlay */
.lp-hero::before { content: ''; position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.62); }

.lp-hero .container { position: relative; z-index: 1; padding-top: 70px; padding-bottom: 70px; }

.lp-hero__title { font-size: clamp(2.4rem, 5.4vw, 5.2rem); font-weight: 700; text-transform: uppercase; color: #ffffff; margin: 0 0 22px; line-height: 1.05; letter-spacing: 0.02em; }

.lp-hero__body { color: #ffffff; font-size: 1.25rem; font-weight: 400; line-height: 1.65; max-width: 1092px; }

.lp-hero__browse { color: #ffffff; font-size: 1.15rem; font-weight: 500; margin: 0 auto; max-width: 760px; display: block; }

.lp-hero__browse a { color: #ffffff; text-decoration: underline; }

.lp-hero__browse a:hover { opacity: 0.8; }

/* ---------------------------------------------------------------
   2. PRODUCTS SECTION
   --------------------------------------------------------------- */
.lp-products { background-color: #ecece6; padding: 50px 0 65px; }

.lp-section-title { font-size: 2.1875rem; font-weight: 700; color: #232323; margin: 0 0 14px; padding: 0; line-height: 1.2; }

.lp-section-divider { border: none; border-top: 1px solid #232323; margin: 0 0 26px; }

/* Filter button — extends existing .filter-togg from Site.css */
.lp-filter-btn { margin-bottom: 30px; gap: 10px; border: none; cursor: pointer; font-size: 1rem; font-family: inherit; }

.lp-filter-btn:hover { background-color: #232323; }

.lp-filter-icon { width: 14px; height: auto; display: inline-block; vertical-align: middle; /* Converts any SVG colour to white */ filter: brightness(0) invert(1); }

/* Product card grid - row wrapping gap override */
.lp-product-grid { row-gap: 1.25rem; }

/* Stretch cards to equal height within each row */
.lp-product-card-wrap { display: flex; }

/* Padding inside product card content areas */
.lp-product-card-wrap .product-list-item .padd-15 { padding: 15px; }

/* Keep code + availability text compact */
.lp-product-card-wrap .product-list-item .code,
.lp-product-card-wrap .product-list-item .avail-label { font-size: 0.92rem; margin-bottom: 6px; }

/* ---------------------------------------------------------------
   3. INFO / ABOUT SECTION
   --------------------------------------------------------------- */
.lp-info { padding: 75px 0 80px; background-color: #ffffff; }

.lp-info__img { width: 100%; height: auto; display: block; }

.lp-info__content { padding-left: 1.25rem; }

.lp-info__title { font-size: 2.1875rem; font-weight: 700; color: #232323; margin: 0 0 22px; line-height: 1.2; padding: 0; }

.lp-info__body { color: #232323; font-size: 1rem; font-weight: 400; line-height: 1.75; margin-bottom: 20px; }

.lp-info__body:last-child { margin-bottom: 0; }

/* Red underline link (e.g. "get in touch") */
.lp-link { color: #c52432; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

.lp-link:hover { color: #232323; }

/* ---------------------------------------------------------------
   4. RESPONSIVE OVERRIDES
   --------------------------------------------------------------- */
@media screen and (max-width: 991px) {
    .lp-hero { min-height: 420px; }

    .lp-hero .container { padding-top: 50px; padding-bottom: 50px; }

    .lp-products { padding: 40px 0 50px; }

    .lp-info { padding: 50px 0 55px; }
}

@media screen and (max-width: 767px) {
    .lp-hero { min-height: 340px; }

    .lp-hero .container { padding-top: 35px; padding-bottom: 35px; }

    .lp-hero__body { font-size: 1rem; }

    .lp-hero__browse { font-size: 1rem; }

    .lp-section-title { font-size: 1.5rem; }

    .lp-info__title { font-size: 1.5rem; }

    .lp-info__content { padding-left: 0; padding-top: 30px; }

    .lp-products { padding: 30px 0 40px; }

    .lp-info { padding: 40px 0; }
}

@media screen and (max-width: 500px) {
    .lp-hero { min-height: 280px; }

    .lp-product-grid { row-gap: 1rem; }
}