/* ============================================================================
 * Component: Page templates (article, archive, hero, 404, search)
 * ========================================================================= */

@layer components {

    /* === Hero (front-page) =============================================== */
    .hero {
        padding-block: var(--hlife-space-20) var(--hlife-space-16);
        background: linear-gradient(
            135deg,
            var(--hlife-color-sand-light) 0%,
            var(--hlife-color-sand) 100%
        );
        text-align: center;
    }

    .hero__inner {
        max-width: 800px;
    }

    .hero__title {
        font-size: var(--hlife-text-5xl);
        font-weight: var(--hlife-fw-semibold);
        margin-block-end: var(--hlife-space-4);
        text-wrap: balance;
    }

    .hero__tagline {
        font-size: var(--hlife-text-xl);
        color: var(--hlife-text-secondary);
        font-style: italic;
        margin-block-end: var(--hlife-space-8);
        max-width: 600px;
        margin-inline: auto;
    }

    .hero__cta {
        display: flex;
        gap: var(--hlife-space-4);
        justify-content: center;
        flex-wrap: wrap;
        margin-block-end: var(--hlife-space-6);
    }

    .hero__trust {
        margin-block-start: var(--hlife-space-4);
    }

    /* === Section header ================================================== */
    .section-header {
        text-align: center;
        margin-block-end: var(--hlife-space-10);
    }

    .section-header__title {
        font-size: var(--hlife-text-3xl);
    }

    /* === Posts grid ====================================================== */
    .posts-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: var(--hlife-space-6);
    }

    @media (min-width: 1024px) {
        .posts-grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    @media (min-width: 768px) and (max-width: 1023px) {
        .posts-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    /* === Post card (extends .card) ======================================= */
    .post-card .card__media {
        display: block;
    }

    .post-card .card__meta {
        display: flex;
        align-items: center;
        gap: var(--hlife-space-2);
        margin-block-end: var(--hlife-space-2);
        font-size: var(--hlife-text-xs);
        color: var(--hlife-text-tertiary);
        flex-wrap: wrap;
    }

    .post-card .card__date {
        white-space: nowrap;
    }

    .post-card .card__sep {
        opacity: 0.5;
    }

    .post-card .card__category {
        color: var(--hlife-color-emerald);
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: var(--hlife-tracking-wide);
        font-weight: var(--hlife-fw-medium);
    }

    .post-card .card__category:hover {
        text-decoration: underline;
    }

    .post-card .card__title {
        font-size: var(--hlife-text-xl);
        line-height: var(--hlife-lh-snug);
        margin-block-end: var(--hlife-space-3);
    }

    .post-card .card__link {
        color: var(--hlife-text-brand);
        text-decoration: none;
        background-image: linear-gradient(currentColor, currentColor);
        background-size: 0 1px;
        background-repeat: no-repeat;
        background-position: 0 100%;
        transition: background-size var(--hlife-duration-default) var(--hlife-ease-default);
    }

    .post-card .card__link:hover {
        color: var(--hlife-color-emerald);
        background-size: 100% 1px;
    }

    /* compact variant */
    .post-card--compact {
        display: grid;
        grid-template-columns: 200px 1fr;
        gap: var(--hlife-space-4);
        align-items: stretch;
    }

    .post-card--compact .card__media {
        aspect-ratio: 1;
    }

    @media (max-width: 600px) {
        .post-card--compact {
            grid-template-columns: 100px 1fr;
        }
    }

    /* === Article (single + page) ========================================= */
    .article {
        max-width: 760px;
        margin-inline: auto;
    }

    .article__header {
        margin-block-end: var(--hlife-space-8);
    }

    .article__title {
        font-size: var(--hlife-text-4xl);
        margin-block-end: var(--hlife-space-4);
    }

    .article__meta {
        display: flex;
        flex-wrap: wrap;
        gap: var(--hlife-space-2);
        align-items: center;
        font-size: var(--hlife-text-sm);
        color: var(--hlife-text-tertiary);
    }

    .article__sep {
        opacity: 0.5;
    }

    .article__author-name {
        color: var(--hlife-text-secondary);
        font-weight: var(--hlife-fw-medium);
    }

    .article__categories a {
        color: var(--hlife-color-emerald);
        text-decoration: none;
    }

    .article__categories a:hover {
        text-decoration: underline;
    }

    .article__hero {
        margin-block-end: var(--hlife-space-8);
        margin-inline: calc(var(--hlife-container-padding) * -1);
    }

    @media (min-width: 768px) {
        .article__hero {
            margin-inline: 0;
            border-radius: var(--hlife-radius-xl);
            overflow: hidden;
        }
    }

    .article__hero-img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }

    .article__content {
        font-size: var(--hlife-text-lg);
        line-height: var(--hlife-lh-relaxed);
    }

    .article__content > * + * {
        margin-block-start: var(--hlife-space-4);
    }

    .article__content h2 {
        margin-block-start: var(--hlife-space-12);
    }

    .article__content h3 {
        margin-block-start: var(--hlife-space-8);
    }

    .article__footer {
        margin-block-start: var(--hlife-space-12);
        padding-block-start: var(--hlife-space-6);
        border-block-start: 1px solid var(--hlife-border-subtle);
    }

    .article__tags {
        display: flex;
        flex-wrap: wrap;
        gap: var(--hlife-space-2);
        align-items: center;
        font-size: var(--hlife-text-sm);
    }

    .article__tags-label {
        color: var(--hlife-text-tertiary);
        margin-inline-end: var(--hlife-space-2);
    }

    .article__tag {
        color: var(--hlife-color-navy);
        text-decoration: none;
        padding: var(--hlife-space-1) var(--hlife-space-3);
        background-color: var(--hlife-color-sand-light);
        border-radius: var(--hlife-radius-pill);
        transition: var(--hlife-transition-colors);
    }

    .article__tag:hover {
        background-color: var(--hlife-color-sand);
        color: var(--hlife-color-navy);
    }

    /* === Article navigation ============================================== */
    .article-nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--hlife-space-4);
        margin-block-start: var(--hlife-space-12);
        max-width: 760px;
        margin-inline: auto;
    }

    @media (max-width: 640px) {
        .article-nav {
            grid-template-columns: 1fr;
        }
    }

    .article-nav__link {
        display: flex;
        flex-direction: column;
        gap: var(--hlife-space-1);
        padding: var(--hlife-space-4);
        background-color: var(--hlife-color-sand-light);
        border-radius: var(--hlife-radius-lg);
        text-decoration: none;
        transition: var(--hlife-transition-default);
    }

    .article-nav__link:hover {
        background-color: var(--hlife-color-sand);
        transform: translateY(-2px);
    }

    .article-nav__link--next {
        text-align: end;
    }

    .article-nav__direction {
        font-size: var(--hlife-text-xs);
        text-transform: uppercase;
        letter-spacing: var(--hlife-tracking-wide);
        color: var(--hlife-text-tertiary);
    }

    .article-nav__title {
        font-weight: var(--hlife-fw-medium);
        color: var(--hlife-color-navy);
        line-height: var(--hlife-lh-snug);
    }

    /* === Archive header ================================================== */
    .archive-header {
        text-align: center;
        margin-block-end: var(--hlife-space-12);
    }

    .archive-header__title {
        font-size: var(--hlife-text-3xl);
    }

    .archive-header__description {
        max-width: 600px;
        margin-inline: auto;
        margin-block-start: var(--hlife-space-3);
        color: var(--hlife-text-secondary);
    }

    .archive-header__form {
        max-width: 480px;
        margin-inline: auto;
        margin-block-start: var(--hlife-space-6);
    }

    /* === Search results ================================================== */
    .search-results__count {
        text-align: center;
        color: var(--hlife-text-secondary);
        margin-block-end: var(--hlife-space-8);
        font-size: var(--hlife-text-sm);
    }

    /* === Search form ===================================================== */
    .search-form {
        display: flex;
        gap: var(--hlife-space-2);
        align-items: stretch;
    }

    .search-form__input {
        flex: 1;
        padding: var(--hlife-space-3) var(--hlife-space-4);
        border: 1px solid var(--hlife-border-default);
        border-radius: var(--hlife-radius-md);
        background-color: var(--hlife-bg-primary);
        font-size: var(--hlife-text-base);
        color: var(--hlife-text-primary);
        transition: var(--hlife-transition-colors);
    }

    .search-form__input:focus {
        outline: none;
        border-color: var(--hlife-color-emerald);
        box-shadow: var(--hlife-focus-ring);
    }

    .search-form__submit {
        flex-shrink: 0;
    }

    /* === Empty state ===================================================== */
    .empty-state {
        text-align: center;
        padding-block: var(--hlife-space-16);
        color: var(--hlife-text-secondary);
    }

    /* === Pagination (the_posts_pagination) =============================== */
    .pagination,
    .nav-links {
        display: inline-flex;
        gap: var(--hlife-space-1);
        flex-wrap: wrap;
        justify-content: center;
    }

    .pagination .page-numbers,
    .nav-links .page-numbers {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2.5rem;
        height: 2.5rem;
        padding: 0 var(--hlife-space-3);
        color: var(--hlife-text-primary);
        text-decoration: none;
        background-color: var(--hlife-bg-primary);
        border: 1px solid var(--hlife-border-default);
        border-radius: var(--hlife-radius-md);
        transition: var(--hlife-transition-colors);
    }

    .pagination .page-numbers:hover,
    .nav-links .page-numbers:hover {
        background-color: var(--hlife-color-sand-light);
        border-color: var(--hlife-color-navy);
    }

    .pagination .page-numbers.current,
    .nav-links .page-numbers.current {
        background-color: var(--hlife-color-navy);
        color: var(--hlife-color-white);
        border-color: var(--hlife-color-navy);
    }

    /* === 404 ============================================================= */
    .error-404 {
        padding-block: var(--hlife-space-20);
        text-align: center;
    }

    .error-404__inner {
        max-width: 600px;
        margin-inline: auto;
    }

    .error-404__code {
        font-family: var(--hlife-font-serif);
        font-size: clamp(5rem, 4rem + 5vw, 9rem);
        font-weight: var(--hlife-fw-bold);
        line-height: 1;
        color: var(--hlife-color-sand-dark);
        margin: 0;
    }

    .error-404__title {
        font-size: var(--hlife-text-3xl);
        margin-block: var(--hlife-space-4);
    }

    .error-404__description {
        color: var(--hlife-text-secondary);
        margin-block-end: var(--hlife-space-6);
    }

    .error-404__form {
        max-width: 480px;
        margin-inline: auto;
        margin-block-end: var(--hlife-space-6);
    }

    .error-404__actions {
        display: flex;
        gap: var(--hlife-space-3);
        justify-content: center;
        flex-wrap: wrap;
    }
}