@charset "UTF-8";
/* ==========================================================
   Hero
========================================================== */
.home-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 520px;
    padding-block: var(--space-9);
    background-color: var(--bg-sub);
    overflow: hidden;
}

.home-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
}

/* ---------- Hero Label ---------- */
.home-hero-label {
    margin: 0 0 var(--space-3);

    font-family: var(--font-sans);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    letter-spacing: 0.12em;
}

/* ---------- Hero Title ---------- */
.home-hero-title {
    margin: 0 0 var(--space-5);

    font-family: var(--font-main);
    font-size: var(--font-2xl);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);

    color: var(--text-main);
}

/* ---------- Hero Text ---------- */
.home-hero-text {
    margin: 0;

    font-family: var(--font-main);
    font-size: var(--font-base);
    line-height: var(--line-height-base);
}

.home-hero-text + .home-hero-text {
    margin-top: var(--space-2);
}

/* ---------- Hero Action ---------- */
.home-hero-action {
    margin-top: var(--space-6);
}

/* ==========================================================
   Latest Articles
========================================================== */
.home-latest {
    padding-block: var(--space-9);
}

.home-latest-grid {
    display: grid;

    grid-template-columns: 1fr;

    gap: var(--space-6);

    width: 100%;
}

/* ---------- Latest Article Card ---------- */
.home-latest-grid .article-card {
    width: 100%;
    max-width: 360px;
    margin-inline: auto;
}

/* ==========================================================
   More Link
========================================================== */
.home-more {
    display: flex;
    justify-content: center;

    margin-top: var(--space-6);
}

.home-more-link {
    display: inline-flex;
    align-items: center;

    gap: var(--space-2);

    font-family: var(--font-sans);
    font-size: var(--font-sm);
    line-height: var(--line-height-tight);

    color: var(--text-sub);

    transition:
        color var(--transition-base),
        transform var(--transition-base);
}

.home-more-link:hover {
    color: var(--text-main);

    opacity: 1;

    transform: translateX(4px);
}

/* ==========================================================
   Categories
========================================================== */
.home-categories {
    padding-block: var(--space-9);

    background-color: var(--bg-sub);
}

.home-category-list {
    display: grid;

    grid-template-columns: 1fr;

    gap: var(--space-3);

    margin: 0;
    padding: 0;

    list-style: none;
}

.home-category-item {
    margin: 0;
    padding: 0;
}

/* ---------- Category Card ---------- */
.home-category-card {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 56px;

    padding: var(--space-3) var(--space-4);

    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);

    background-color: var(--bg-card);

    transition:
        background-color var(--transition-base),
        border-color var(--transition-base),
        transform var(--transition-base);
}

.home-category-card:hover {
    background-color: var(--hover-soft);

    border-color: var(--accent-beige);

    opacity: 1;

    transform: translateY(-2px);
}

/* ---------- Category Name ---------- */
.home-category-name {
    font-family: var(--font-main);
    font-size: var(--font-sm);
    line-height: var(--line-height-tight);

    color: var(--text-main);
}

/* ---------- Category Count ---------- */
.home-category-count {
    margin-left: auto;

    padding-inline: var(--space-2);

    font-family: var(--font-sans);
    font-size: var(--font-xs);
    line-height: var(--line-height-tight);

    color: var(--text-sub);
}

/* ---------- Category Arrow ---------- */
.home-category-arrow {
    font-family: var(--font-sans);
    font-size: var(--font-sm);

    color: var(--accent-blue);

    transition: transform var(--transition-base);
}

.home-category-card:hover .home-category-arrow {
    transform: translateX(4px);
}

/* ==========================================================
   Recommended Articles
========================================================== */
.home-popular {
    padding-block: var(--space-9);
}

.home-popular-grid {
    display: grid;

    grid-template-columns: 1fr;

    gap: var(--space-6);

    width: 100%;
}

/* ---------- Recommended Article Card ---------- */
.home-popular-grid .article-card {
    width: 100%;
    max-width: 360px;
    margin-inline: auto;
}

/* ==========================================================
   Recommended Services
========================================================== */
.home-services {
    padding-block: var(--space-9);

    background-color: var(--bg-sub);
}

.home-services-grid {
    display: grid;

    grid-template-columns: 1fr;

    gap: var(--space-5);

    width: 100%;
}

/* ---------- Service Card ---------- */
.home-service-card {
    display: flex;
    flex-direction: column;

    height: 100%;

    padding: var(--space-5);

    background-color: var(--bg-card);

    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);

    transition:
        box-shadow var(--transition-base),
        transform var(--transition-base);
}

.home-service-card:hover {
    box-shadow: var(--shadow-sm);

    transform: translateY(-2px);
}

/* ---------- Service Content ---------- */
.home-service-content {
    flex: 1;
}

