/* ═══════════════════════════════════════════════════
   TDN MAGAZINE — SINGLE POST
═══════════════════════════════════════════════════ */

.tdn-single-wrap {
    max-width: var(--container);
    margin: 0 auto;
    padding: 40px var(--gutter) 60px;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 52px;
    align-items: start;
}

/* ─── Article ────────────────────────────────────── */
.tdn-article {
    min-width: 0;
    overflow: visible; /* explicit — ensures no ancestor clip on embeds */
}

/* Content */
.tdn-article-content {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--tdn-black);
    overflow: visible; /* explicit — social embed iframes must not be clipped */
}
.tdn-article-header { margin-bottom: 28px; }
.tdn-article-meta-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.tdn-article-date { font-size: .85rem; color: var(--tdn-muted); font-weight: 500; }

.tdn-article-title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--tdn-black);
    margin-bottom: 16px;
}

.tdn-article-byline-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-top: 1px solid var(--tdn-border);
    border-bottom: 1px solid var(--tdn-border);
    gap: 12px;
    flex-wrap: wrap;
}
.tdn-article-byline { font-size: .875rem; color: var(--tdn-muted); }
.tdn-article-share-btns {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tdn-article-share-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--radius);
    font-size: .775rem;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    text-decoration: none;
    border: 1.5px solid var(--tdn-border);
    color: var(--tdn-black);
    background: var(--tdn-white);
    cursor: pointer;
    font-family: var(--font-ui);
    transition: all .15s;
}
.tdn-article-share-btn:hover { border-color: var(--tdn-red); color: var(--tdn-red); }
.tdn-article-share-btn svg { flex-shrink: 0; }

/* Featured image */
.tdn-article-featured {
    margin-bottom: 28px;
    border-radius: var(--radius);
    overflow: hidden;
}
.tdn-article-featured img {
    width: 100%;
    height: auto;
    display: block;
}
.tdn-article-caption {
    font-size: .8rem;
    color: var(--tdn-muted);
    padding: 8px 12px;
    background: var(--tdn-bg-soft);
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}

/* Content */
.tdn-article-content {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--tdn-black);
}
.tdn-article-content h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 36px 0 14px;
    color: var(--tdn-black);
}
.tdn-article-content h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    margin: 28px 0 12px;
    color: var(--tdn-black);
}
.tdn-article-content h4,
.tdn-article-content h5,
.tdn-article-content h6 {
    font-weight: 700;
    margin: 20px 0 10px;
}
.tdn-article-content p {
    margin-bottom: 22px;
}
.tdn-article-content p:last-child { margin-bottom: 0; }
.tdn-article-content a {
    color: var(--tdn-red);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .15s;
}
.tdn-article-content a:hover { color: var(--tdn-red-dark); }
.tdn-article-content ul,
.tdn-article-content ol {
    margin: 0 0 22px 24px;
    line-height: 1.8;
}
.tdn-article-content ul { list-style: disc; }
.tdn-article-content ol { list-style: decimal; }
.tdn-article-content li { margin-bottom: 6px; }
.tdn-article-content blockquote:not(.twitter-tweet):not(.instagram-media):not(.tiktok-embed):not(.fb_iframe_widget) {
    margin: 28px 0;
    padding: 18px 24px;
    border-left: 4px solid var(--tdn-red);
    background: var(--tdn-bg-soft);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-style: italic;
    font-size: 1.05rem;
    color: #333;
}
.tdn-article-content blockquote:not(.twitter-tweet):not(.instagram-media):not(.tiktok-embed) p { margin-bottom: 0; }
.tdn-article-content img {
    border-radius: var(--radius);
    margin: 16px 0;
}
.tdn-article-content figure { margin: 24px 0; }
.tdn-article-content figcaption {
    font-size: .8rem;
    color: var(--tdn-muted);
    text-align: center;
    margin-top: 8px;
}
.tdn-article-content .wp-caption,
.tdn-article-content .aligncenter { text-align: center; }
.tdn-article-content .wp-caption-text {
    font-size: .8rem;
    color: var(--tdn-muted);
    margin-top: 6px;
}
/* ── Embeds & social widgets ─────────────────────────
   Strategy:
   - YouTube/Vimeo (.is-type-video): 16:9 aspect-ratio box
   - All other embeds (Twitter, Instagram, TikTok, etc.):
     EVERY ancestor must have height:auto and overflow:visible
     so dynamically-resizing iframes are never clipped.
     Use !important throughout because WordPress, Jetpack,
     and block library CSS all fight for these properties.
────────────────────────────────────────────────────── */

