/*
 * Homepage layout.
 *
 * Hand-authored, not generated: the SCSS pipeline compiles to css/custom.css
 * (see tools/, `npx gulp theme-styles`), and this file is deliberately separate
 * so adjusting the homepage never means regenerating build output.
 *
 * LAYOUT ONLY — no colour is declared anywhere in this file. Where a surface,
 * border or tile needs a tone, it is derived from `currentColor` with
 * color-mix(), so it is a transparency of the text colour the theme already
 * chose. That keeps the homepage matching its category pages, and following a
 * palette or theme change, with nothing to keep in sync.
 */

/* ---- Hero -------------------------------------------------------------- */

/* Clears the absolutely-positioned Flatsome header. Without it the h1 slides
 * underneath — the trap documented on .new-header-banner-section in
 * scss/template-parts/_header-banner.scss. Category pages get this clearance
 * from the main banner; the homepage has no banner.
 *
 * The header is NOT one height. Measured on altbrandshub 2026-09-16: 55px at
 * 375px wide, 90px from the desktop breakpoint up where the logo row and nav
 * row stack. The 55px in the SCSS note is the mobile figure only. */
.cspl-home .cspl-home-hero {
    padding-top: 70px;
}

@media screen and (min-width: 992px) {
    .cspl-home .cspl-home-hero {
        padding-top: 110px;
    }
}

/* With a background image the hero becomes its own positioning context and the
 * text sits over a scrim. The scrim is a transparency of the page's own text
 * colour, not a chosen tone. */
.cspl-home .cspl-home-hero--image {
    position: relative;
    overflow: hidden;
}

.cspl-home .cspl-home-hero__media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.cspl-home .cspl-home-hero--image .cspl-home-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, currentColor 62%, transparent);
}

.cspl-home .cspl-home-hero--image .section-wrapper {
    position: relative;
    z-index: 1;
}

/* Trust bullets: an icon and its claim on one line, left-aligned as a list of
 * statements rather than centred page furniture. */
.cspl-home .cspl-home-hero__bullets {
    list-style: none;
    padding-left: 0;
    display: inline-flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
    margin-inline: auto;
}

.cspl-home .cspl-home-hero__bullets li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cspl-home .cspl-home-hero__bullets svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}

/* ---- Card grids -------------------------------------------------------- */

/* Three across on desktop, two on tablet, one on phone. auto-fit rather than a
 * fixed count so a site running four or five entries does not strand one on a
 * row of its own. */
.cspl-home .cspl-home-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 28px;
    text-align: left;
}

@media screen and (min-width: 768px) {
    .cspl-home .cspl-home-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
}

.cspl-home .cspl-home-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
    border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    border-radius: 8px;
}

.cspl-home .cspl-home-card h3 {
    margin: 0;
}

.cspl-home .cspl-home-card p {
    margin: 0;
}

/* The icon tile: a soft square carrying the icon, both drawn from the
 * surrounding text colour. */
.cspl-home .cspl-home-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: color-mix(in srgb, currentColor 8%, transparent);
}

/* ---- Sections ---------------------------------------------------------- */

/* The shared .section-wrapper carries only a bottom margin, so the closing
 * section would otherwise sit flush against the footer. */
.cspl-home .cspl-home-disclosure {
    padding-bottom: 40px;
}

/* The disclosure is required reading but not headline material: a faint band
 * separates it without competing. */
.cspl-home .cspl-home-disclosure .category-info {
    padding: 20px;
    border-radius: 8px;
    background: color-mix(in srgb, currentColor 5%, transparent);
}