/* ============================================================
   Block: ai-platforms
   Self-contained styles for the Doxsona + ACE platforms section.
   Auto-loaded by Genesis Custom Blocks via filename match.
   Uses theme.json CSS variables so palette changes propagate.
   ============================================================ */

/* ----------------------------------------------------------------
   PARENT WRAPPER REPAINT
   The block editor wraps this section in a `.wp-block-group` that
   often has Gutenberg's `has-lightblue-to-darkblue-gradient-
   background` class applied (a holdover from when the panel itself
   was dark blue). We REPAINT it with the same light atmospheric
   gradient as the inner panel — so the whole section reads as one
   continuous light glass surface, with a diagonal sheen on the
   right just like the mockup. Scoped via :has() so this only
   fires when the group is wrapping OUR section.
   ---------------------------------------------------------------- */
.ai-platform-main-wrapper {
    /* Same three-layer recipe as `.ai-platforms-inner` so the
       parent and the panel inside it share a colour family;
       the diagonal sheen is tuned a bit brighter/wider here so
       it still reads when the rounded panel sits on top of it.

       Front-to-back:
         1. Subtle vertical white veil — brightens the top.
         2. Wider diagonal sheen (bottom-left → top-right) — the
            bright streak visible on the right side of the image.
         3. Pale blue base wash — keeps the surface reading as
            "blue glass" rather than pure white. */
    /* background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.40) 0%,
            rgba(255, 255, 255, 0.00) 60%
        ),
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0) 30%,
            rgba(255, 255, 255, 0.65) 60%,
            rgba(255, 255, 255, 0) 85%
        ),
        linear-gradient(
            to right,
            #dbe9fb 0%,
            #e8f0fc 60%,
            #f3f6fc 100%
        ) !important;
    background-image:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.40) 0%,
            rgba(255, 255, 255, 0.00) 60%
        ),
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0) 30%,
            rgba(255, 255, 255, 0.65) 60%,
            rgba(255, 255, 255, 0) 85%
        ),
        linear-gradient(
            to right,
            #dbe9fb 0%,
            #e8f0fc 60%,
            #f3f6fc 100%
        ) !important; */
}

/* ============================================================
   OUTER SECTION — reverted to plain (no gradient, no ::before).
   The section now does nothing visually; the entire glass card,
   gradient base, and light catch live inside .ai-platforms-inner.
   ============================================================ */

.ai-platforms-section {
    position: relative;
    padding: 80px 0 80px;
    color: var(--wp--preset--color--foreground);
    overflow: hidden;
}

/* ============================================================
   INNER PANEL — fully self-contained glass card
   Everything lives here: the blue gradient is the base background,
   a 2-stop translucent-white gradient is layered on top for the
   frosted look, a radial light catch comes from ::before, and the
   inset highlights at the top + bottom edges give the polished
   glass-rim effect from the mockup.
   ============================================================ */

.ai-platforms-section .ai-platforms-inner {
    position: relative;
    overflow: hidden;                /* clip ::before light catch to the rounded corners */
    z-index: 0;
    max-width: 1200px;
    margin: 0 auto;
    padding: 56px 56px 64px;
    border-radius: 28px;

    /* BLUE GLASS PANEL — same three-layer recipe as before, but
       the base wash is bumped to medium-light blue so the panel
       reads as clearly more saturated than the very pale parent
       behind it, while staying light enough for the dark foreground
       copy to remain readable. Layers (front-to-back):
         1. Vertical white veil — frosts the top.
         2. Diagonal sheen (bottom-left → top-right) — that bright
            streak in the mockup.
         3. Medium-light blue base gradient — #7ebbe7 → #a7cfee →
            #c4dcef. Distinctly blue without going dark; the white
            layers above keep it reading as "frosted glass." */
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.05) 100%), linear-gradient(135deg, rgba(255, 255, 255, 0) 2%, rgba(255, 255, 255, 0.55) 58%, rgba(255, 255, 255, 0) 78%), linear-gradient(to right, #109ddb 0%, #fff 49%, #109ddb 100%);

    /* Hairline border in a slightly stronger blue so the panel
       edge reads against the pale parent. */
    border: 1px solid rgba(16, 157, 219, 0.40);

    /* GLASS RIM — bright white directional highlights for the
       light-catch, plus a soft blue drop shadow that lifts the
       panel off the parent surface. */
    box-shadow:
        /* Soft drop shadow under the panel */
        0 30px 70px -18px rgba(5, 22, 60, 0.30),
        /* Glass rim — directional highlights */
        inset 0  1px 0 0 rgba(255, 255, 255, 0.85),   /* top edge — brightest */
        inset 1px 0  0 0 rgba(255, 255, 255, 0.50),   /* left edge */
        inset -1px 0 0 0 rgba(255, 255, 255, 0.20),   /* right edge — dimmer */
        inset 0 -1px 0 0 rgba(255, 255, 255, 0.15);   /* bottom edge — dimmest */
}

