/**
 * Template: Homepage (tmpl-homepage) Styles
 * ===========================================
 *
 * Layout and responsive styles for homepage-specific sections:
 * - Story cards grid (3-column, responsive)
 * - Full-width CTA bar at bottom
 *
 * Dependencies: custom-tokens.css, global-classes.css
 * Requirements: 6.1, 6.2, 6.3, 6.4, 7.1, 7.2, 7.3, 7.4
 *
 * @package Xenopz
 */

/* =========================================================================
   STORY CARDS SECTION
   ========================================================================= */

/**
 * Section header — centered intro text above the card grid.
 */
.x-homepage-stories__header {
    text-align: center;
    margin-bottom: var(--x-space-xl);
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.x-homepage-stories__header h2 {
    margin: 0 0 var(--x-space-sm) 0;
}

.x-homepage-stories__subtext {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--x-muted);
    margin: 0;
}

/**
 * .x-homepage-stories__grid
 * 3-column grid for story cards. Equal height cards via implicit stretch.
 */
.x-homepage-stories__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--x-space-lg);
}

/**
 * Card link wrapper — makes the image area clickable while
 * keeping the card structure semantic.
 */
.x-card-story__link {
    display: block;
    border-radius: var(--x-radius-md);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.x-card-story__link:hover,
.x-card-story__link:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--x-shadow-hover);
}

.x-card-story__link:focus-visible {
    outline: 2px solid var(--x-orange-500);
    outline-offset: 2px;
}

/**
 * CTA button inside story card — aligns to bottom of flex column.
 */
.x-card-story__cta {
    margin-top: auto;
    align-self: flex-start;
}

/* =========================================================================
   FULL-WIDTH CTA SECTION
   ========================================================================= */

/**
 * .x-homepage-cta__inner
 * Centered text block with CTAs. Creates visual focus at page bottom.
 */
.x-homepage-cta__inner {
    text-align: center;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    padding: var(--x-space-xl) 0;
}

.x-homepage-cta__inner h2 {
    margin: 0 0 var(--x-space-sm) 0;
}

.x-homepage-cta__text {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--x-ink);
    margin: 0 0 var(--x-space-lg) 0;
}

/**
 * .x-homepage-cta__buttons
 * Button group — horizontal layout, centered, with gap.
 */
.x-homepage-cta__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--x-space-sm);
    justify-content: center;
    align-items: center;
}

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

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

    /* Third card spans full width on tablet for visual balance */
    .x-homepage-stories__grid .x-card-story:nth-child(3) {
        grid-column: 1 / -1;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }
}

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

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

    .x-homepage-stories__grid .x-card-story:nth-child(3) {
        max-width: none;
        grid-column: auto;
    }

    .x-homepage-stories__header {
        text-align: left;
    }

    .x-homepage-cta__inner {
        text-align: left;
        padding: var(--x-space-lg) 0;
    }

    .x-homepage-cta__buttons {
        justify-content: flex-start;
        flex-direction: column;
        align-items: stretch;
    }

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