/* Base: constrain width but never height */
.tdn-article-content iframe,
.tdn-article-content embed,
.tdn-article-content object,
.tdn-article-content video {
    max-width: 100% !important;
}

/* ── YouTube / Vimeo: 16:9 aspect-ratio box ──────── */
.tdn-article-content .wp-block-embed.is-type-video .wp-block-embed__wrapper,
.tdn-article-content .wp-block-embed-youtube .wp-block-embed__wrapper,
.tdn-article-content .wp-block-embed-vimeo .wp-block-embed__wrapper {
    position: relative !important;
    padding-bottom: 56.25% !important;
    height: 0 !important;
    overflow: hidden !important;
}
.tdn-article-content .wp-block-embed.is-type-video .wp-block-embed__wrapper iframe,
.tdn-article-content .wp-block-embed-youtube .wp-block-embed__wrapper iframe,
.tdn-article-content .wp-block-embed-vimeo .wp-block-embed__wrapper iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* ── ALL social / rich embeds: transparent chain ─────
   The figure, wrapper, and any Jetpack intermediate div
   must ALL be overflow:visible + height:auto.
   !important is needed to override WordPress block CSS
   and any plugin CSS that loads after our stylesheet. */
.tdn-article-content figure.wp-block-embed:not(.wp-block-embed-youtube):not(.wp-block-embed-vimeo) {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}
.tdn-article-content figure.wp-block-embed:not(.wp-block-embed-youtube):not(.wp-block-embed-vimeo) .wp-block-embed__wrapper {
    position: static !important;
    padding-bottom: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}
/* Jetpack's intermediate wrapper divs (embed-twitter, embed-instagram, etc.) */
.tdn-article-content figure.wp-block-embed:not(.wp-block-embed-youtube):not(.wp-block-embed-vimeo) .wp-block-embed__wrapper > div {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}
/* The iframe itself inside social embeds.
   NO height rule here — Twitter/Instagram/TikTok set
   style="height:Xpx" inline via their widget JS.
   A stylesheet height:auto !important would beat that
   inline style and collapse the iframe. */
.tdn-article-content figure.wp-block-embed:not(.wp-block-embed-youtube):not(.wp-block-embed-vimeo) .wp-block-embed__wrapper iframe {
    position: static !important;
    max-width: 100% !important;
}

/* ── Platform-specific width constraints ──────────── */
/* Twitter: keep its natural 550px unless column is narrower */
.tdn-article-content .twitter-tweet,
.tdn-article-content .twitter-tweet-rendered,
.tdn-article-content iframe[id^="twitter-widget"],
.tdn-article-content iframe[src*="twitter.com"],
.tdn-article-content iframe[src*="x.com/i/"] {
    max-width: 100% !important;
}
/* Instagram: overrides its hardcoded min-width:326px blockquote */
.tdn-article-content .instagram-media,
.tdn-article-content blockquote.instagram-media {
    min-width: 0 !important;
    max-width: 100% !important;
}
/* TikTok */
.tdn-article-content blockquote.tiktok-embed {
    min-width: 0 !important;
    max-width: 100% !important;
}
/* Facebook */
.tdn-article-content .fb-post,
.tdn-article-content .fb-video,
.tdn-article-content .fb_iframe_widget,
.tdn-article-content .fb_iframe_widget span,
.tdn-article-content .fb_iframe_widget iframe {
    max-width: 100% !important;
}
/* wp-video shortcode */
.tdn-article-content .wp-video,
.tdn-article-content .wp-video-shortcode {
    max-width: 100% !important;
}