/* Soft white light-catch in the upper-RIGHT corner — kept on the
   new light panel for subtle dimensionality, but with reduced
   opacity since the base is already pale. */
.ai-platforms-section .ai-platforms-inner::before {
    content: "";
    position: absolute;
    top: -160px;
    right: -120px;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(
        circle at center,
        rgba(255, 255, 255, 0.70) 0%,
        rgba(255, 255, 255, 0) 70%
    );
    pointer-events: none;
    z-index: 0;
}

/* (The pink ::after glow was removed — only the white top-right
   ::before light catch remains, plus the directional inset
   highlights on the panel itself which do the "glass border" job.) */

/* Lift the real content above the ::before light catch. */
.ai-platforms-section .ai-platforms-inner > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 767px) {
    .ai-platforms-section .ai-platforms-inner {
        padding: 36px 24px 40px;
        border-radius: 20px;
    }
    .ai-platforms-section .ai-platforms-inner::before {
        width: 300px;
        height: 300px;
        top: -110px;
        right: -80px;
    }
}

/* Width/centering now provided by the theme's .container class (Bootstrap
   container with theme overrides in scss/globals/_global.scss). The
   .ai-platforms-inner hook is kept for block-only style additions. */
.ai-platforms-section .ai-platforms-inner {
    position: relative;
}

/* When WordPress renders this as an `alignfull` block, neutralise any
   parent layout's inline max-width so the gradient runs edge-to-edge. */
.wp-block-pixacore-ai-platforms.alignfull,
.ai-platforms-section.alignfull {
    width: 100%;
    max-width: none;
    margin-top: -5px !important;
    margin-left: 0;
    margin-right: 0;
}

/* ---- Intro block (eyebrow + heading + paragraph) ---- */

.ai-platforms-intro {
    margin: 0 0 56px;
}

.ai-platforms-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 24px;
    color: var(--wp--preset--color--secondary) !important;   /* brand pink (#d02db0) on light panel */
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: normal;
    text-transform: uppercase;
    line-height: 1;
}

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

