/* ============================================================
   Block: customer-tracks
   Four tracks on a deep blue gradient.
   ============================================================ */

.customer-tracks-section {
    padding: 75px 0;
    background: linear-gradient(
        135deg,
        var(--wp--preset--color--primary) 0%,
        var(--wp--preset--color--darkblue) 100%
    );
    color: var(--wp--preset--color--background);
    overflow: hidden;
}

.ct-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    color: white !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
}

.ct-eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--wp--preset--color--secondary);
    flex-shrink: 0;
    display: none;
}

.ct-heading {
    margin: 0 0 18px;
    color: var(--wp--preset--color--background);
    font-size: clamp(28px, 4.2vw, 44px);
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.ct-heading-accent {
    color: #f7a4d3;
}

.ct-sub {
    margin: 15px 0 48px !important;
    max-width: 820px;
    color: white !important;
    font-size: 18px !important;
    line-height: 1.5 !important;
}

.ct-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

/* Card-scale glass — full recipe ported from .ai-platforms-inner on
   the homepage:
     1) Stacked backgrounds (white veil over its own blue gradient)
     2) Faint hairline border
     3) Drop shadow + 4 directional 1px inset rim highlights
     4) ::before radial white glow tucked into the top-right corner
   Scaled down for the card surface: smaller radius, smaller
   drop shadow, smaller glow disc. */
.ct-card {
    position: relative;
    overflow: hidden;                /* clip the ::before glow to the rounded corners */
    z-index: 0;
    padding: 22px 22px 24px;
    color: var(--wp--preset--color--background);
    border-radius: 16px;

    /* Stacked backgrounds:
       - top: translucent-white frosted veil
       - bottom: blue gradient (same stops as the homepage Doxsona) */
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.10) 0%,
            rgba(255, 255, 255, 0.02) 100%
        ),
        linear-gradient(
            to right,
            var(--wp--preset--color--primary) 0%,
            #2f8af0 100%
        );

    border: 1px solid rgba(255, 255, 255, 0.20);

    box-shadow:
        0 14px 32px -12px rgba(5, 22, 60, 0.40),    /* drop — scaled to card size */
        inset 0  1px 0 0 rgba(255, 255, 255, 0.55), /* top rim — brightest */
        inset 1px 0  0 0 rgba(255, 255, 255, 0.30), /* left rim */
        inset -1px 0 0 0 rgba(255, 255, 255, 0.15), /* right rim — dim */
        inset 0 -1px 0 0 rgba(255, 255, 255, 0.10); /* bottom rim — dimmest */

    backdrop-filter: blur(6px) saturate(140%);
    -webkit-backdrop-filter: blur(6px) saturate(140%);
}

/* White radial light catch, tucked into the upper-RIGHT corner of
   the card. overflow:hidden on .ct-card clips it to the rounded
   rect so only the inner crescent shows. */
.ct-card::before {
    content: "";
    position: absolute;
    top: -70px;
    right: -50px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(
        circle at center,
        rgba(255, 255, 255, 0.28) 0%,
        rgba(255, 255, 255, 0) 70%
    );
    pointer-events: none;
    z-index: 0;
}

/* Lift the card content above the ::before glow. */
.ct-card > * {
    position: relative;
    z-index: 1;
}

.ct-label {
    display: inline-block;
    margin: 0 0 14px;
    padding: 4px 10px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.7);
    color: #d441b5;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
}

.ct-title {
    margin: 0 0 10px;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--wp--preset--color--background);
}

.ct-desc {
    margin: 0;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: var(--wp--preset--color--background, #fff) !important;
}

.customer-tracks-section.alignfull,
.wp-block-pixacore-customer-tracks.alignfull {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 1100px) {
    .ct-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .customer-tracks-section { padding: 64px 0; }
    .ct-grid { grid-template-columns: 1fr; gap: 16px; }
}