/* Landing page styles — steps, services, pillars, proof.
 * Part of the landing bundle; see landing-base.css for load order and rules.
 */

/* ------------------------------------------------------------------- steps */

.steps-streak {
    position: absolute;
    inset: 0;
    background: url("../img/brand/swoosh-mid.svg") center / cover no-repeat;
    opacity: 0.5;
    pointer-events: none;
    will-change: transform;
}

.steps-list {
    display: grid;
    gap: var(--g-space-l);
    list-style: none;
    position: relative;
}

.step {
    position: relative;
    padding-left: 4.25rem;
    padding-top: 0.25rem;
    min-height: 3.25rem;
}

/* Outlined numeral as a background flourish, set to the right so it never
 * collides with the icon ring in the left gutter. */
.step__number {
    position: absolute;
    right: 0.25rem;
    top: -1.4rem;
    z-index: 0;
    font-family: var(--g-font-display);
    font-style: italic;
    font-weight: var(--g-weight-heavy);
    font-size: var(--g-step-6);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--g-blue-500);
    opacity: 0.55;
    pointer-events: none;
}

.step__ring {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 2px solid var(--g-gold);
    color: var(--g-gold);
    background: var(--g-navy-900);
    z-index: 1;
}

.step__title,
.step__blurb {
    position: relative;
    z-index: 1;
}

.step__icon {
    width: 55%;
    height: 55%;
}

.step__title {
    font-size: var(--g-step-2);
    text-transform: uppercase;
    font-style: italic;
    margin-bottom: var(--g-space-3xs);
}

.step__blurb {
    color: var(--g-ink-inverse-muted);
}

/* ---------------------------------------------------------------- services */

.svc-grid {
    display: grid;
    gap: var(--g-space-m);
    list-style: none;
}

.svc-card {
    overflow: hidden;
}

.svc-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--g-shadow-l);
}

.media-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.svc-card__media {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--g-navy-700);
}

.svc-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.svc-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--g-space-2xs);
    padding: var(--g-space-m);
    flex: 1;
}

.svc-card__title {
    font-size: var(--g-step-2);
    text-transform: uppercase;
    font-style: italic;
    color: var(--g-navy-900);
}

.svc-card__blurb {
    color: var(--g-ink-muted);
    flex: 1;
}

/* When a card has points, they take over the stretch role from the blurb
 * so leftover height lands after the list, not between blurb and list. */
.svc-card__body:has(.svc-card__points) .svc-card__blurb {
    flex: 0;
}

.svc-card__points {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--g-space-3xs);
    font-size: var(--g-step--1);
    color: var(--g-ink-muted);
    flex: 1;
}

.svc-card__points li {
    position: relative;
    padding-left: 1.1rem;
}

.svc-card__points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--g-gold);
}

.svc-card__cue {
    font-family: var(--g-font-display);
    font-weight: var(--g-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--g-tracking-wide);
    color: var(--g-action);
}

.svc-card__cue::after {
    content: " \2192";
}

/* ---------------------------------------------------------------- pillars */

.pillars-wash {
    position: absolute;
    inset: -20% -10%;
    background: url("../img/brand/swoosh-back.svg") center / cover no-repeat;
    pointer-events: none;
    will-change: transform;
}

.pillar-grid {
    display: grid;
    gap: var(--g-space-l);
    list-style: none;
    position: relative;
}

.pillar__title {
    font-size: var(--g-step-2);
    text-transform: uppercase;
    font-style: italic;
    margin-block: var(--g-space-2xs) var(--g-space-3xs);
}

.pillar__blurb {
    color: var(--g-ink-inverse-muted);
}

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

.proof {
    background: var(--g-navy-950);
    color: var(--g-ink-inverse);
}

.rating {
    text-align: center;
    margin-bottom: var(--g-space-xl);
}

.rating__stars {
    display: flex;
    justify-content: center;
    gap: var(--g-space-3xs);
    color: var(--g-gold);
    margin-bottom: var(--g-space-2xs);
}

.rating__star {
    width: 1.75rem;
    height: 1.75rem;
}

.rating__summary {
    color: var(--g-ink-inverse-muted);
    font-size: var(--g-step-1);
}

.quote-grid {
    display: grid;
    gap: var(--g-space-m);
    list-style: none;
}

.quote {
    padding: var(--g-space-m);
    display: flex;
    flex-direction: column;
    gap: var(--g-space-s);
}

.quote__body p {
    font-size: var(--g-step-1);
    font-style: italic;
}

.quote__body p::before {
    content: "\201C";
}

.quote__body p::after {
    content: "\201D";
}

.quote__attribution {
    margin-top: auto;
    border-top: 1px solid var(--g-line-inverse);
    padding-top: var(--g-space-2xs);
}

.quote__name {
    display: block;
    font-family: var(--g-font-display);
    font-weight: var(--g-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--g-tracking-wide);
    color: var(--g-gold);
}

.quote__location {
    display: block;
    font-size: var(--g-step--1);
    color: var(--g-ink-inverse-muted);
}

/* ------------------------------------------------------------- breakpoints */

@media (min-width: 640px) {
    .steps-list {
        gap: var(--g-space-xl);
    }

    .svc-grid,
    .quote-grid,
    .pillar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .steps-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pillar-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .quote-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Offset every second quote plate: an even row of cards reads as a
     * template, a staggered one reads as designed. */
    .quote:nth-child(even) {
        margin-top: var(--g-space-m);
    }
}

@media (min-width: 1024px) {
    .svc-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Four text-only cards (fleet benefits) read as a designed 2x2 block;
     * three columns would orphan the fourth card. */
    .svc-grid--quad {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}