/*
 * front-page.css — TechCapsules Homepage v2
 * Upload to: wp-content/themes/astra-ind/front-page.css
 * All selectors prefixed v2- to avoid collision with existing styles.
 * Uses theme CSS variables throughout.
 */

/* ── Wrapper ──────────────────────────────────────────────────────────── */
/* ── Full-bleed top band: dark background, device-width  #1a1f2e #579DBD #8cbb8f──────────────── */
.v2-top-band {
    background:#8cbb8f;
    width: 100%;
    padding: var(--spacing-lg) 0 var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.v2-top-band-inner {
    /* container class provides max-width + horizontal padding */
}

/* Section header inside dark band — light text */
.v2-top-band .v2-sec-hdr {
    /*border-bottom-color: rgba(255,255,255,.15);*/
    margin-bottom: 8px;
    border-bottom: none;
}
.v2-top-band .v2-sec-hdr h2 {
    color: #000000;
    font-size: 1.5rem;
    letter-spacing: 1px;
}
.v2-top-band .v2-sec-hdr a { color: #82c8e8; }

/* Ticker sits on dark bg — make it borderless */
.v2-top-band .v2-ticker-wrap {
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    margin-bottom: var(--spacing-lg);
    background: #000000;
}

.v2-wrap {
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-xxl);
}

/* ── Section header ───────────────────────────────────────────────────── */
.v2-sec-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 8px;
    margin: 0 0 16px;
}
.v2-sec-hdr h2 {
    font-size: 1.25rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    margin: 0;
}
.v2-sec-hdr a {
    font-size: 0.80rem;
    font-weight: 600;
    color: var(--primary-color);
    white-space: nowrap;
}
.v2-sec-hdr a:hover { color: var(--primary-hover); text-decoration: underline; }

/* ── Source text ──────────────────────────────────────────────────────── */
.v2-src {
    font-weight: 700;
    color: var(--accent-red);
    font-size: 0.68rem;
}

/* ── Page grid: main col + 300px sidebar ──────────────────────────────── */
.v2-page-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--spacing-xl);
    align-items: start;
    margin-bottom: var(--spacing-xl);
}
.v2-main   { min-width: 0; }
.v2-sidebar {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    position: sticky;
    top: calc(var(--total-header-height) + var(--spacing-md));
    align-self: start;
}


/* ══════════════════════════════════════════════════════════════════════
   TOP STORIES CARDS — fully self-contained, zero inheritance from .v2-card
══════════════════════════════════════════════════════════════════════ */

.v2-top-stories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: var(--spacing-xl);
}

.ts-card {
    position: relative;
    display: block;
    height: 360px;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

/* The actual image — fills the whole card */
.ts-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.ts-card:hover .ts-card__img { transform: scale(1.03); }

/* Overlay is its own element — gradient lives here, not on content div */
.ts-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,.92) 0%,
        rgba(0,0,0,.75) 35%,
        rgba(0,0,0,.20) 60%,
        transparent     100%
    );
    z-index: 1;
}

/* Content sits above overlay via z-index: 2 */
.ts-card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ts-card__src {
    font-size: 0.68rem;
    font-weight: 700;
    color: #ff9999;
}

.ts-card__title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.35;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ts-card__date {
    font-size: 0.68rem;
    color: rgba(255,255,255,.6);
}

.ts-card__meta {
    display: flex;
    align-items: center;
    gap: 5px;
}
.ts-card__sep {
    font-size: 0.68rem;
    color: rgba(255,255,255,.5);
}

/* Top stories responsive */
@media (min-width: 600px) and (max-width: 768px) {
    .v2-top-stories { grid-template-columns: repeat(2, 1fr); }
    .ts-card { height: 300px; }
    .v2-top-stories .ts-card:first-child {
        grid-column: span 2;
        height: 380px;
    }
}
@media (max-width: 599px) {
    .v2-top-stories { grid-template-columns: 1fr; }
    .ts-card { height: 450px; }
}


/* ══════════════════════════════════════════════════════════════════════
   CARD SYSTEM  (used everywhere except Top Stories)
══════════════════════════════════════════════════════════════════════ */

.v2-card {
    display: flex;
    flex-direction: column;
    background: var(--background-third);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-light);
    height: 100%;
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.v2-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

/* Image */
.v2-card-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--background-secondary);
    flex-shrink: 0;
}
.v2-card-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
}
.v2-card:hover .v2-card-img img { transform: scale(1.03); }

/* Body */
.v2-card-body {
    padding: 13px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Source row */
.v2-card-src {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
}
.v2-share-btn {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); padding: 0;
    display: flex; align-items: center;
    transition: color var(--transition-fast);
}
.v2-share-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
.v2-share-btn:hover { color: var(--primary-color); }

