/**
 * Pattern 1: Illustrated Hero — Layout and Responsive Styles
 * ============================================================
 *
 * Two-column grid (55% content / 45% illustration).
 * Mobile: stacks text first, image second.
 *
 * Depends on:
 *   - custom-tokens.css (design tokens)
 *   - global-classes.css (.x-section-warm, .x-container, .x-btn-primary, .x-btn-secondary)
 *   - typography.css (h1, .x-highlight)
 *
 * Requirements: 8.1, 8.2, 8.3, 26.3
 *
 * @package Xenopz
 */

/* =========================================================================
   HERO GRID LAYOUT
   ========================================================================= */

/**
 * .x-hero-grid
 * Two-column grid: 55% content, 45% image.
 * Vertically centered columns.
 */
.x-hero-grid {
    display: grid;
    grid-template-columns: 55% 45%;
    gap: var(--x-space-lg);
    align-items: center;
}

/* =========================================================================
   CONTENT COLUMN
   ========================================================================= */

.x-hero-content {
    display: flex;
    flex-direction: column;
    gap: var(--x-space-md);
}

.x-hero-content h1 {
    margin: 0;
}

/**
 * .x-hero-subline
 * Supporting paragraph below the H1.
 * Slightly larger than body text for emphasis.
 */
.x-hero-subline {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--x-ink);
    margin: 0;
    max-width: 540px;
}

/**
 * .x-hero-buttons
 * Button group — horizontal layout with gap.
 * Wraps on small viewports.
 */
.x-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--x-space-sm);
    align-items: center;
    margin-top: var(--x-space-xs);
}

/* =========================================================================
   IMAGE COLUMN
   ========================================================================= */

.x-hero-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.x-hero-image img {
    width: 100%;
    height: auto;
    max-width: 540px;
    border-radius: var(--x-radius-lg);
    object-fit: contain;
}

/* =========================================================================
   RESPONSIVE: TABLET (768px - 991px)
   ========================================================================= */

@media (max-width: 991px) {
    .x-hero-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--x-space-md);
    }

    .x-hero-image img {
        max-width: 100%;
    }
}

/* =========================================================================
   RESPONSIVE: MOBILE (< 768px)
   ========================================================================= */

@media (max-width: 767px) {
    /**
     * Stack columns vertically: text first, image second.
     * The content column has order: 1 (default), image column order: 2.
     */
    .x-hero-grid {
        grid-template-columns: 1fr;
        gap: var(--x-space-md);
    }

    .x-hero-content {
        order: 1;
    }

    .x-hero-image {
        order: 2;
    }

    .x-hero-subline {
        max-width: 100%;
    }

    .x-hero-image img {
        max-width: 100%;
        border-radius: var(--x-radius-md);
    }

    /**
     * Buttons stack vertically on very small screens.
     */
    .x-hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .x-hero-buttons .x-btn-primary,
    .x-hero-buttons .x-btn-secondary {
        justify-content: center;
        text-align: center;
    }
}