.ai-platforms-heading {
    margin: 0 0 24px;
    color: var(--wp--preset--color--foreground);   /* dark on light panel */
    font-size: clamp(36px, 5vw, 52px);
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.ai-platforms-heading-line {
    display: block;
}

/* The "+" between Doxsona and ACE picks up the secondary (pink) tone.
   Wrapping in a span lets the editor keep it inline without HTML edits.
   Mockup uses pink "+"; achieved by inserting <span class="plus">+</span>
   in the field, or by editors typing "+" with markdown-style emphasis.
   No JS — relies on raw "+" character styled below if wrapped. */
.ai-platforms-heading-line .plus,
.ai-platforms-heading-line em {
    /* color: var(--wp--preset--color--secondary); */
    color: #d02db0;
    font-style: normal;
}

.ai-platforms-subheading {
    margin: 0;
    font-size: 22px !important;
    line-height: 1.55 !important;
    color: var(--wp--preset--color--foreground) !important;   /* dark copy on light panel */
    letter-spacing: 0.32px;
}

/* ---- Cards row ---- */

.ai-platforms-cards {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 24px;
    align-items: stretch;
}

.ai-platform-card {
    position: relative;
    background-color: var(--wp--preset--color--background);
    color: var(--wp--preset--color--foreground);
    border-radius: 14px;
    padding: 32px 36px 36px;
    box-shadow: 0 24px 48px -28px rgba(0, 30, 80, 0.45);
    display: flex;
    flex-direction: column;
    border-top: 10px solid #d02db0;
}

/* ---- "NEW" badge (section level) ----
   Glass pill anchored to the top-right of `.ai-platforms-inner`
   (not to either card). Sized up so it reads as a section-level
   "what's new" marker, not a per-card sticker. Self-contained
   glass recipe — translucent blue base, white veil, diagonal
   sheen, directional rim insets, soft drop shadow.

   Selector is scoped through `.ai-platforms-inner` so the
   specificity beats the existing
   `.ai-platforms-section .ai-platforms-inner > *` rule that
   pins direct children to `position: relative`. */
.ai-platforms-section .ai-platforms-inner > .ai-platforms-badge {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    border-radius: 15px;

    font-size: 18px;
    font-weight: 700 !important;
    letter-spacing: 1px;
    line-height: normal;
    color: #ffffff;
    text-transform: uppercase;
    white-space: nowrap;

    /* Glass recipe — same three-layer mix as the panel, but a
       deeper blue so the badge reads against the light surface. */
    background: #d02db0;

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

    box-shadow:
        0 10px 22px -10px rgba(20, 60, 130, 0.45),
        inset 0  1px 0 0 rgba(255, 255, 255, 0.75),
        inset 1px 0  0 0 rgba(255, 255, 255, 0.40),
        inset -1px 0 0 0 rgba(255, 255, 255, 0.20),
        inset 0 -1px 0 0 rgba(255, 255, 255, 0.15);

    backdrop-filter: blur(4px) saturate(150%);
    -webkit-backdrop-filter: blur(4px) saturate(150%);
}

@media (max-width: 991px) {
    .ai-platforms-section .ai-platforms-inner > .ai-platforms-badge {
        position: absolute;
        top: 5px;
        right: 10px;
        z-index: 3;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 3px 15px;
        border-radius: 15px;
        font-size: 14px;
    }
}
@media (max-width: 767px) {
    .ai-platforms-section .ai-platforms-inner > .ai-platforms-badge {
        right: 5px;
    }
}

/* Mobile: pull the badge in a bit so it doesn't crowd the corner
   on narrow viewports. */


.ai-platform-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
}

.ai-platform-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.ai-platform-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.ai-platform-card-title {
    margin: 0;
    color: var(--wp--preset--color--foreground);
    font-size: 28px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.ai-platform-card-subtitle {
    margin: 0 0 16px;
    color: var(--wp--preset--color--primary);
    font-size: 18px !important;
    font-weight: bold !important;
    letter-spacing: 1px !important;
    text-transform: uppercase;
    line-height: 1.5 !important;
}

.ai-platform-card-description {
    margin: 0 0 28px;
    color: var(--wp--preset--color--foreground);
    font-size: 18px !important;
    line-height: 1.5 !important;
    flex-grow: 1;
}

.ai-platform-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--wp--preset--color--secondary);
    font-size: 20px !important;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

@media (max-width: 991px) {
    .ai-platform-card-subtitle {
        font-size: 16px !important;
    }
    .ai-platform-card-description {
        font-size: 16px !important;
    }
    .ai-platform-card-link {
        font-size: 16px !important;
    }
}

.ai-platform-card-link:hover {
    opacity: 0.75;
}

.ai-platform-card-link-arrow {
    display: inline-block;
    width: 14px;
    height: 10px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10' fill='none'><path d='M1 5h11.5M8 1l4.5 4L8 9' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10' fill='none'><path d='M1 5h11.5M8 1l4.5 4L8 9' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
}

/* ---- Arrow between cards ---- */

.ai-platforms-arrow {
    align-self: center;
    width: 28px;
    height: 20px;
    /* background-color: var(--wp--preset--color--light-pink, #f2dbee); */
    background-color: #d02db0;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20' fill='none'><path d='M1 10h24M18 2l8 8-8 8' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20' fill='none'><path d='M1 10h24M18 2l8 8-8 8' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
}

/* ---- Tablet ---- */

@media (max-width: 991px) {
    .ai-platforms-section {
        padding: 60px 0 72px;
    }

    .ai-platforms-intro {
        margin-bottom: 40px;
    }

    .ai-platforms-cards {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .ai-platforms-arrow {
        transform: rotate(90deg);
        justify-self: center;
        width: 24px;
        height: 18px;
    }
}

/* ---- Mobile ---- */

@media (max-width: 767px) {
    .ai-platforms-section {
        padding: 48px 30px 60px;
    }

    .ai-platform-card {
        padding: 28px 24px 28px;
    }

    .ai-platform-card-title {
        font-size: 24px;
    }

    .ai-platforms-heading {
        font-size: clamp(30px, 8vw, 40px);
    }
}