/* Tags */
.tdn-article-tags {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid var(--tdn-border);
}
.tdn-article-tags-label {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--tdn-muted);
}
.tdn-tag {
    display: inline-block;
    padding: 4px 10px;
    border: 1.5px solid var(--tdn-border);
    border-radius: 20px;
    font-size: .8rem;
    color: var(--tdn-muted);
    text-decoration: none;
    transition: all .15s;
}
.tdn-tag:hover { border-color: var(--tdn-red); color: var(--tdn-red); background: rgba(229,26,62,.04); }

/* Post nav (prev/next) */
.tdn-post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid var(--tdn-border);
}
.tdn-post-nav-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tdn-post-nav-item--next { text-align: right; }
.tdn-post-nav-label {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--tdn-muted);
}
.tdn-post-nav-title {
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 700;
    color: var(--tdn-black);
    line-height: 1.3;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .15s;
}
.tdn-post-nav-title:hover { color: var(--tdn-red); }

/* Related posts */
.tdn-related { margin-top: 52px; }
.tdn-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.tdn-related-card {}
.tdn-related-thumb {
    display: block;
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--tdn-bg-soft);
    margin-bottom: 10px;
}
.tdn-related-img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .4s;
}
.tdn-related-thumb:hover .tdn-related-img { transform: scale(1.05); }
.tdn-related-title {
    font-family: var(--font-display);
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--tdn-black);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-decoration: none;
}
.tdn-related-title:hover { color: var(--tdn-red); }

/* ─── Sidebar ─────────────────────────────────────── */
.tdn-sidebar { position: sticky; top: calc(var(--header-height) + 24px); }
.tdn-sidebar-widget {
    margin-bottom: 36px;
}
.tdn-sidebar-widget-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--tdn-black);
    padding-bottom: 10px;
    margin-bottom: 16px;
    border-bottom: 3px solid var(--tdn-black);
}
.tdn-sidebar-posts { display: flex; flex-direction: column; gap: 0; }
.tdn-sidebar-post {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--tdn-border-lt);
}
.tdn-sidebar-post:last-child { border-bottom: none; }
.tdn-sidebar-post-thumb {
    display: block;
    width: 72px; min-width: 72px;
    height: 54px;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--tdn-bg-soft);
    flex-shrink: 0;
}
.tdn-sidebar-post-img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .35s;
}
.tdn-sidebar-post-thumb:hover .tdn-sidebar-post-img { transform: scale(1.07); }
.tdn-sidebar-post-body { flex: 1; min-width: 0; }
.tdn-sidebar-post-title {
    font-family: var(--font-display);
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--tdn-black);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 2px;
}
.tdn-sidebar-post-title:hover { color: var(--tdn-red); }

/* Category nav widget */
.tdn-sidebar-cat-list { display: flex; flex-direction: column; }
.tdn-sidebar-cat-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid var(--tdn-border-lt);
    font-size: .875rem;
    font-weight: 600;
    color: var(--tdn-black);
    text-decoration: none;
    transition: color .15s, padding-left .15s;
}
.tdn-sidebar-cat-link:last-child { border-bottom: none; }
.tdn-sidebar-cat-link:hover { color: var(--tdn-red); padding-left: 4px; }
.tdn-sidebar-cat-link span { font-size: .75rem; color: var(--tdn-muted); font-weight: 400; }

/* ─── Responsive ─────────────────────────────────── */
@media (max-width: 1024px) {
    .tdn-single-wrap { grid-template-columns: 1fr; }
    .tdn-sidebar { position: static; }
    .tdn-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .tdn-single-wrap { padding: 24px var(--gutter) 40px; }
    .tdn-article-content { font-size: 1rem; }
    .tdn-post-nav { grid-template-columns: 1fr; }
    .tdn-related-grid { grid-template-columns: 1fr; }
}