/* ═══════════════════════════════════════════════
   HOME PAGE — Extracted from home_page.html
   Global tokens & resets are in Icarus.css
═══════════════════════════════════════════════ */

/* ── PAGE WRAPPER ── */
.sg-page {
    max-width: 1421px;
    margin: 0 auto;
    padding: 0 1rem; /* Reduced from 2rem */
    flex: 1 0 auto; /* Ensure content pushes footer down */
}

/* ── SECTION LABEL ── */
.sg-label {
    font-family: var(--label);
    font-size: .7rem;
    font-weight: 800;
    
        color: var(--red);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .6rem;
}

.sg-label::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 2px;
    background: var(--red);
    flex-shrink: 0;
}

/* ── FEATURED ISSUE SECTION ── */
.sg-featured-issue {
    display: grid;
    grid-template-columns: 400px minmax(300px, 1fr) 280px;
    gap: 1.25rem; /* Reduced for better breathing room */
    border-bottom: 3px double var(--rule);
    margin-top: 2.5rem;
    padding-bottom: 3.5rem;
}

/* Left: Issue cover */
.sg-issue-cover {
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 1.5rem; /* Reduced for a tighter look */
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); /* Softened shadow */
    transition: transform 0.3s ease;
}

.sg-issue-cover__label {
    font-family: var(--label);
    font-size: 1rem;
    font-weight: 800;
    
        color: var(--navy);
    padding-bottom: .75rem;
    /* border-bottom: 2px solid var(--navy); Slimmer border */
    margin-bottom: 1.5rem;
}

.sg-issue-cover__image-wrap {
    position: relative;
    overflow: hidden;
    background: var(--rule);
    margin: -1.5rem -1.5rem 1.25rem -1.5rem; /* Full-width image in card */
    box-shadow: 0 8px 20px rgba(11, 31, 58, 0.1);
    border-radius: 2px 2px 0 0;
}

.sg-issue-cover__image-wrap img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    transition: transform .6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.sg-issue-cover__image-wrap:hover img {
    transform: scale(1.05);
}

.sg-issue-cover__image-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 60%, rgba(11, 31, 58, .4));
    pointer-events: none;
}

.sg-issue-cover__title {
    font-family: var(--serif);
    font-size: clamp(2rem, 3.5vw, 2.5rem);
    font-weight: 900;
    line-height: 1.1;
    
    margin-bottom: .5rem;
}

.sg-issue-cover__title a:hover {
    color: var(--red);
}

.sg-issue-cover__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.sg-issue-cover__date {
    font-family: var(--label);
    font-size: .75rem;
    font-weight: 600;
    
    color: var(--caption);
}

.sg-issue-cover__topic {
    display: inline-block;
    font-family: var(--label);
    font-size: .9rem;
    font-weight: 800;
    
        color: #fff;
    padding: 4px 14px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.sg-issue-cover__topic:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

.sg-issue-cover__cta {
    display: inline-block;
    background: var(--navy);
    color: #fff;
    font-family: var(--label);
    font-size: 1rem;
    font-weight: 700;
    
        padding: .85rem 2rem;
    border-radius: 2px;
    transition: background .2s, transform .2s;
}

.sg-issue-cover__cta:hover {
    background: var(--red);
    color: #fff;
    transform: translateX(5px);
}

/* Middle: Issue articles (same topic) */
.sg-issue-articles {
    display: flex;
    flex-direction: column;
    max-height: 700px; /* Restored — prevents the column from inflating the grid row */
    padding-top: 1.5rem; /* CHANGED from 1.65rem: aligns heading with left card label (Fix 1) */
    padding-right: 0;
    /* border-right: 1px solid var(--rule); */
}

.sg-issue-articles__heading {
    font-family: var(--label);
    font-size: 1rem;
    font-weight: 800;
    
        color: var(--navy);
    padding-bottom: .6rem;
    /* border-bottom: 2px solid var(--navy); Slimmer border */
    margin-bottom: 3rem; /* INCREASED from 1.25rem: pushes carousel down toward vertical centre (Fix 4) */
    background: var(--paper); /* Keep heading above scrolling content */
    z-index: 2;
}

.sg-issue-articles__scroll-wrapper {
    flex: 1; /* Restored — fills remaining height reliably */
    overflow: auto; /* Scrolling direction handled by JS */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    position: relative;
    padding: 2rem 1.25rem;
    margin: 0 -1.25rem; /* Restored — negative sides keep full-bleed width */
}

.sg-issue-articles__scroll-wrapper::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.sg-issue-articles__grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* animation: marquee-vertical 40s linear infinite; Removed in favor of JS control */
}

.sg-issue-articles__grid:hover {
    animation-play-state: paused;
}

@keyframes marquee-vertical {
    from { transform: translateY(0); }
    to { transform: translateY(-50%); }
}

