/* ==========================================================================
   SC360 Homepage Redesign (v2)
   Loaded ONLY on page-templates/template-front-v2.php — cannot affect
   the live homepage or any other page on the site.
   ========================================================================== */

:root {
    /* Every value below is pulled directly from your live theme's own
       CSS files (royal-news-magazine.css / style.css) — nothing here is
       taken from the design doc. */
    --sc360-accent: #567B95;      /* a, a:hover, a:visited, active nav item */
    --sc360-bg: #FFFFFF;          /* body { background: #fff; } */
    --sc360-text: #272E37;        /* header.entry-header h2.entry-title a — real headline color */
    --sc360-text-muted: #696969;  /* body { color: #696969; } — real body-copy color */
    --sc360-border: #EEEEEE;      /* most-used border/divider color across the theme */
}

.sc360-section {
    background: var(--sc360-bg);
    padding: 30px 0;
}
.sc360-section:not(.sc360-editors-picks) .container {
    border-top: 1px solid var(--sc360-border);
    padding-top: 30px;
}

.sc360-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 20px;
}
.sc360-section-header h2 {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    color: var(--sc360-text);
}
.sc360-editors-picks .sc360-section-header h2 {
    color: var(--sc360-accent);
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.05em;
}
.sc360-view-all {
    font-size: 14px;
    font-weight: 600;
    color: var(--sc360-accent);
    text-decoration: none;
    white-space: nowrap;
}
.sc360-view-all:hover {
    text-decoration: underline;
}

/* -------------------- category badge (eyebrow above headline) -------------------- */
.sc360-cat-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sc360-accent);
    text-decoration: none;
    margin-bottom: 6px;
}
.sc360-cat-badge:hover {
    text-decoration: underline;
}

/* -------------------- post card -------------------- */
.sc360-card {
    margin-bottom: 24px;
}
.sc360-card.no-image {
    border-bottom: 1px solid var(--sc360-border);
    padding-bottom: 14px;
}
.sc360-card-thumb img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    margin-bottom: 12px;
}
.sc360-card-content h3 {
    font-size: 17px;
    line-height: 1.35;
    margin: 0 0 8px;
}
.sc360-card-content h3 a {
    color: var(--sc360-text);
    text-decoration: none;
}
.sc360-card-content h3 a:hover {
    text-decoration: underline;
}
.sc360-card-excerpt {
    font-size: 14px;
    color: var(--sc360-text-muted);
    margin: 0 0 8px;
}
.sc360-card-date {
    font-size: 12px;
    color: var(--sc360-text-muted);
}

/* -------------------- layout helpers -------------------- */
.sc360-three-col .col-md-4 {
    margin-bottom: 20px;
}

/* Grid-based 2-column list (replaces old column-count masonry layout).
   With column-count, each column flows independently, so when one card's
   title wraps to 2 lines, that column's items shift out of alignment
   with the other column. CSS Grid lays items out row-by-row instead —
   both columns in the same row always share that row's height, so a
   longer title in one column pushes both cards in that row down evenly,
   keeping left/right rows aligned. */
.sc360-two-col-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row dense;
    column-gap: 40px;
    row-gap: 0;
}
.sc360-two-col-list .sc360-card {
    break-inside: avoid;
}
/* Card content stretches to fill its grid row, and the date is pinned
   to the bottom — this is what makes short 1-line titles and long
   2-line titles end their row at the same height, keeping left/right
   columns aligned. */
.sc360-two-col-list .sc360-card.no-image {
    display: flex;
    flex-direction: column;
}
.sc360-two-col-list .sc360-card.no-image .sc360-card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.sc360-two-col-list .sc360-card-date {
    margin-top: auto;
    padding-top: 8px;
}

@media (max-width: 767px) {
    .sc360-two-col-list {
        grid-template-columns: 1fr;
    }
}

.sc360-stacked-list .sc360-card {
    margin-bottom: 16px;
}

/* -------------------- Editor's Picks hero slider -------------------- */
.sc360-hero-slider .sc360-card-content h3 {
    font-size: 24px;
}
.sc360-hero-slider .sc360-card-thumb img {
    aspect-ratio: 4 / 3;
}

/* -------------------- newsletter placeholder box -------------------- */
.sc360-newsletter-box {
    border: 1px solid var(--sc360-accent);
    padding: 20px;
    height: 100%;
}
.sc360-newsletter-box .sc360-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sc360-accent);
    margin-bottom: 8px;
}
.sc360-newsletter-box h3 {
    font-size: 18px;
    margin: 0 0 8px;
}
.sc360-newsletter-box p {
    font-size: 13px;
    color: var(--sc360-text-muted);
    margin: 0 0 14px;
}
.sc360-newsletter-form {
    display: flex;
    gap: 8px;
}
.sc360-newsletter-form input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--sc360-border);
    font-size: 13px;
}
.sc360-newsletter-form button {
    background: #000;
    color: #fff;
    border: none;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: not-allowed; /* placeholder is inert until wired to EngageBay */
}

