/* ============================================================
   HOMEPAGE — Verge-inspired editorial layout
   ============================================================ */

/*
  TOC
   1. Container
   2. Featured article
   3. Featured hero overlay
   4. Featured category / title / meta
   5. Sidebar
   6. Shared list items (sidebar + more)
   7. Format icons
   8. Meta & tags
   9. Empty state
  10. More posts
  11. Responsive
  12. Dark mode
*/

/* Section labels: canonical class is .section-label (main.css).
   .home-section-label and .page-title are legacy aliases in the same grouped selector. */

/* Two-column grid: shared rule lives in main.css as .two-col-layout, .home-two-column */


/* ---- 1. Container ---- */

/* Widen the content area on the homepage only */
.home .site-content {
    max-width: var(--content-width-wide);
}


/* ---- 2. Featured article ---- */

.home-featured-article {
    padding-right: 2.5em;
    border-right: 1px solid var(--color-border);
}

.home-featured-image-link {
    display: block;
    margin-bottom: 1em;
}

/* ---- 3. Featured hero overlay ---- */

.home-featured-hero {
    position: relative;
    margin-bottom: 1em;
}

.home-featured-hero .home-featured-image-link {
    margin-bottom: 0;
}

.home-featured-hero .entry-header {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: var(--color-header);
    border-left: 9px solid var(--color-accent);
    padding: 1em 1.25em 1em 1em;
    z-index: 1;
    width: fit-content;
    max-width: 60%;
}

.home-featured-hero .home-featured-title a,
.home-featured-hero .home-featured-title a:visited,
.home-featured-hero .home-featured-title a:hover {
    color: #ffffff;
}

.home-featured-hero .home-featured-category {
    margin-bottom: 0.15em;
    letter-spacing: 0.15em;
}

.home-featured-hero .home-featured-category a,
.home-featured-hero .home-featured-category a:visited,
.home-featured-hero .home-featured-category a:hover {
    color: var(--color-accent);
}

.home-featured-hero .home-featured-meta {
    color: #ffffff;
}

/* img styles live in main.css under .img-cover */


/* ---- 4. Featured category / title / meta ---- */

.home-featured-category {
    font-size: 0.7em;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.4em;
}

.home-featured-category a {
    color: var(--color-link);
    text-decoration: none;
}

.home-featured-category a:hover {
    text-decoration: underline;
}

.home-featured-title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 2.16em;
    line-height: 1.1025em;
    padding: 0;
    margin: 0;
}

.home-featured-title a {
    color: var(--color-text);
    text-decoration: none;
}

.home-featured-title a:hover {
    text-decoration: underline;
}

.home-featured-meta {
    font-size: 0.75em;
    color: var(--color-light-text);
    margin-bottom: 0.8em;
}

.home-featured-article .entry-content {
    font-size: 1em;
    line-height: 1.6em;
    padding: 0;
    color: var(--color-text);
}

/* ---- 5. Sidebar ---- */

.home-sidebar-articles {
    padding-left: 2em;
}

/* ---- 6. Shared list items (sidebar + more) ---- */

ul.home-sidebar-list,
ul.home-more-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.home-sidebar-item,
.home-more-item {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 0.75em;
    align-items: flex-start;
    border-top: 2px solid var(--color-text);
    list-style: none;
}

.home-sidebar-item { padding: 0.9em 0; }
.home-more-item    { padding: 0.75em 0; }

/* When there's no thumbnail, item spans full width */
.home-sidebar-item:not(:has(.home-sidebar-thumb-link)),
.home-more-item:not(:has(.home-more-thumb-link)) {
    grid-template-columns: 1fr;
}

.home-sidebar-thumb-link,
.home-more-thumb-link {
    display: block;
}

.home-sidebar-thumb-link img,
.home-more-thumb-link img {
    width: 90px;
    height: 65px;
    object-fit: cover;
    display: block;
    border: 3px solid var(--color-image-border);
    box-sizing: border-box;
}

