/*
 * Stable guide layout system.
 * Automated runs can switch layoutVariant per guide and layer extra polish in guide-agent.css.
 */

.guide-layout {
    display: block;
}

.guide-layout .guide-link,
.guide-layout .guide-tool-card,
.guide-layout .guide-card a,
.guide-layout .guide-discovery-card {
    text-underline-offset: 0.16em;
    text-decoration-thickness: 0.08em;
}

.guide-layout .guide-link:focus-visible,
.guide-layout .guide-tool-card:focus-visible,
.guide-layout .guide-card a:focus-visible,
.guide-layout .guide-discovery-card:focus-visible {
    outline: 2px solid rgba(21, 116, 123, 0.9);
    outline-offset: 2px;
    border-radius: 0.5rem;
}

.guide-hero--spotlight .guide-hero__visual {
    transform: scale(1.02);
}

.guide-hero--compact .guide-meta-row {
    gap: 0.5rem;
}

.guide-layout--compact .guide-section {
    padding: 1rem;
}

.guide-layout--compact .guide-step {
    padding: 0.72rem;
}

.guide-layout--spotlight .guide-block--tools .guide-tool-card,
.guide-layout--spotlight .guide-block--related .guide-card {
    box-shadow: 0 12px 28px rgba(14, 34, 56, 0.1);
}

.guide-layout--spotlight .guide-block--quick .guide-step {
    border-left: 4px solid rgba(18, 126, 136, 0.34);
}

.guide-layout--spotlight .guide-block--decision .guide-decision-card {
    border: 1px solid rgba(13, 106, 114, 0.2);
}

@media (min-width: 992px) {
    .guide-layout--split {
        display: grid;
        grid-template-columns: minmax(0, 1.45fr) minmax(290px, 1fr);
        gap: 1rem 1.1rem;
        align-items: start;
    }

    .guide-layout--split .guide-block {
        margin-top: 0 !important;
    }

    .guide-layout--split .guide-block--quick,
    .guide-layout--split .guide-block--content,
    .guide-layout--split .guide-block--faq,
    .guide-layout--split .guide-block--explore {
        grid-column: 1;
    }

    .guide-layout--split .guide-block--tools,
    .guide-layout--split .guide-block--decision,
    .guide-layout--split .guide-block--pitfalls,
    .guide-layout--split .guide-block--takeaways,
    .guide-layout--split .guide-block--related,
    .guide-layout--split .guide-block--ad {
        grid-column: 2;
    }

    .guide-layout--split .guide-block--tools {
        position: sticky;
        top: 84px;
    }

    .guide-layout--split .guide-tool-grid {
        gap: 0.62rem;
    }

    .guide-layout--split .guide-card,
    .guide-layout--split .guide-tool-card {
        border-radius: 0.7rem;
    }
}

@media (max-width: 991px) {
    .guide-layout--split {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    .guide-layout .guide-tool-card,
    .guide-layout .guide-card,
    .guide-layout .guide-discovery-card {
        transition: none !important;
        transform: none !important;
    }
}