/*
Theme Name: Global South Connections
Theme URI: https://www.globalsouthconnections.co.ke
Author: Global South Connections Solutions
Author URI: https://www.globalsouthconnections.co.ke
Description: The official platform theme of Global South Connections: "Connections. Opportunities. Growth." A premium, magazine-grade opportunities platform theme for careers, fellowships, scholarships, funding, proposals, tenders and training across the Global South. Requires the Global South Connections Core plugin for full functionality (the Opportunity Desk, forms, memberships and demo content).
Version: 1.0.2
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: global-south-connections
Tags: editorial, news, business, blog, custom-menu, custom-logo, featured-images, translation-ready, block-styles, wide-blocks
*/

/*
 * All styles live in assets/css/*.css (enqueued in inc/enqueue.php):
 *   base.css      - design tokens, typography, buttons, forms, utilities
 *   layout.css    - masthead, sticky navbar, drawer, footer
 *   sections.css  - hero, section heads, cards, grids, bands, single/archive
 * This file carries the small layout layer shared with the .com gateway
 * (homepage media rows, Featured News rail, desks, ticker, preferred source).
 */

/* ---------- Top Stories: TSA monogram placeholder (post without an image) ---------- */
.gsc-mini-media--ph {
        background: linear-gradient(150deg, var(--gsc-navy-3) 0%, var(--gsc-navy) 60%, #0A1622 100%);
        display: flex; align-items: center; justify-content: center;
        overflow: hidden;
}
.gsc-mini-ph {
        font-family: var(--gsc-serif); font-style: italic; font-weight: 600;
        font-size: 1.35rem; letter-spacing: 0.08em; color: var(--gsc-gold-2);
        opacity: 0.85;
}

/* ---------- Trending News desks: centered sub-head, View All closes the run ---------- */
/* Each desk head centers its category title on the newspaper rule; the View
   All button closes the desk BELOW its cards (end of the card run) - the
   same desk rhythm as globalsouthconnections.co.ke. */
.gsc-opp-desk-head--center {
        flex-direction: column; align-items: center; justify-content: center;
        text-align: center;
}
.news-desk-foot { text-align: center; margin-top: 26px; }
.news-desk-foot .btn { min-width: 132px; }
@media (max-width: 640px) {
        .news-desk-foot { margin-top: 20px; }
}

/* ---------- Latest News rows: image left, headline top, date · category under it ---------- */
/* The sections.css row is the baseline date-column list; the homepage re-lays
   it as a media row: thumbnail on the left, the headline on top of the body,
   and an uppercase "DATE · CATEGORY" meta line below the headline. */
.latest-list li.latest-item { flex-wrap: nowrap; align-items: center; gap: 20px; }
.latest-body {
        flex: 1 1 auto; min-width: 0;
        display: flex; flex-direction: column; gap: 7px;
}
/* sections.css gives .latest-list a { flex: 1 1 320px } for the old row -
   inside the column body that basis would balloon the row height. */
.latest-list .latest-body a { flex: none; }
.latest-meta {
        display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
        font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em;
        text-transform: uppercase; color: var(--gsc-grey);
}
.latest-meta-sep { color: var(--gsc-gold-2); }
.latest-meta-cat { color: var(--gsc-gold-2); font-weight: 700; }
.latest-thumb {
        flex: none; width: 104px; height: 78px; border-radius: 8px;
        overflow: hidden; background: var(--gsc-navy-3);
}
.latest-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Latest News + Featured News rail: the block spans the page ---------- */
/* The list keeps the left column and the "Featured News" rail fills the
   right sidebar. sections.css caps .latest-list at 940px centered - inside
   the grid it must fill its track instead. */
.latest-wrap {
        display: grid; grid-template-columns: minmax(0, 1fr) 350px;
        gap: 44px; align-items: start;
}
.latest-main .latest-list { max-width: none; }
.featured-panel {
        border: 1px solid var(--gsc-line); background: var(--gsc-white);
        border-radius: 14px; padding: 24px 22px 26px;
}
.featured-head {
        margin: 0 0 16px; padding-bottom: 12px; border-bottom: 2px solid var(--gsc-navy);
        font-family: var(--gsc-serif); font-size: 1.12rem; font-weight: 700; color: var(--gsc-navy);
        position: relative;
}
.featured-head::after {
        content: ""; position: absolute; left: 0; bottom: -2px;
        width: 58px; height: 2px; background: var(--gsc-gold-2);
}
.featured-lead { display: block; }
.featured-lead-media {
        display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden;
        background: var(--gsc-navy-3); margin-bottom: 12px;
}
.featured-lead-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.featured-kicker {
        display: block; font-size: 0.66rem; font-weight: 700;
        letter-spacing: 0.18em; text-transform: uppercase; color: var(--gsc-gold-2);
        margin-bottom: 6px;
}
.featured-lead-title {
        display: block; font-family: var(--gsc-serif); font-weight: 600;
        font-size: 1.12rem; line-height: 1.38; color: var(--gsc-navy);
}
.featured-date {
        display: block; margin-top: 7px; font-size: 0.7rem; font-weight: 600;
        letter-spacing: 0.12em; text-transform: uppercase; color: var(--gsc-grey);
}
.featured-rows { margin-top: 4px; }
.featured-row {
        display: flex; align-items: center; gap: 14px;
        padding: 14px 0; border-top: 1px solid var(--gsc-line);
}
.featured-row-media {
        flex: none; width: 78px; height: 58px; border-radius: 8px;
        overflow: hidden; background: var(--gsc-navy-3);
}
.featured-row-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.featured-row-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.featured-row-title {
        font-family: var(--gsc-serif); font-weight: 600; font-size: 0.95rem;
        line-height: 1.35; color: var(--gsc-navy);
}
.featured-row-date {
        font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em;
        text-transform: uppercase; color: var(--gsc-grey);
}
.featured-lead:hover .featured-lead-title,
.featured-row:hover .featured-row-title { color: var(--gsc-gold-2); }
.featured-foot { margin-top: 18px; text-align: center; }
.featured-foot .btn { min-width: 148px; }
@media (max-width: 1024px) {
        .latest-wrap { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 640px) {
        .latest-list li.latest-item { gap: 14px; }
        .latest-body { gap: 5px; }
        .latest-thumb { width: 84px; height: 63px; border-radius: 6px; }
        .latest-meta { letter-spacing: 0.09em; }
        .featured-panel { padding: 20px 16px 22px; }
        .featured-row { gap: 12px; padding: 12px 0; }
        .featured-row-media { width: 68px; height: 51px; border-radius: 6px; }
}

/* ---------- Breaking strip: sliding ticker ---------- */
/* The sections.css strip wraps its headlines onto static lines; the homepage
   re-lays it as a continuous newsroom ticker. The track renders the fresh
   breaking set twice (the second half is the aria-hidden echo) and the
   animation translates exactly one half per cycle, so the wire loops
   without a seam on any viewport width; the label stays pinned left. */
.news-strip-in { flex-wrap: nowrap; }
.news-strip-viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.news-strip-track { display: flex; align-items: center; width: max-content; animation: gsc-ticker 96s linear infinite; }
.news-strip-list { flex: none; flex-wrap: nowrap; padding-right: 30px; }
.news-strip-viewport:hover .news-strip-track,
.news-strip-track:has(a:focus-visible) { animation-play-state: paused; }
@keyframes gsc-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
        .news-strip-track { animation: none; }
        .news-strip-viewport { overflow-x: auto; }
}

/* ---------- Add as a Preferred Source on Google ---------- */
/* Centered call-to-action rendered wherever content closes: below the Stay
   Ahead band on the homepage, below the share row on single posts, and
   under the post lists on the news index, archives and search results. */
.gsc-ps { text-align: center; margin: 30px auto; padding: 0 20px; }
.gsc-ps .btn { display: inline-flex; align-items: center; gap: 10px; }
.gsc-ps .btn svg { width: 18px; height: 18px; flex: none; }