/* Issue article card */
.sg-issue-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 1rem;
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); /* Softened shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sg-issue-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.sg-issue-card__image-wrap {
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--rule);
    margin: -1rem -1rem .75rem -1rem; /* Full-width image in card */
}

.sg-issue-card__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.sg-issue-card__image-wrap:hover img {
    transform: scale(1.04);
}

.sg-issue-card__category {
    display: inline-block;
    font-family: var(--label);
    font-size: 0.9rem;
    font-weight: 800;
    color: #fff;
    background: var(--red);
    padding: 3px 10px;
    border-radius: 12px;
    margin-bottom: .4rem;
    align-self: flex-start;
}

.sg-issue-card__title {
    font-family: var(--serif);
    font-size: 1.30rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.sg-issue-card__title a:hover {
    color: var(--red);
}

.sg-issue-card__date {
    font-family: var(--label);
    font-size: 0.75rem;
    color: var(--caption);
    margin-top: .2rem;
}

/* Author Credit */
.sg-card-author {
    font-family: var(--label);
    font-size: 1em; /* Reduced from 1rem for cleaner look */
    font-weight: 700;
    color: var(--muted);
    margin-bottom: .2rem;
    display: block;
        
}


/* Right: Other topics */
.sg-issue-other-topics {
    display: flex;
    flex-direction: column;
    /* max-height here is a CSS fallback for before JS runs (or if JS fails).
       JS in home.js sets this dynamically to exactly match the left cover card's
       height (including its image), so the column bottoms always align (Fix 3).
       overflow:hidden works in tandem: once JS applies the correct max-height the
       outer is clipped cleanly and the inner scroll-wrapper handles scrolling (Fix 2). */
    max-height: 700px;
    overflow: hidden;
    padding-top: 1.5rem; /* Match left card's padding so headings align (Fix 1) */
    padding-right: .5rem;
}

/* Scrollbar styling moved to inner scroll-wrapper (overflow-y now lives there) */
.sg-issue-other-topics__scroll-wrapper::-webkit-scrollbar {
    width: 6px;
}
.sg-issue-other-topics__scroll-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--rule);
    border-radius: 4px;
}

.sg-issue-other-topics__heading {
    font-family: var(--label);
    font-size: 1rem;
    font-weight: 800;
    
        color: var(--navy);
    padding-bottom: .6rem;
    /* border-bottom: 2px solid var(--navy); Slimmer border */
    margin-bottom: 1.25rem;
    /* Heading sits outside the inner scroll-wrapper, so it never scrolls away.
       background + z-index give a clean visual cut above the card list (Fix 2) */
    background: var(--paper);
    z-index: 2;
}

.sg-issue-other-topics__scroll-wrapper {
    width: 100%;
    flex: 1;              /* Fill all remaining height below the heading (Fix 3) */
    overflow-y: auto;     /* Scroll here, not on the outer column (Fix 2) */
    min-height: 0;        /* Critical: lets a flex child shrink below its content size */
    scrollbar-width: thin; /* Firefox — matches the custom thumb defined above */
}

.sg-issue-other-topics__grid {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.sg-issue-thumbnails {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    padding: 0.5rem 1.25rem;
    justify-content: center;
    margin-top: -1rem;
    margin-bottom: 1.5rem;
    background: var(--paper);
    z-index: 2;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sg-issue-thumbnails::-webkit-scrollbar {
    display: none;
}

.sg-issue-thumbnail {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid transparent; /* Slightly thicker for better visibility */
    transition: transform 0.2s, border-color 0.2s;
    background: var(--rule);
    position: relative;
}

.sg-issue-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8; /* Increased from 0.6 for better visibility */
    transition: opacity 0.2s;
}

.sg-issue-thumbnail:hover img {
    opacity: 0.9;
    transform: scale(1.1);
}

.sg-issue-thumbnail.is-active {
    border-color: var(--red);
    transform: scale(1.15);
    z-index: 2;
    box-shadow: 0 4px 12px rgba(200, 16, 46, 0.3);
}

.sg-issue-thumbnail.is-active img {
    opacity: 1 !important; /* Fully opaque when active */
}

/* Right column small cards */
.sg-issue-small-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 1rem;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sg-issue-small-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.sg-issue-small-card__image-wrap {
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--rule);
    margin: -1rem -1rem .75rem -1rem; /* Full-width image */
}

.sg-issue-small-card__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.sg-issue-small-card__image-wrap:hover img {
    transform: scale(1.04);
}

.sg-issue-small-card__category {
    font-family: var(--label);
    font-size: .90rem;
    font-weight: 800;
    color: #fff;
    background: var(--muted);
    padding: 2px 8px;
    border-radius: 12px;
    margin-bottom: .3rem;
    align-self: flex-start;
}