/* Title */
.v2-card-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-color);
    flex: 1;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.v2-card:hover .v2-card-title { color: var(--primary-color); }

/* Footer */
.v2-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--border-color);
    padding-top: 8px;
    margin-top: auto;
    font-size: 0.7rem;
    color: var(--text-muted);
}
.v2-brief { font-weight: 400; }
.v2-brief strong { font-weight: 700; color: var(--text-color); }
.v2-like-btn {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); padding: 0;
    display: flex; align-items: center; gap: 3px;
    font-size: 0.7rem;
    transition: color var(--transition-fast);
}
.v2-like-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }
.v2-like-btn:hover { color: var(--accent-red); }

/* ── Wide card (used in AI / Windows / Apple feature sections) ───────── */
.v2-card--wide {
    position: relative;
    border: none;
    box-shadow: none;
    min-height: 320px;
}

.v2-card--wide .v2-card-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    aspect-ratio: unset;
    max-height: none;
}
.v2-card--wide .v2-card-img img { opacity: 1; }

.v2-card--wide .v2-card-body {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-md);
    box-sizing: border-box;
    z-index: 1;
    background:
        linear-gradient(to bottom,
            rgba(0,0,0,.90) 0%,
            rgba(0,0,0,.75) 20%,
            transparent     50%),
        linear-gradient(to top,
            rgba(0,0,0,.90) 0%,
            rgba(0,0,0,.75) 20%,
            transparent     50%);
}

.v2-card--wide .v2-card-title {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    -webkit-line-clamp: 4;
}
.v2-card--wide:hover .v2-card-title { color: #fff; }

.v2-card--wide .v2-card-footer {
    margin-top: auto;
    color: rgba(255,255,255,.75);
    border-top: none;
}
.v2-card--wide .v2-brief strong { color: #fff; }
.v2-card--wide .v2-like-btn     { color: rgba(255,255,255,.75); }
.v2-card--wide:hover            { transform: none; }
.v2-card--wide .v2-src          { color: #ff9999; }
.v2-card--wide .v2-share-btn    { color: rgba(255,255,255,.7); }

/* ── Large card ──────────────────────────────────────────────────────── */
.v2-card--large .v2-card-img   { aspect-ratio: 4 / 3; }
.v2-card--large .v2-card-title { font-size: 1rem; -webkit-line-clamp: 4; }

/* ── Small card ──────────────────────────────────────────────────────── */
.v2-card--sm .v2-card-title { font-size: 1rem; }


/* ══════════════════════════════════════════════════════════════════════
   SECTION LAYOUTS
══════════════════════════════════════════════════════════════════════ */

/* Wide-feature: flat 3-col grid
   Desktop:  [ wide (span 2) | sm1 ]
             [ sm2 | sm3 | sm4     ]
   Mobile:   [ wide (span 2)       ]
             [ sm1 | sm2           ]
             [ sm3 | sm4           ]
*/
.v2-wide-feature {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: var(--spacing-xl);
    align-items: start;
}
.v2-wide-feature .v2-card--wide { grid-column: span 2; }
.v2-wide-feature .v2-card--sm   { grid-column: span 1; }

/* Feature (large left + 2 small stacked right) */
.v2-feature-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px;
    margin-bottom: var(--spacing-xl);
}
.v2-right-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.v2-right-stack .v2-card { flex: 1; }


/* ══════════════════════════════════════════════════════════════════════
   SIDEBAR CARDS
══════════════════════════════════════════════════════════════════════ */

.v2-sb-card {
    background: var(--background-third);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-light);
}
.v2-sb-hdr {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}
.v2-sb-hdr a {
    font-size: 0.80rem;
    font-weight: 600;
    color: var(--primary-color);
    text-transform: none;
    letter-spacing: 0;
}
.v2-sb-hdr--dark {
    background: #000;
    border-bottom-color: rgba(255,255,255,.08);
    color: rgba(255,255,255,.45);
}
.v2-sb-hdr--dark a { color: rgba(255,255,255,.4); }

.v2-sb-item {
    display: flex;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--border-color);
    text-decoration: none;
    color: inherit;
    align-items: flex-start;
    transition: background var(--transition-fast);
}
.v2-sb-item:last-child { border-bottom: none; }
.v2-sb-item:hover { background: var(--background-secondary); }

.v2-sb-thumb {
    width: 64px;
    height: 64px;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--background-secondary);
}
.v2-sb-thumb img { width: 100%; height: 100%; object-fit: cover; }

.v2-sb-body { flex: 1; min-width: 0; }
.v2-sb-meta {
    font-size: 0.63rem;
    color: var(--text-muted);
    margin-bottom: 3px;
}
.v2-sb-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-color);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.v2-sb-item:hover .v2-sb-title { color: var(--primary-color); }

