/**
 * GUL Block Styles — per-block visual variations
 *
 * Each block in the inspector "Styles" panel maps to one `is-style-*`
 * class on the wrapper. These rules override or extend the block's
 * base style based on which variation the admin picked. Loaded with
 * gul-sections so it sits AFTER each block's own style.css.
 *
 * Variations target tokenized colors (`--gul-token-*`) so picking a
 * style still respects whatever Theme Tokens the customer saved.
 */

/* ─── Hero variations ────────────────────────────────────────────── */
.wp-block-gul-hero.is-style-split .gul-hero__inner {
    text-align: left;
}
.wp-block-gul-hero.is-style-split .gul-hero__title,
.wp-block-gul-hero.is-style-split .gul-hero__subtext {
    max-width: 32rem;
    margin-left: 0;
}
.wp-block-gul-hero.is-style-dark-overlay {
    background-color: #0a0a14;
    color: #fff;
}
.wp-block-gul-hero.is-style-dark-overlay::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient( 180deg, rgba(10,10,20,.4), rgba(10,10,20,.85) );
    z-index: 1;
    pointer-events: none;
}
.wp-block-gul-hero.is-style-dark-overlay .gul-hero__inner { position: relative; z-index: 2; }
.wp-block-gul-hero.is-style-dark-overlay .gul-hero__title,
.wp-block-gul-hero.is-style-dark-overlay .gul-hero__subtext { color: #fff; }

/* ─── Service Cards variations ───────────────────────────────────── */
.wp-block-gul-service-cards.is-style-borderless .gul-svc-card {
    border: none;
    box-shadow: none;
    background: transparent;
}
.wp-block-gul-service-cards.is-style-borderless .gul-svc-card:hover {
    transform: translateY(-2px);
}
.wp-block-gul-service-cards.is-style-icon-only .gul-svc-card__body,
.wp-block-gul-service-cards.is-style-icon-only .gul-svc-card__cta { display: none; }
.wp-block-gul-service-cards.is-style-icon-only .gul-svc-card {
    text-align: center;
    padding: 1.5rem 1rem;
}
.wp-block-gul-service-cards.is-style-icon-only .gul-svc-card__icon {
    margin: 0 auto .5rem;
}

/* ─── CTA Banner variations ──────────────────────────────────────── */
.wp-block-gul-cta-banner.is-style-solid {
    background: var(--gul-token-primary, #0093fe);
    color: #fff;
}
.wp-block-gul-cta-banner.is-style-solid .gul-section-title,
.wp-block-gul-cta-banner.is-style-solid .gul-cta-banner__heading,
.wp-block-gul-cta-banner.is-style-solid .gul-cta-banner__subtext { color: #fff; }
.wp-block-gul-cta-banner.is-style-inverse {
    background: #0a0a14;
    color: #fff;
}
.wp-block-gul-cta-banner.is-style-inverse .gul-section-title,
.wp-block-gul-cta-banner.is-style-inverse .gul-cta-banner__heading { color: #fff; }
.wp-block-gul-cta-banner.is-style-inverse .gul-btn--primary {
    background: var(--gul-token-accent, #fcb900);
    color: #0a0a14;
}

/* ─── Testimonials variations ────────────────────────────────────── */
.wp-block-gul-testimonials.is-style-quote-large .gul-testimonial-card {
    text-align: center;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 1rem 2rem;
}
.wp-block-gul-testimonials.is-style-quote-large .gul-testimonial-card__quote {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.4;
}
.wp-block-gul-testimonials.is-style-minimal .gul-testimonial-card {
    background: transparent;
    border: 1px solid #e2e8f0;
    box-shadow: none;
}

/* ─── Pricing Table variations ───────────────────────────────────── */
.wp-block-gul-pricing-table.is-style-shadow .gul-pricing-tier {
    box-shadow: 0 28px 56px -28px rgba(0,0,0,.18);
}
.wp-block-gul-pricing-table.is-style-compact .gul-pricing-tier {
    padding: 1.5rem 1.25rem;
}
.wp-block-gul-pricing-table.is-style-compact .gul-pricing-tier__price {
    font-size: 1.75rem;
}

/* ─── FAQ Accordion variations ───────────────────────────────────── */
.wp-block-gul-faq-accordion.is-style-flat .gul-faq-item {
    background: transparent;
    border: none;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 0;
    margin-bottom: 0;
}
.wp-block-gul-faq-accordion.is-style-flat .gul-faq-item:last-child {
    border-bottom: none;
}

/* ─── Pain Cards variations ──────────────────────────────────────── */
.wp-block-gul-pain-cards.is-style-numbered .gul-pain-card { counter-increment: pain-card; position: relative; padding-left: 4rem; }
.wp-block-gul-pain-cards.is-style-numbered { counter-reset: pain-card; }
.wp-block-gul-pain-cards.is-style-numbered .gul-pain-card::before {
    content: counter(pain-card, decimal-leading-zero);
    position: absolute; top: 1.25rem; left: 1.25rem;
    font-size: 1.5rem; font-weight: 800;
    color: var(--gul-token-primary, #0093fe);
}

/* ─── Feature Steps variations ───────────────────────────────────── */
.wp-block-gul-feature-steps.is-style-compact .gul-feature-step { padding: 1rem 0; }
.wp-block-gul-feature-steps.is-style-compact .gul-feature-step__image { max-width: 14rem; }

/* ─── Split Content variations ───────────────────────────────────── */
.wp-block-gul-split-content.is-style-card .gul-split-content__text {
    background: #fff;
    padding: 2rem;
    border-radius: 14px;
    box-shadow: 0 24px 48px -20px rgba(0,0,0,.18);
    transform: translate( -3rem, 2rem );
    position: relative;
    z-index: 2;
}

/* ─── Card Deck variations ───────────────────────────────────────── */
.wp-block-gul-card-deck.is-style-overlay .gul-card-deck__card {
    position: relative;
    color: #fff;
    overflow: hidden;
}
.wp-block-gul-card-deck.is-style-overlay .gul-card-deck__card img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
}
.wp-block-gul-card-deck.is-style-overlay .gul-card-deck__card::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient( 180deg, rgba(10,10,20,0), rgba(10,10,20,.85) );
    z-index: 1;
}
.wp-block-gul-card-deck.is-style-overlay .gul-card-deck__card > *:not(img) {
    position: relative;
    z-index: 2;
}