.sg-issue-small-card__title {
    font-family: var(--serif);
    font-size: 1.30rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
}

.sg-issue-small-card__title a:hover {
    color: var(--red);
}

.sg-issue-small-card__date {
    font-family: var(--label);
    font-size: 0.75rem;
    color: var(--caption);
    margin-top: .15rem;
}

/* ── SUBSCRIBE BANNER ── */
.sg-subscribe {
    background: var(--navy);
    color: #fff;
    margin: 3rem -2rem;
    padding: 2.75rem 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    position: relative;
    overflow: hidden;
}

.sg-subscribe::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(-45deg,
        transparent,
        transparent 40px,
        rgba(255, 255, 255, .015) 40px,
        rgba(255, 255, 255, .015) 41px);
    pointer-events: none;
}

.sg-subscribe__text {
    text-align: center;
    position: relative;
    z-index: 1;
}

.sg-subscribe__kicker {
    font-family: var(--label);
    font-size: 1rem;
    font-weight: 800;
    
        color: var(--red);
    margin-bottom: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

.sg-subscribe__kicker::before,
.sg-subscribe__kicker::after {
    
    content: '';
    width: 20px;
    height: 2px;
    background: var(--red);
}

.sg-subscribe__title {
    font-family: var(--serif);
    font-size: 1.75rem;
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: .6rem;
}

.sg-subscribe__sub {
    font-size: .9rem;
    color: rgba(255, 255, 255, .6);
    font-style: italic;
    margin-bottom: 1.25rem;
}

.sg-subscribe__cta {
    display: inline-block;
    background: var(--red);
    color: #fff;
    font-family: var(--label);
    font-weight: 700;
    font-size: 1.5rem;
    
        padding: .7rem 2rem;
    border-radius: 2px;
    transition: background .15s, transform .15s;
    position: relative;
    z-index: 1;
}

.sg-subscribe__cta:hover {
    background: var(--red-hover);
    color: #fff;
    transform: translateY(-1px);
}

/* ── SECTION DIVIDER ── */
.sg-section-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 2rem 0 1.5rem;
}

.sg-section-head__title {
    font-family: var(--label);
    font-size: 1.05rem;
    font-weight: 800;
    
        color: var(--navy);
    white-space: nowrap;
}

.sg-section-head__rule {
    flex: 1;
    height: 1px;
    background: var(--rule);
}

.sg-article-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    padding: 2.5rem 0 2rem;
}

.sg-article-card {
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08); /* Softened shadow */
}

.sg-article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
}

.sg-article-card__image-wrap {
    overflow: hidden;
    aspect-ratio: 16/10;
    background: var(--rule);
    margin-bottom: 0;
}

.sg-article-card__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.sg-article-card__image-wrap:hover img {
    transform: scale(1.04);
}