/* Gaming card — dark purple */
.v2-sb-card--gaming { background: #120820; border-color: #2d1558; }
.v2-sb-card--gaming .v2-sb-hdr { background: linear-gradient(135deg,#1e0a3c,#120820); border-bottom-color: rgba(255,255,255,.08); color: rgba(255,255,255,.45); }
.v2-sb-card--gaming .v2-sb-hdr a { color: #c084fc; }
.v2-sb-card--gaming .v2-sb-item { border-bottom-color: rgba(255,255,255,.07); }
.v2-sb-card--gaming .v2-sb-item:hover { background: rgba(255,255,255,.05); }
.v2-sb-card--gaming .v2-sb-title { color: rgba(255,255,255,.88); }
.v2-sb-card--gaming .v2-sb-item:hover .v2-sb-title { color: #c084fc; }
.v2-sb-card--gaming .v2-sb-meta { color: rgba(255,255,255,.35); }
.v2-sb-card--gaming .v2-sb-meta .v2-src { color: #c084fc; }

/* Topics chips */
.v2-topics-wrap { padding: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.v2-topic-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    background: var(--background-secondary);
    border: 1px solid var(--border-color);
    /*color: var(--text-color);*/
    color: #000000;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.v2-topic-chip:hover { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }

/* Ad slot */
.v2-ad-slot {
    background: var(--background-secondary);
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius-md);
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: var(--spacing-sm);
}
.v2-ad-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    position: absolute;
    top: 5px; left: 9px;
}


/* ══════════════════════════════════════════════════════════════════════
   SEMICONDUCTORS BAND
══════════════════════════════════════════════════════════════════════ */

.v2-semi-band {
    background: #C70C0C;
    width: 100%;
    padding: var(--spacing-lg) 0 var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.v2-semi-band-inner {
    /* container class provides max-width + horizontal padding */
}

.v2-semi-band .v2-sec-hdr {
    /*border-bottom-color: #ffffff;*/
    margin-bottom: 8px;
    border-bottom: none;
}

.v2-semi-band .v2-sec-hdr h2{
    color: #ffffff;
}

.v2-semi-band .v2-sec-hdr a{
    color: #DBDBDB;
}

/* 5-col card grid */
.v2-semi-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.v2-semi-band .v2-card {
    background: #fff;
}

@media (max-width: 1023px) {
    .v2-semi-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
    .v2-semi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .v2-semi-grid { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════════════
   ALL STORIES
══════════════════════════════════════════════════════════════════════ */

.v2-all-stories-wrap {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--spacing-xl);
    align-items: start;
    margin-bottom: var(--spacing-xl);
}
.v2-all-stories-main { min-width: 0; }
.v2-all-stories-aside { min-width: 0; }

.v2-stories-list {
    background: var(--background-third);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-light);
}
.v2-story-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--border-color);
    text-decoration: none;
    color: inherit;
    transition: background var(--transition-fast);
}
.v2-story-row:last-child { border-bottom: none; }
.v2-story-row:hover { background: var(--background-secondary); }

.v2-story-thumb {
    width: 72px;
    height: 72px;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--background-secondary);
}
.v2-story-thumb img { width: 100%; height: 100%; object-fit: cover; }

.v2-story-body { flex: 1; min-width: 0; }
.v2-story-meta { font-size: 0.64rem; color: var(--text-muted); margin-bottom: 3px; }
.v2-story-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.v2-story-row:hover .v2-story-title { color: var(--primary-color); }


/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {
    .v2-page-grid {
        grid-template-columns: 1fr;
    }
    .v2-main    { order: 2; }
    .v2-sidebar { order: 1; }
    .v2-sidebar {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-md);
    }
    .v2-sidebar .v2-ad-slot:first-child { display: none; }
    .v2-all-stories-wrap { grid-template-columns: 1fr; }
    .v2-all-stories-aside {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-md);
    }
}

@media (max-width: 767px) {
    .v2-sidebar          { grid-template-columns: 1fr; }
    .v2-feature-grid     { grid-template-columns: 1fr; }
    .v2-right-stack      { flex-direction: row; }
    .v2-wide-feature     { grid-template-columns: repeat(2, 1fr); }
    .v2-wide-feature .v2-card--wide { grid-column: span 2; min-height: 260px; }
    .v2-wide-feature .v2-card--sm   { grid-column: span 1; }
    .v2-card--wide .v2-card-title   { font-size: 1.25rem; }
    /* .v2-all-stories-aside stays 1fr 1fr (set at ≤1023px) down to 480px */
}

@media (max-width: 480px) {
    /* Collapse aside to single column only on very small phones */
    .v2-all-stories-aside { grid-template-columns: 1fr; }
    .v2-right-stack       { flex-direction: column; }
}