/*
 * Front Page — Newspaper-style magazine layout (xenword-theme)
 *
 * Boxed/centered grid that mirrors tuxreports.com. Aligns to the 1180px width of
 * the TuxReports/Nav add-on chrome (masthead + carousel). All modules are driven
 * by template-parts/front/* and inc/frontpage-data.php.
 */

/* ---- Container ---------------------------------------------------------- */
.fp {
    max-width: 1180px;
    margin: 0 auto;
    padding: 4px 20px 30px;
    box-sizing: border-box;
    background: #fff;
    color: #222;
}

.fp a { text-decoration: none; }
.fp a:hover { text-decoration: underline; }

/* ---- Hero row (featured lead + widgets) ------------------------------- */
.fp-row--hero {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0;
    padding: 16px 0 24px;
    align-items: start;
}
.fp-hero-main { min-width: 0; padding-right: 30px; }
.fp-hero-aside { min-width: 0; padding-left: 30px; border-left: 1px solid #e2e2e2; }

/* ---- Body: two persistent columns (main ⅔ + rail ⅓) ------------------- */
.fp-body {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0;
    align-items: start;
    border-top: 1px solid #d9d9d9;
}
.fp-main { min-width: 0; padding: 0 30px 0 0; }
.fp-rail { min-width: 0; padding: 0 0 0 30px; border-left: 1px solid #e2e2e2; }

/* Stacked blocks within each column, separated by thin gray rules. */
.fp-block { padding: 24px 0; border-top: 1px solid #d9d9d9; }
.fp-main > .fp-block:first-child { border-top: 0; padding-top: 22px; }
.fp-rail-block { padding-top: 22px; }
.fp-rail-block + .fp-rail-block { border-top: 1px solid #d9d9d9; }
.fp-rail-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---- Colored category label + header rule ------------------------------ */
.fp-module-head {
    margin: 0 0 14px;
    border-bottom: 2px solid #1a1a1a;
    line-height: 1;
}
.fp-cat-label {
    display: inline-block;
    position: relative;
    bottom: -2px;
    background: var(--cat-color, #c0392b);
    color: #fff;
    font: 700 10px/1.4 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 2px 7px;
    border-radius: 2px;
}
a.fp-cat-label:hover { text-decoration: none; opacity: .92; color: #fff; }

/* Titles never underline on hover. */
.fp-lead-title a:hover,
.fp-item-title a:hover,
.fp-card-title a:hover { text-decoration: none; }

/* ---- Lead article (hero + section lead) -------------------------------- */
.fp-lead--lead { display: flex; gap: 20px; align-items: flex-start; }
.fp-lead--lead .fp-lead-body { order: 1; flex: 1 1 0; min-width: 0; }
.fp-lead--lead .fp-lead-thumb { order: 2; flex: 0 0 50%; }

.fp-lead-thumb { display: block; }
.fp-lead-thumb img { width: 100%; height: auto; display: block; }

/* Lead order: title, then tag, then excerpt (matches the live front page). */
.fp-lead-title {
    margin: 0 0 10px;
    font: 700 26px/1.22 Georgia, "Times New Roman", serif;
}
.fp-lead-body .fp-cat-label { margin: 0 0 12px; }
.fp-lead-title a { color: #1a1a1a; }
.fp-lead-excerpt {
    margin: 0;
    font: 400 15px/1.6 Georgia, "Times New Roman", serif;
    color: #555;
}

/* ---- Hero widget area (top-right column) ------------------------------ */
.fp-widgets { overflow: hidden; } /* clip the Members Online rule to the column */
.fp-widgets .widget,
.fp-widgets .block-container { margin: 0 0 22px; }
.fp-widgets .widget:last-child { margin-bottom: 0; }

/* "Members Online": dark label box with a bottom-justified rule extending right.
   ("Your Community Profile" keeps its native XenForo block header.) */
.fp-widgets .widget-title {
    display: block;
    width: fit-content;
    max-width: 100%;
    position: relative;
    margin: 0 0 14px;
    padding: 5px 12px;
    background: #1a1a1a;
    color: #fff;
    font: 700 13px/1.3 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.fp-widgets .widget-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 100%;
    width: 100vw;
    border-bottom: 2px solid #1a1a1a;
}
.fp-widgets-hint {
    margin: 0;
    padding: 14px;
    border: 1px dashed #c9c9c9;
    color: #888;
    font-size: 13px;
}

/* ---- Section blocks (left column) ------------------------------------- */
.fp-block--section .fp-lead--lead { margin-bottom: 16px; }

/* Secondary stories in inner columns (two-up), e.g. the Politics row, with a
   light gray divider between columns. */
.fp-section-secondaries {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-top: 2px;
}
.fp-section-secondaries > .fp-item { border-bottom: 0; padding: 0 26px; }
.fp-section-secondaries > .fp-item:first-child { padding-left: 0; }
.fp-section-secondaries > .fp-item:last-child { padding-right: 0; }
.fp-section-secondaries > .fp-item:not(:first-child) { border-left: 1px solid #e2e2e2; }

/* Section lead body text in two columns (Economy-style). */
.fp-block--section .fp-lead--lead .fp-lead-excerpt {
    column-count: 2;
    column-gap: 26px;
}

/* ---- List module (right column) --------------------------------------- */
.fp-module-list .fp-item:last-child { border-bottom: 0; }

.fp-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #ededed;
    align-items: flex-start;
}
.fp-item-thumb { flex: 0 0 74px; }
.fp-item-thumb img {
    width: 74px; height: 74px;
    object-fit: cover; display: block;
}
.fp-item-body { flex: 1 1 0; min-width: 0; }
.fp-item-title { margin: 0 0 4px; font: 700 16px/1.3 Georgia, "Times New Roman", serif; }
.fp-item-title a { color: #1a1a1a; }
.fp-item-excerpt { margin: 0 0 4px; font-size: 13px; line-height: 1.5; color: #666; }
.fp-item-date { font-size: 11px; color: #999; }

.fp-item--text { display: block; }
.fp-item--text .fp-item-title { font-size: 17px; }
.fp-item--text .fp-item-excerpt { font-size: 13.5px; }
.fp-item--secondary { border-top: 1px solid #ededed; }

/* ---- Split section (Science) ------------------------------------------- */
.fp-split-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0;
    align-items: stretch;
}
.fp-split-lead { padding-right: 28px; }
.fp-split-side {
    padding-left: 28px;
    border-left: 1px solid #e2e2e2;
}
/* Science lead: title + tag + image on top, then 2-column body + Read more. */
.fp-sci-top { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 14px; }
.fp-sci-head { flex: 1 1 0; min-width: 0; }
.fp-sci-head .fp-lead-title { margin: 0 0 10px; font: 700 21px/1.25 Georgia, "Times New Roman", serif; }
.fp-sci-head .fp-lead-title a { color: #1a1a1a; }
.fp-sci-head .fp-cat-label { margin: 0; }
.fp-sci-thumb { flex: 0 0 42%; display: block; }
.fp-sci-thumb img { width: 100%; height: auto; display: block; }
.fp-sci-body {
    column-count: 2;
    column-gap: 26px;
    font: 400 14px/1.6 Georgia, "Times New Roman", serif;
    color: #555;
}
.fp-readmore {
    display: inline-block;
    margin-top: 16px;
    padding: 7px 16px;
    border: 1px solid #1a1a1a;
    color: #1a1a1a;
    font: 700 11px/1.4 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.fp-readmore:hover { background: #1a1a1a; color: #fff; text-decoration: none; }
.fp-split-side .fp-item:last-child { border-bottom: 0; }

/* ---- Card strip (Schooling) — full width, single no-wrap row ---------- */
.fp-cardstrip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 20px;
}
.fp-card-thumb { display: block; }
.fp-card-thumb img { width: 100%; height: 120px; object-fit: cover; display: block; }
.fp-card-title { margin: 8px 0 0; font: 700 15px/1.3 Georgia, "Times New Roman", serif; }
.fp-card-title a { color: #1a1a1a; }

/* ---- "Check out other categories" cloud ------------------------------- */
.fp-cloud {
    margin: 16px 0 4px;
    padding-top: 12px;
    border-top: 1px solid #ededed;
    font-size: 13px;
    line-height: 1.9;
}
.fp-cloud-label { font-weight: 700; color: #1a1a1a; margin-right: 6px; }
.fp-cloud a { color: #c0392b; margin-right: 12px; }

/* ---- No-image placeholder --------------------------------------------- */
.fp-noimg {
    display: block;
    width: 100%;
    min-height: 90px;
    height: 100%;
    background: repeating-linear-gradient(45deg, #ededed, #ededed 10px, #e4e4e4 10px, #e4e4e4 20px);
}

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 880px) {
    /* Collapse to one column: hero widgets and rail drop below the content. */
    .fp-row--hero,
    .fp-body,
    .fp-split-grid,
    .fp-section-secondaries { grid-template-columns: 1fr; gap: 22px; }
    .fp-section-secondaries > .fp-item { padding: 0; border-left: 0; }
    .fp-block--section .fp-lead--lead .fp-lead-excerpt { column-count: 1; }
    .fp-hero-main,
    .fp-main,
    .fp-split-lead { padding-right: 0; }
    .fp-hero-aside,
    .fp-rail,
    .fp-split-side {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid #e2e2e2;
        padding-top: 18px;
    }
    .fp-lead--lead,
    .fp-lead--split,
    .fp-sci-top { flex-direction: column; }
    .fp-lead--lead .fp-lead-thumb,
    .fp-lead--split .fp-lead-thumb,
    .fp-sci-thumb { flex-basis: auto; width: 100%; }
    .fp-sci-body { column-count: 1; }
    .fp-lead-title { font-size: 23px; }
}

@media (max-width: 680px) {
    .fp-cardstrip {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-template-columns: repeat(2, 1fr);
    }
}