/* ---------- Service Label ---------- */
.home-service-label {
    margin: 0 0 var(--space-2);

    font-family: var(--font-sans);
    font-size: var(--font-xs);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    letter-spacing: 0.08em;

    color: var(--accent-beige);

    text-transform: uppercase;
}

/* ---------- Service Title ---------- */
.home-service-title {
    margin: 0;

    font-family: var(--font-main);
    font-size: var(--font-lg);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-tight);

    color: var(--text-main);
}

/* ---------- Service Text ---------- */
.home-service-text {
    margin: var(--space-3) 0 0;

    font-family: var(--font-main);
    font-size: var(--font-sm);
    line-height: var(--line-height-base);

    color: var(--text-sub);
}

/* ---------- Service Action ---------- */
.home-service-action {
    margin-top: var(--space-5);
}

/* ---------- Service Link ---------- */
.home-service-link {
    display: inline-flex;
    align-items: center;

    gap: var(--space-2);

    font-family: var(--font-sans);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-medium);

    color: var(--text-main);

    transition:
        color var(--transition-base),
        transform var(--transition-base);
}

.home-service-link:hover {
    color: var(--accent-blue);

    opacity: 1;

    transform: translateX(4px);
}

/* ==========================================================
   More Links
========================================================== */
.home-more-links {
    padding-block: var(--space-9);

    background-color: var(--bg-main);
}

.home-more-links-inner {
    display: grid;

    grid-template-columns: 1fr;

    gap: var(--space-4);

    width: 100%;
}

/* ---------- More Link Card ---------- */
.home-more-link-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 140px;

    padding: var(--space-5);

    background-color: var(--bg-card);

    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);

    transition:
        background-color var(--transition-base),
        border-color var(--transition-base),
        box-shadow var(--transition-base),
        transform var(--transition-base);
}

.home-more-link-card:hover {
    background-color: var(--hover-soft);

    border-color: var(--accent-beige);

    box-shadow: var(--shadow-sm);

    opacity: 1;

    transform: translateY(-2px);
}

/* ---------- More Link Label ---------- */
.home-more-link-label {
    margin-bottom: var(--space-2);

    font-family: var(--font-sans);
    font-size: var(--font-xs);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    letter-spacing: 0.1em;

    color: var(--accent-beige);

    text-transform: uppercase;
}

/* ---------- More Link Title ---------- */
.home-more-link-title {
    padding-right: var(--space-6);

    font-family: var(--font-main);
    font-size: var(--font-lg);
    line-height: var(--line-height-tight);

    color: var(--text-main);
}

/* ---------- More Link Arrow ---------- */
.home-more-link-arrow {
    position: absolute;

    right: var(--space-5);
    bottom: var(--space-5);

    font-family: var(--font-sans);
    font-size: var(--font-md);

    color: var(--accent-blue);

    transition: transform var(--transition-base);
}

.home-more-link-card:hover .home-more-link-arrow {
    transform: translateX(4px);
}

/* ==========================================================
   Empty
========================================================== */
.home-empty {
    margin: 0;
    text-align: center;
    font-size: var(--font-sm);
    color: var(--text-sub);
}

/* ==========================================================
   Tablet / PC
========================================================== */
@media (min-width: 768px) {

    /* ---------- Hero ---------- */
    .home-hero {
        min-height: 600px;

        padding-block: var(--space-10);
    }

    .home-hero-content {
        max-width: 760px;
    }

    .home-hero-title {
        font-size: var(--font-3xl);
    }

    .home-hero-text {
        font-size: var(--font-base);
    }

    /* ---------- Latest Articles ---------- */
    .home-latest-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));

        gap: var(--space-5);
    }

    /* ---------- Recommended Articles ---------- */
    .home-popular-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));

        gap: var(--space-5);
    }

    /* ---------- Categories ---------- */
    .home-category-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));

        gap: var(--space-4);
    }

    /* ---------- Recommended Services ---------- */
    .home-services-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));

        gap: var(--space-5);
    }

    /* ---------- More Links ---------- */
    .home-more-links-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: var(--space-5);
    }
}

/* ==========================================================
   Large PC
========================================================== */
@media (min-width: 1024px) {

    /* ---------- Hero ---------- */
    .home-hero {
        min-height: 640px;
    }

    .home-hero-title {
        font-size: var(--font-4xl);
    }

    .home-hero-decoration--one {
        width: 420px;
        height: 420px;

        top: -160px;
        right: -140px;
    }

    .home-hero-decoration--two {
        width: 300px;
        height: 300px;

        bottom: -170px;
        left: -120px;
    }

    /* ---------- Article Grid ---------- */
    .home-latest-grid,
    .home-popular-grid {
        gap: var(--space-6);
    }
}