/*
 * single.css — TechCapsules Article Brief / Detail Page
 *
 * Companion to single.php.
 * Depends on: style.css (global tokens) + company-page.css (layout/sidebar)
 * Upload to: wp-content/themes/astra-ind/single.css
 *
 * Class naming:
 *  .tc-single-*   — elements unique to the single/detail page
 *  .tc-sb-*       — sidebar sub-elements specific to this page
 *  .tc-related-*  — related articles grid sub-elements
 *  All other classes (.company-body, .sidebar-card, .card-footer, etc.)
 *  are reused verbatim from company-page.css / style.css.
 */

/* ================================================================
   ARTICLE CARD
   Mirrors .news-card token: bg-third, border-color, radius-md,
   shadow-light — but displayed as a full-width editorial card
   rather than a grid item.
================================================================ */

.tc-single-article {
    background: var(--background-third, #fff);
    border: 1px solid var(--border-color, #eee);
    border-radius: var(--border-radius-md, 10px);
    overflow: hidden;
    box-shadow: var(--shadow-light, 0 2px 4px rgba(0,0,0,.1));
    margin-bottom: 28px;
}

/* ── Featured image ─────────────────────────────────────────── */
.tc-single-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 380px;
    overflow: hidden;
    background: var(--background-secondary, #f8f9fa);
    flex-shrink: 0;
}

.tc-single-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Article body padding ───────────────────────────────────── */
.tc-single-body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Source row — mirrors .card-source ──────────────────────── */
.tc-single-source-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.tc-single-domain {
    /* .source-link sets color:#ff0000; font-weight:500 from style.css */
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.tc-single-date {
    font-size: var(--font-size-xs, 0.72rem);
    color: var(--text-muted, #666);
}

/* ── Title ──────────────────────────────────────────────────── */
.tc-single-title {
    font-size: clamp(1.15rem, 2.4vw, 1.55rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-color, #333);
    margin: 0 0 10px;
}

/* ── Byline — mirrors .author-date ─────────────────────────── */
.tc-single-byline {
    font-size: var(--font-size-xs, 0.72rem);
    color: var(--text-muted, #666);
    font-weight: normal;
    margin-bottom: 2px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color, #eee);
}

/* ── TC Summary — plain text, no box or border ──────────────── */
.tc-single-summary {
    margin-bottom: 12px;
}

.tc-single-summary-label {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted, #888);
    margin-bottom: 6px;
}

.tc-single-summary p:last-child {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text-secondary, #555);
    margin: 0;
}

/* ── Why It Matters — interpunct points list ────────────────── */
.tc-single-why {
    background: #fffbeb;
    border-left: 3px solid #f59e0b;
    border-radius: 0 var(--border-radius-sm, 5px) var(--border-radius-sm, 5px) 0;
    padding: 12px 14px;
    margin-bottom: 16px;
}

.tc-single-why-label {
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #b45309;
    margin-bottom: 8px;
}

.tc-single-why-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tc-single-why-points li {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text-secondary, #555);
}

/* ── Tags row — reuses .topic-chip from company-page.css ─────── */
.tc-single-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

/* ── Footer — extends .card-footer from style.css ───────────── */
.tc-single-footer {
    margin-top: auto;
}

/* ── CTA button ─────────────────────────────────────────────── */
.tc-single-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--primary-color, #0073aa);
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: var(--border-radius-sm, 5px);
    font-size: var(--font-size-sm, 0.9rem);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transition-base, 0.3s ease);
    white-space: nowrap;
    line-height: 1;
}

.tc-single-cta-btn:hover {
    background: var(--primary-hover, #005177);
    color: #fff;
}

.tc-single-cta-btn svg {
    flex-shrink: 0;
}

/* ── Like / Share — inherit from style.css .card-like-button
   and .card-share-button. No overrides needed for the single page.
   The .tc-single-like / .tc-single-share classes exist only
   as JS hooks for any single-page specific behaviour. ────────── */


/* ================================================================
   RELATED ARTICLES SECTION
   3-col grid using .carousel-card from company-page.css.
   Displayed as a static grid — no carousel JS needed.
   Each card now shows full summary + why_matters below the title.
================================================================ */

.tc-single-related {
    margin-bottom: 28px;
}

/* Section label with inline "See all" link */
.tc-single-related-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tc-single-related-label a {
    font-size: 0.80rem;
    font-weight: 600;
    color: var(--primary-color, #0073aa);
    text-decoration: none;
    margin-bottom: 0;
}

.tc-single-related-label a:hover {
    color: var(--primary-hover, #005177);
    text-decoration: underline;
}

/* 3-col static grid */
.tc-single-related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

/* Anchor wrapper — whole card is clickable */
.tc-related-card {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}

.tc-related-card:hover,
.tc-related-card:visited {
    color: inherit;
    text-decoration: none;
}

/* ── Summary text inside related cards ──────────────────────── */
.tc-related-summary {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--text-secondary, #555);
    margin: 8px 0 0;
}

/* ── Why It Matters inside related cards ────────────────────── */
.tc-related-why {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-secondary, #555);
    margin: 6px 0 0;
    padding: 6px 8px;
    background: #fffbeb;
    border-left: 2px solid #f59e0b;
    border-radius: 0 3px 3px 0;
}

.tc-related-why-label {
    margin-right: 4px;
}

/* Responsive related grid */
@media (max-width: 700px) {
    .tc-single-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .tc-single-related-grid {
        grid-template-columns: 1fr;
    }
}


/* ================================================================
   SIDEBAR ADDITIONS
   Small extras on top of .sidebar-card / .related-company-row
   from company-page.css.
================================================================ */

/* Thumbnail used in "More in <category>" sidebar list */
.tc-sb-thumb {
    width: 58px;
    height: 42px;
    border-radius: var(--border-radius-sm, 5px);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--background-secondary, #f0f4f8);
}

.tc-sb-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Source label inside sidebar list items */
.tc-sb-src {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--accent-red, #ff0000);
    margin-bottom: 2px;
}

/* Title inside sidebar list items — truncate at 2 lines */
.tc-sb-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
}

/* Override row alignment to top so thumb + multi-line title align */
.tc-sb-article-row {
    align-items: flex-start !important;
}


/* ================================================================
   HERO OVERRIDES
================================================================ */

.tc-single-hero {
    margin-bottom: 0;
}

.tc-single-hero .company-hero-name {
    font-size: 1.2rem;
}


/* ================================================================
   RESPONSIVE
================================================================ */

@media (max-width: 600px) {

    .tc-single-body {
        padding: 14px 14px 16px;
    }

    .tc-single-title {
        font-size: 1.25rem;
    }

    .tc-single-cta-btn {
        font-size: var(--font-size-xs, 0.72rem);
        padding: 7px 12px;
        max-width: 250px;
        overflow: hidden;

    }
    
    .tc-cta-label{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        min-width: 0; /* VERY IMPORTANT for flex truncation */

    }

    .tc-single-img {
        max-height: 200px;
    }

    .tc-single-share span {
        display: none;
    }

    /* On mobile, related summary text is slightly smaller */
    .tc-related-summary,
    .tc-related-why {
        font-size: 0.95rem;
    }
}

/* Source · date meta line */
.tc-sb-meta {
    display: block;
    font-size: 0.65rem;
    color: var(--text-muted, #888);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tc-sb-src-inline {
    font-weight: 700;
    color: var(--accent-red, #ff0000);
}

/* ── Pill buttons for like + share in article card footer ──── */
.tc-single-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 20px;
    background: none;
    cursor: pointer;
    font-size: var(--font-size-sm, 0.9rem);
    font-family: inherit;
    color: var(--text-color, #333);
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    white-space: nowrap;
}

.tc-single-pill-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.tc-single-pill-btn.card-like-button:hover {
    color: #e0245e;
    border-color: #fca5a5;
    background: #fff0f3;
}

.tc-single-pill-btn.card-like-button.liked {
    color: #e0245e;
    border-color: #e0245e;
}

.tc-single-pill-btn.card-like-button.liked svg {
    fill: #e0245e;
}

.tc-single-pill-btn.card-share-button:hover {
    color: var(--primary-color, #0073aa);
    border-color: var(--primary-color, #0073aa);
    background: #f0f7fc;
}