/*
 * Homepage — shared layout for the plugin's fallback template.
 *
 * Loaded only when templates/page-cspl-home.php is what renders. A theme that
 * ships its own page-cspl-home.php owns its markup, so it gets none of this
 * (see CSPL_Homepage::enqueue_styles).
 *
 * DECLARES NO COLOUR. No hex, no named colours, no rgb(). Adding a literal
 * colour here would look fine on the theme it was picked against and wrong on
 * the other eight, silently. Two mechanisms stand in for one:
 *
 *   tints and borders  → color-mix() of `currentColor`, a transparency of the
 *     text colour the theme already resolved. These follow each theme's palette
 *     and read correctly on a light or a dark theme alike.
 *
 *   scrims over photographs → `canvastext`, with `canvas` for the text on top.
 *     currentColor cannot be used here: it is the text colour, so on a dark
 *     theme the scrim inverts along with the text it exists to sit behind, and
 *     the two cancel. canvastext/canvas are the system's own contrasting pair.
 *
 * It also assumes nothing about the theme's own classes beyond `container`,
 * which every theme in the fleet defines, and which the category templates
 * already rely on.
 */

/* ---- Rhythm ------------------------------------------------------------ */

.cspl-home .cspl-home-hero,
.cspl-home .cspl-home-value,
.cspl-home .cspl-home-method {
    padding-block: 48px;
}

@media screen and (min-width: 992px) {
    .cspl-home .cspl-home-hero,
    .cspl-home .cspl-home-value,
    .cspl-home .cspl-home-method {
        padding-block: 64px;
    }
}

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

/* A measure, left-aligned. A centred column of mixed-length lines reads as a
 * template; a left edge gives the eye one place to return to. */
.cspl-home .cspl-home-hero__body {
    max-width: 640px;
}

.cspl-home .cspl-home-hero__title {
    margin-top: 0;
}

.cspl-home .cspl-home-hero__subtitle {
    margin-bottom: 0;
}

/* Trust bullets: an icon and its claim on one line. */
.cspl-home .cspl-home-hero__bullets {
    list-style: none;
    padding-left: 0;
    margin: 24px 0 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

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

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

.cspl-home .cspl-home-hero__cta,
.cspl-home .cspl-home-band__cta {
    margin: 28px 0 0;
}

/* Brand index: the alternative to a single call to action. */
.cspl-home .cspl-home-hero__brands {
    list-style: none;
    padding-left: 0;
    margin: 28px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cspl-home .cspl-home-hero__brands a {
    display: inline-flex;
    padding: 8px 16px;
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    border-radius: 999px;
    text-decoration: none;
}

/* With a photograph the hero becomes its own positioning context and the copy
 * sits over a scrim. */
.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;
}

/* The scrim follows the copy: dense on the left where the words are, clearing
 * to the right so the photograph still reads as a photograph. Below the
 * breakpoint there is no width to clear into, so it becomes a full wash.
 *
 * Built from `canvastext`, NOT currentColor. currentColor is the theme's text
 * colour, so on a dark theme the scrim would be light — and the `canvas` text
 * over it is light too, which measured 1.0:1 on design11: invisible. canvastext
 * and canvas are the system's own contrasting pair, so the surface stays dark
 * and the text stays legible whatever the theme's own colours are. */
.cspl-home .cspl-home-hero--image .cspl-home-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, canvastext 88%, transparent);
}

@media screen and (min-width: 768px) {
    .cspl-home .cspl-home-hero--image .cspl-home-hero__media::after {
        background: linear-gradient(
            to right,
            color-mix(in srgb, canvastext 94%, transparent) 0%,
            color-mix(in srgb, canvastext 80%, transparent) 55%,
            color-mix(in srgb, canvastext 35%, transparent) 100%
        );
    }
}

.cspl-home .cspl-home-hero--image .container {
    position: relative;
}

/* The other half of the canvastext/canvas pair: the scrim is canvastext, so
 * the text on it is canvas.
 *
 * Set on each element, not on an ancestor: themes give headings an explicit
 * colour (design15's base layer is the live example), and an explicit
 * declaration beats anything inherited from a wrapper. A heading left to
 * inherit here renders in the theme's heading colour rather than canvas, which
 * on a dark theme is light-on-light and looks like a rendering bug.
 */
.cspl-home .cspl-home-hero--image .cspl-home-hero__title,
.cspl-home .cspl-home-hero--image .cspl-home-hero__subtitle,
.cspl-home .cspl-home-hero--image .cspl-home-hero__bullets,
.cspl-home .cspl-home-hero--image .cspl-home-hero__bullets li,
.cspl-home .cspl-home-hero--image .cspl-home-hero__brands a {
    color: canvas;
}

.cspl-home .cspl-home-hero--image .cspl-home-hero__brands a {
    border-color: color-mix(in srgb, canvas 45%, transparent);
}

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

/* 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. Empty tracks collapse. */
.cspl-home .cspl-home-value__items,
.cspl-home .cspl-home-method__items {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 32px;
}

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

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

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

/* The icon tile: a soft square carrying the icon, both drawn from the
 * surrounding text colour. An editor who picks no icon gets no tile, which
 * reads as deliberate rather than broken. */
.cspl-home .cspl-home-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 10px;
    background: color-mix(in srgb, currentColor 8%, transparent);
}

/* ---- Mid-page call to action ------------------------------------------- */

/* An inset rounded panel rather than a full-bleed stripe: it reads as a
 * deliberate object on the page instead of a band the layout ran out of ideas
 * for. The tint carries it with no image, so an editor who supplies none still
 * gets a finished section. */
.cspl-home .cspl-home-band__panel {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 40px 24px;
    background: color-mix(in srgb, currentColor 6%, transparent);
}

@media screen and (min-width: 992px) {
    .cspl-home .cspl-home-band__panel {
        padding: 56px 40px;
    }
}

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

.cspl-home .cspl-home-band__panel--image .cspl-home-band__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, canvastext 88%, transparent);
}

@media screen and (min-width: 768px) {
    .cspl-home .cspl-home-band__panel--image .cspl-home-band__media::after {
        background: linear-gradient(
            to right,
            color-mix(in srgb, canvastext 94%, transparent) 0%,
            color-mix(in srgb, canvastext 82%, transparent) 50%,
            color-mix(in srgb, canvastext 25%, transparent) 100%
        );
    }
}

.cspl-home .cspl-home-band__body {
    position: relative;
    max-width: 560px;
}

.cspl-home .cspl-home-band__title {
    margin-top: 0;
}

/* Same reasoning as the hero: named on the element, not inherited. */
.cspl-home .cspl-home-band__panel--image .cspl-home-band__title {
    color: canvas;
}

/* ---- Disclosure -------------------------------------------------------- */

/* Required reading, but not headline material: a faint panel separates it
 * without competing with the sections above it. */
.cspl-home .cspl-home-disclosure {
    padding-bottom: 64px;
}

.cspl-home .cspl-home-disclosure p {
    margin: 0;
    padding: 20px;
    border-radius: 12px;
    background: color-mix(in srgb, currentColor 5%, transparent);
}