/* -------------------- events placeholder -------------------- */
.sc360-events-placeholder {
    border: 1px dashed var(--sc360-border);
    padding: 60px 20px;
    text-align: center;
    color: var(--sc360-text-muted);
    font-size: 14px;
}

/* -------------------- empty state -------------------- */
.sc360-empty-state {
    padding: 30px 20px;
    text-align: center;
    color: var(--sc360-text-muted);
    font-size: 14px;
    border: 1px dashed var(--sc360-border);
}

/* -------------------- procurement -------------------- */
.sc360-procurement .sc360-section-header h2::after {
    content: "";
}

/* ==========================================================================
   Procurement section — logo badge + right-aligned dates
   Add this to homepage-v2.css
   ========================================================================== */

.sc360-procurement-header h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.sc360-procurement-divider {
    display: inline-block;
    width: 1px;
    height: 28px;
    background: var(--sc360-border-color, #ccc);
}

.sc360-procurement-logo {
    height: 42px;
    width: auto;
    display: inline-block;
}

.sc360-procurement-list {
    display: flex;
    flex-direction: column;
}

.sc360-procurement-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 0;
    border-bottom: 1px solid var(--sc360-border-color, #e5e5e5);
}

.sc360-procurement-item:last-child {
    border-bottom: none;
}

.sc360-procurement-item-main {
    flex: 1;
    min-width: 0;
}

.sc360-procurement-item-date {
    flex-shrink: 0;
    white-space: nowrap;
    color: var(--sc360-date-color, #888);
    font-size: 14px;
    padding-top: 4px;
}

@media (max-width: 767px) {
    .sc360-procurement-item {
        flex-direction: column;
        gap: 6px;
    }

    .sc360-procurement-item-date {
        padding-top: 0;
    }

    /* Logo + "Read more" link stack vertically on mobile instead of
       squeezing side-by-side and stretching the logo.
       Note: .sc360-view-all is a SIBLING of h2 inside
       .sc360-section-header.sc360-procurement-header, not inside the h2 —
       so the header wrapper itself must switch to column, not just the h2. */
    .sc360-procurement-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .sc360-procurement-header h2 {
        flex-direction: row;
    }

    .sc360-procurement-logo {
        height: 36px;
        max-width: 180px;
        object-fit: contain;
    }
}

/* ==========================================================================
   Category tag (badge) colours
   Add this to homepage-v2.css
   Requires sc360_category_badge() to output a slug-based modifier class
   (already updated: sc360-cat-badge--{slug}), e.g. sc360-cat-badge--logistics
   ========================================================================== */

.sc360-cat-badge--logistics {
    color: #87E4E8 !important;
}

.sc360-cat-badge--freight {
    color: #247F84 !important;
}

.sc360-cat-badge--technology {
    color: #B71B7B !important;
}

.sc360-cat-badge--operations {
    color: #2E2E2E !important;
}

.sc360-cat-badge--risk {
    color: #7F1458 !important;
}

.sc360-cat-badge--regulation {
    color: #BE6B9B !important;
}

.sc360-cat-badge--procurement {
    color: #765067 !important;
}

.sc360-cat-badge--supply-chain-news-analysis {
    color: #000000 !important;
}

/* Editor's Picks sidebar columns (col-md-3) — make first card image taller */
.sc360-editors-picks .col-md-3 .sc360-card.has-image:first-child .sc360-card-thumb img {
    aspect-ratio: 1 / 1;
}

/* -------------------- newsletter section spacing (mobile only) -------------------- */
/* The newsletter form (#sc360-sidebar-ebtest) sits inside a .col-md-4
   that is height-stretched to match its siblings inside
   .row.sc360-news-top-row (Bootstrap's default align-items: stretch).
   A margin-bottom on the inner form gets absorbed by that stretch and
   never shows up as visible space before the next block. The gap has
   to go on the ROW itself instead, so it appears after the row ends —
   right before .sc360-two-col-list starts. Desktop layout is untouched. */
@media (max-width: 767px) {
    .sc360-news-top-row {
        margin-bottom: 30px;
    }
}

/* Force divider/border to always show on hover, overriding any 
   inline page-level CSS that resets border-color on .sc360-card:hover */
body .sc360-card.no-image:hover {
    border-bottom-color: var(--sc360-border, #EEEEEE) !important;
}