/**
 * Block: Why This Exists
 *
 * Two-panel card. Left: pull-quote on cream/grain background.
 * Right: mocha-gradient panel with "from → to" comparison list.
 *
 * @package GuildCommerceTheme
 * @since 1.5.0
 */

/* ---------------------------------------------------------- *
 * Section frame                                              *
 * ---------------------------------------------------------- */
.gc-wte {
    position: relative;
    padding-block: clamp(3.5rem, 8vw, 6rem);
    background: var(--gc-bg, #FFFDF8);
}

.gc-wte__inner {
    max-width: var(--gc-content-max, 1200px);
    margin-inline: auto;
    padding-inline: var(--gc-content-pad, clamp(1rem, 4vw, 2rem));
}

/* ---------------------------------------------------------- *
 * Card shell — two panels side by side at md+               *
 * ---------------------------------------------------------- */
.gc-wte__card {
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(82, 66, 53, 0.14);
    box-shadow: 0 10px 30px rgba(82, 66, 53, 0.06);
    background: #FFFFFF;
}

@media (min-width: 900px) {
    .gc-wte__card {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    }
}

.gc-wte__panel {
    padding: clamp(2rem, 5vw, 3rem);
    display: flex;
    flex-direction: column;
}

/* ---------------------------------------------------------- *
 * Left panel — quote on grain                                *
 * ---------------------------------------------------------- */
.gc-wte__panel--quote {
    position: relative;
    background-color: #FFFAF0;
    /* Subtle dot grain — same family as gc-grain */
    background-image:
        radial-gradient(rgba(82, 66, 53, 0.06) 1px, transparent 1px),
        radial-gradient(rgba(82, 66, 53, 0.04) 1px, transparent 1px);
    background-size: 14px 14px, 22px 22px;
    background-position: 0 0, 7px 11px;
}

.gc-wte__eyebrow,
.gc-wte__compare-eyebrow {
    display: inline-block;
    font-family: var(--gc-font-display, "Inter Tight", system-ui, sans-serif);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gc-wte__eyebrow {
    color: rgba(82, 66, 53, 0.70);
}

.gc-wte__quote {
    margin: 1.25rem 0 0;
    padding: 0;
    font-family: var(--gc-font-display, "Inter Tight", system-ui, sans-serif);
    font-weight: 600;
    font-size: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--gc-mocha, #524235);
    text-wrap: balance;
    quotes: none;
}

.gc-wte__quote-mark {
    color: var(--gc-honey, #FCB240);
    font-family: var(--gc-font-display, "Inter Tight", system-ui, sans-serif);
    margin-right: 0.05em;
}

.gc-wte__divider {
    margin: 1.75rem 0 0;
    width: 3rem;
    height: 1px;
    background: rgba(82, 66, 53, 0.30);
}

.gc-wte__attribution {
    margin: 0.75rem 0 0;
    font-family: var(--gc-font-body, "DM Sans", system-ui, sans-serif);
    font-size: 0.875rem;
    line-height: 1.45;
    color: rgba(82, 66, 53, 0.78);
}

.gc-wte__attribution-name {
    font-family: var(--gc-font-display, "Inter Tight", system-ui, sans-serif);
    font-weight: 700;
    color: var(--gc-mocha, #524235);
}

.gc-wte__attribution-meta {
    color: rgba(82, 66, 53, 0.62);
}

/* ---------------------------------------------------------- *
 * Right panel — mocha gradient + from → to list              *
 * ---------------------------------------------------------- */
.gc-wte__panel--compare {
    color: #FFFFFF;
    background:
        radial-gradient(circle at 0% 0%, rgba(252, 178, 64, 0.12), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(156, 102, 170, 0.16), transparent 60%),
        linear-gradient(135deg, #524235 0%, #3a2e23 100%);
}

.gc-wte__compare-eyebrow {
    color: rgba(255, 255, 255, 0.70);
}

.gc-wte__pairs {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-family: var(--gc-font-body, "DM Sans", system-ui, sans-serif);
    font-size: 0.9375rem;
    line-height: 1.45;
}

/*
 * Pair row layout
 *
 * Mobile (<600px): vertical stack — "from" line, then a small honey
 * arrow on its own row, then "to" line. Reads top-to-bottom like a
 * before/after, no orphaned arrows or clipped phrases.
 *
 * Tablet+ (≥600px): single row, "from" gets a min-width so arrows
 * align in a column down the list.
 */
.gc-wte__pair {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "from"
        "arrow"
        "to";
    row-gap: 0.25rem;
    align-items: center;
    padding-block: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.gc-wte__pair:last-child { border-bottom: 0; }

.gc-wte__pair-from {
    grid-area: from;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, 0.40);
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.gc-wte__pair-arrow {
    grid-area: arrow;
    color: var(--gc-honey, #FCB240);
    font-weight: 700;
    font-size: 0.9em;
    line-height: 1;
    /* On mobile, rotate the arrow 90deg so it points DOWN between
     * the struck "from" and the corrective "to" — a visual cue that
     * reads as "this becomes that" instead of a stranded glyph. */
    transform: rotate(90deg);
    transform-origin: center;
    display: inline-block;
    width: 1em;
}

.gc-wte__pair-to {
    grid-area: to;
    color: #FFFFFF;
    font-weight: 500;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}

@media (min-width: 600px) {
    .gc-wte__pair {
        grid-template-columns: minmax(0, 11rem) auto minmax(0, 1fr);
        grid-template-areas: "from arrow to";
        column-gap: 0.75rem;
        row-gap: 0;
        padding-block: 0;
        border-bottom: 0;
    }
    .gc-wte__pair-arrow {
        transform: none;
        width: auto;
    }
}

/* ---------------------------------------------------------- *
 * Reduced motion (no transitions on this block, but keep     *
 * the rule for future-proofing if hovers are added)          *
 * ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .gc-wte__card { transition: none; }
}