/*
 * The home page blocks that replaced the text hero.
 *
 * Loaded through the $pageCss hook on header.php, so it is cached once
 * rather than inlined into every page view. Every colour is a token: the
 * storefront redefines all of them under [data-theme="dark"], and the old
 * hero's hardcoded values were part of why this page looked wrong there.
 */

/* ---- the promotional bar ---------------------------------------------
 *
 * Replaces a 3rem-padded gradient that carried a slogan and no artwork.
 * This is deliberately short: its whole job is to say the two things worth
 * knowing before scrolling, then get out of the way of the products.
 */
.home-promo {
    background: var(--secondary);
    border-bottom: 1px solid var(--border);
    padding: 1.4rem 0 1.5rem;
    text-align: center;
}

.home-promo-title {
    font-size: 1.6rem;
    line-height: 1.2;
    margin: 0 0 0.4rem;
    color: var(--text-dark);
}

.home-promo-line {
    margin: 0;
    font-size: 0.98rem;
    color: var(--text-light);
}

.home-promo-line strong {
    color: var(--primary);
}

.home-promo-dot {
    opacity: 0.45;
    margin: 0 0.45rem;
}

/* ---- collection tiles -------------------------------------------------
 *
 * auto-fill rather than a fixed column count, so eighteen tiles reflow from
 * six across on a desktop to two on a phone without a breakpoint for each
 * step. The square aspect-ratio is what stops the grid jumping as the lazy
 * images arrive - the box is already the right size before the photo lands.
 */
.collection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
}

.collection-tile {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    background: var(--secondary);
    border: 1px solid var(--border);
}

.collection-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.collection-tile:hover img {
    transform: scale(1.05);
}

/* The label sits on a gradient scrim rather than straight on the artwork.
   Album covers, dark photographs and pale watercolours all appear in these
   tiles, and white text alone is unreadable on at least one of them. */
.collection-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.6rem 0.7rem 0.6rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* ---- review proof ----------------------------------------------------- */

.home-proof {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: 0 2px 10px var(--shadow);
}

.home-proof-score {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.home-proof-stars {
    color: #f5a623;
    font-size: 1.2rem;
    letter-spacing: 0.08em;
}

.home-proof-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1;
}

.home-proof-count {
    color: var(--text-light);
    font-size: 0.95rem;
}

.home-proof-quotes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    text-align: left;
}

.home-proof-quotes blockquote {
    margin: 0;
    padding: 0 0 0 1rem;
    border-left: 3px solid var(--primary);
}

.home-proof-quotes p {
    margin: 0 0 0.4rem;
    color: var(--text-dark);
    line-height: 1.55;
    font-size: 0.94rem;
}

.home-proof-quotes cite {
    color: var(--text-light);
    font-size: 0.85rem;
    font-style: normal;
}

.home-proof-quotes cite::before {
    content: '\2014\00a0';
}

/* ---- the four facts --------------------------------------------------- */

.home-facts h3 {
    font-size: 1.05rem;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.home-facts p {
    color: var(--text-light);
    font-size: 0.93rem;
    line-height: 1.6;
    margin: 0;
}

.home-facts a {
    color: var(--primary);
}

@media (max-width: 576px) {
    .home-promo-title {
        font-size: 1.3rem;
    }

    .home-promo-line {
        font-size: 0.9rem;
    }

    /* The dots are separators on one line; stacked, they read as bullets
       pointing at nothing. */
    .home-promo-dot {
        display: block;
        height: 0;
        overflow: hidden;
        margin: 0;
    }

    .collection-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 0.7rem;
    }

    .home-proof {
        padding: 1.5rem 1rem;
    }
}