/**
 * GC Theme — Single Post Sidebar Layout
 *
 * Sticky sidebar layout for single news/guide articles.
 * Contains all rules for:
 *   - .gc-single-wrap            grid container (content + sidebar)
 *   - .gc-single-content         article body column
 *   - .gc-single-sidebar         sticky sidebar column
 *
 * Layout strategy:
 *   - Desktop (>= 901px):  2-column grid (1fr + 300px)
 *   - Mobile  (<= 900px):  single column, sidebar hidden
 *
 * Sidebar widgets (subscribe, in-article) live in
 * components/sidebar-widgets.css.
 *
 * @package GC_Theme
 */


/* ═══════════════════════════════════════════════════════
 * DESKTOP — 2-column grid (default)
 * ═══════════════════════════════════════════════════════ */

.container .gc-single-wrap,
.gc-single-wrap {
    display: grid !important;
    grid-template-columns: 1fr 300px !important;
    align-items: stretch !important;
    padding: 32px 0 48px !important;
}

.gc-single-content {
    min-width: 0 !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

.gc-single-sidebar {
    display: flex !important;
    flex-direction: column !important;
    align-self: flex-start;
    height: 100% !important;
    margin-top: 20px !important;
}

.gc-sidebar-inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


/* ═══════════════════════════════════════════════════════
 * MOBILE — single column, sidebar hidden
 * Breakpoint: 900px (anything narrower → mobile)
 * ═══════════════════════════════════════════════════════ */

@media (max-width: 900px) {

    .container .gc-single-wrap,
    .gc-single-wrap {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        padding: 20px 0 32px !important;
    }

    .gc-single-sidebar {
        display: none !important;
    }
}


/* ═══════════════════════════════════════════════════════
 * MOBILE — Inline "Mentioned" widget visible only on mobile
 * The desktop sidebar version is hidden on mobile, so we
 * show an inline equivalent inside the article flow.
 * ═══════════════════════════════════════════════════════ */

.gc-iaw-mobile {
    display: none;
}

@media (max-width: 900px) {
    .gc-iaw-mobile {
        display: block !important;
        margin-bottom: 24px;
    }
}