.home-sidebar-item-body,
.home-more-item-body {
    display: flex;
    flex-direction: column;
}

.home-sidebar-item-body { gap: 0.25em; }
.home-more-item-body    { gap: 0.2em; }

.home-sidebar-title,
.home-more-title {
    font-family: var(--font-body);
    font-weight: 700;
    padding: 0;
    margin: 0;
}

.home-sidebar-title { font-size: 0.9em;  line-height: 1.3em; }
.home-more-title    { font-size: 0.85em; line-height: 1.35em; }

.home-sidebar-title a,
.home-more-title a {
    color: var(--color-text);
    text-decoration: none;
}

.home-sidebar-title a:hover,
.home-more-title a:hover {
    color: var(--color-text);
    text-decoration: underline;
}

/* ---- 7. Format icons ---- */

/* Format type icon prefixed to each sidebar title */
.home-sidebar-format-icon {
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-right: 0.25em;
    vertical-align: middle;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.45;
    flex-shrink: 0;
}

.home-sidebar-format-icon--standard {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
}

.home-sidebar-format-icon--link {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
}

.home-sidebar-format-icon--video {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='15' rx='2' ry='2'/%3E%3Cpolyline points='17 2 12 7 7 2'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
    .home-sidebar-format-icon { filter: invert(1); }
}

/* ---- 8. Meta & tags ---- */

.home-sidebar-meta,
.home-more-meta {
    display: flex;
    align-items: center;
    gap: 0.15em 0.6em;
    font-size: 0.7em;
    color: var(--color-light-text);
    flex-wrap: wrap;
}

.home-sidebar-date,
.home-more-date {
    flex-shrink: 0;
}

.home-sidebar-tags,
.home-more-tags {
    display: flex;
    gap: 0.4em;
    flex-wrap: nowrap;
    flex-shrink: 0;
    font-size: 0.8em;
}

.home-sidebar-tag,
.home-sidebar-tag:visited,
.home-more-tag,
.home-more-tag:visited {
    color: var(--color-faded-text);
    text-decoration: none;
}

.home-sidebar-tag:hover,
.home-more-tag:hover {
    color: var(--color-link);
    text-decoration: underline;
}

/* ---- 9. Empty state ---- */

.home-sidebar-empty {
    font-size: 0.85em;
    color: var(--color-light-text);
    font-style: italic;
    border-top: 2px solid var(--color-text);
    padding-top: 1em;
}

/* ---- 10. More posts ---- */

.home-more-label {
    margin-top: 5em;
}

/* ---- 11. Responsive ---- */

@media screen and (max-width: 780px) {
    .home-two-column {
        grid-template-columns: 1fr;
    }

    .home-featured-article {
        padding-right: 0;
        border-right: none;
        padding-bottom: 2em;
        margin-bottom: 2em;
    }

    .home-sidebar-articles {
        padding-left: 0;
    }

    /* Hero overlay: revert to standard flow on mobile */
    .home-featured-hero .entry-header {
        position: static;
        background: none;
        border-left: none;
        padding: 0;
        width: auto;
        max-width: none;
        margin-top: 1em;
    }

    .home-featured-hero .home-featured-title a,
    .home-featured-hero .home-featured-title a:visited,
    .home-featured-hero .home-featured-title a:hover {
        color: var(--color-text);
    }

    .home-featured-hero .home-featured-category a,
    .home-featured-hero .home-featured-category a:visited,
    .home-featured-hero .home-featured-category a:hover {
        color: var(--color-link);
    }

    .home-featured-hero .home-featured-meta {
        color: var(--color-light-text);
    }
}

/* ---- 12. Dark mode ---- */

@media (prefers-color-scheme: dark) {
    /* Hardcoded border colors not covered by CSS variable overrides in theme.css */
    .home-featured-article {
        border-right-color: #2A3A4A;
    }
}