.sg-article-card__content {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.sg-article-card__category {
    display: inline-block;
    font-family: var(--label);
    font-size: 0.9rem;
    font-weight: 800;
    color: #fff;
    background: var(--red);
    padding: 3px 10px;
    border-radius: 12px;
    margin-bottom: .6rem;
    align-self: flex-start;
}

.sg-article-card__title {
    font-family: var(--serif);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: .5rem;
}

.sg-article-card__title a:hover {
    color: var(--red);
}

.sg-article-card__date {
    font-family: var(--label);
    font-size: .75rem;
    color: var(--caption);
    margin-top: auto;
}

/* ── EMPTY STATE ── */
.sg-empty {
    grid-column: 1 / -1;
    text-align: center;
    font-family: var(--body-serif);
    font-size: 1rem;
    color: var(--caption);
    font-style: italic;
    padding: 2rem 0;
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
    .sg-featured-issue {
      grid-template-columns: 1fr;
      min-width: 0; /* Prevent horizontal expansion from children */
    }

    .sg-issue-cover {
      display: flex;
      flex-direction: column;
      padding: 1.25rem;
      border: none;
      border-radius: 4px;
      margin-bottom: 2.5rem;
      max-width: 100%;
    }

    .sg-issue-cover__image-wrap {
      margin: -1.25rem -1.25rem 1.25rem -1.25rem;
      max-height: none; /* Removed constraint to ensure full cover visibility */
    }

    .sg-issue-articles {
      padding-right: 0;
      border-right: none;
      max-height: none;
      min-width: 0; /* Crucial for horizontal scroll nested in grid/flex */
      width: 100%;
    }

    .sg-issue-articles__scroll-wrapper {
        flex: none;              /* Override desktop flex:1 — mobile uses natural horizontal width */
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -ms-overflow-style: none; /* Hide scrollbar for IE/Edge */
        scrollbar-width: none; /* Hide scrollbar for Firefox */
        padding: 1.5rem 1.25rem;
        margin: 0 -1.25rem;
    }

    .sg-issue-articles__scroll-wrapper::-webkit-scrollbar {
        display: none; /* Hide scrollbar for Chrome/Safari */
    }

    .sg-issue-articles__grid {
      display: flex;
      flex-direction: row;
      gap: 1.5rem;
      animation: none;
      width: max-content;
      padding-right: 1.25rem; /* Balance with margin */
    }

    .sg-issue-articles__grid .sg-issue-card {
      flex: 0 0 300px;
      white-space: normal;
      scroll-snap-align: center;
    }
    
    .sg-issue-other-topics {
      padding-right: 0;
      max-height: none;
      margin-top: 2rem;
      border-top: 1px solid var(--rule);
      padding-top: 2rem;
      min-width: 0; /* Crucial for horizontal scroll nested in grid/flex */
      width: 100%;
    }

    .sg-issue-other-topics__scroll-wrapper {
      flex: none;              /* Override desktop flex:1 — mobile stacks horizontally */
      width: 100%;
      overflow-x: auto;
      overflow-y: hidden;      /* Override desktop overflow-y:auto */
      scroll-snap-type: x mandatory;
      -ms-overflow-style: none; /* Hide scrollbar for IE/Edge */
      scrollbar-width: none; /* Hide scrollbar for Firefox */
      padding: 1.5rem 1.25rem;
      margin: 0 -1.25rem;
    }

    .sg-issue-other-topics__scroll-wrapper::-webkit-scrollbar {
      display: none; /* Hide scrollbar for Chrome/Safari */
    }

    .sg-issue-other-topics__grid {
      display: flex;
      flex-direction: row;
      gap: 1.25rem;
      width: max-content;
      padding-right: 1.25rem; /* Balance with margin */
    }

    .sg-issue-other-topics__grid .sg-issue-small-card {
      flex: 0 0 260px;
      white-space: normal;
      scroll-snap-align: center;
    }

    .sg-article-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    .sg-article-grid .sg-article-card:nth-child(n+4) {
      display: none;
    }

    .sg-subscribe {
      margin: 2rem -1rem;
      padding: 2rem 1.5rem;
    }
}

@media (max-width: 600px) {
    .sg-page {
      padding: 0 1rem;
    }

    .sg-issue-cover {
      padding: 1rem; /* Matched to page padding to prevent overflow */
    }

    .sg-issue-cover__image-wrap {
      margin: -1rem -1rem 1rem -1rem;
    }

    .sg-issue-articles__grid {
      grid-template-columns: 1fr;
    }

    .sg-article-grid {
      grid-template-columns: 1fr;
    }

    .sg-subscribe {
      flex-direction: column;
      gap: 1.5rem;
      margin: 2rem -1rem;
    }
}

/* ── MORE ARTICLES ── */
.sg-more-articles {
    display: flex;
    justify-content: center;
    padding: 1rem 0 5rem;
}

.sg-btn-more {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    background: var(--navy);
    color: #fff;
    font-family: var(--label);
    font-size: 1rem;
    font-weight: 700;
    padding: 1rem 2.5rem;
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 4px 15px rgba(11, 31, 58, 0.15);
}

.sg-btn-more:hover {
    background: var(--red);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(200, 16, 46, 0.25);
}

.sg-btn-more svg {
    transition: transform 0.3s ease;
}

.sg-btn-more:hover svg {
    transform: translateX(5px);
}
/* ── PAST ISSUES ── */
.sg-issue-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    padding: 1.5rem 0 2rem;
}

.sg-issue-card-simple {
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.sg-issue-card-simple:hover {
    transform: translateY(-4px);
}

.sg-issue-card-simple__image-wrap {
    aspect-ratio: 3/4;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    margin-bottom: 1rem;
}

.sg-issue-card-simple__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sg-issue-card-simple__content {
    display: flex;
    flex-direction: column;
}

.sg-issue-card-simple__category {
    font-family: var(--label);
    font-size: 0.9rem;
    font-weight: 800;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    align-self: flex-start;
}

.sg-issue-card-simple__title {
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.3rem;
}

.sg-issue-card-simple__title a:hover {
    color: var(--red);
}

.sg-issue-card-simple__date {
    font-family: var(--label);
    font-size: 0.75rem;
    color: var(--caption);
    
}

.sg-more-issues {
    display: flex;
    justify-content: center;
    padding: 1rem 0 3rem;
}

.sg-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: transparent;
    border: 2px solid var(--navy);
    color: var(--navy);
    font-family: var(--label);
    font-size: 1rem;
    font-weight: 700;
    padding: 0.8rem 2rem;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.sg-btn-secondary:hover {
    background: var(--navy);
    color: #fff;
}

@media (max-width: 900px) {
    .sg-issue-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .sg-issue-grid {
        grid-template-columns: 1fr;
    }
}