/* =============================================================================
   single-tw.css
   Dark "Text A" editorial skin + page-scoped styles for the single
   Training / Workshop / Residency templates (shared body:
   template-parts/tw-single-content.php, wrapped in .tw-single).

   Enqueued only on is_singular(array('training','workshop','residency'))
   in functions.php, AFTER main.css (dependency: saab-main-css), so the
   custom properties used below (--brand-*, --spacing-*, --font-size-*)
   resolve from main.css's :root.

   Structure:
     (1) Dark scaffold        — fixed background image, veil, section reset
     (2) Relocated rules      — single-only blocks moved out of main.css,
                                 rewritten to the dark palette
     (3) Scoped overrides     — for shared components that stay in main.css
   Palette: cream = var(--brand-cream,#FEFEFE). Never use --white (undefined).
   ============================================================================= */


/* =============================================================================
   (1) DARK SCAFFOLD
   ============================================================================= */

/* Neutralise the theme's body fill so nothing white shows behind the fixed
   layers (the fixed ::before already covers the viewport, this is a safety). */
body.single-training,
body.single-workshop,
body.single-residency {
    background-color: transparent;
}

/* Fixed full-viewport background: the post's Featured Image (passed from PHP via
   --tw-single-bg), else the shared Beirut fallback. */
.tw-single::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image: var(--tw-single-bg, url('../images/BeyrouthMaVille15_1.1.18.tif.jpg'));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Soft darkening veil so cream text reads cleanly over any photo. */
.tw-single::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.45) 100%);
    pointer-events: none;
}

/* GOTCHA: null the inherited opaque section fills — the .section-white /
   .section-cream gradients and the grouped white card fill applied to the
   related <section> — so the fixed background shows through. Reset BOTH
   background-color and background-image. */
.tw-single .section-white,
.tw-single .section-cream,
.tw-single section {
    background-color: transparent !important;
    background-image: none !important;
}


/* =============================================================================
   (2) RELOCATED SINGLE-ONLY RULES (moved out of main.css, recoloured to dark)
   ============================================================================= */

/* ---- Hero title block ---- */
.tw-single .workshop-title-center {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-lg) 0;
}

.tw-single .workshop-meta-badge {
    margin-bottom: var(--spacing-sm);
}

/* Type chip — translucent cream-on-dark (was slate-on-light). */
.tw-single .workshop-type-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.12);
    color: var(--brand-cream);
    border-radius: 20px;
    font-size: var(--font-size-small);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: none;
}

.tw-single .workshop-title-centered {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: var(--font-size-xxx-large);
    font-weight: 700;
    color: var(--brand-cream);
    margin: var(--spacing-sm) 0;
    line-height: 1.2;
}

.tw-single .workshop-basic-meta {
    display: flex;
    justify-content: center;
    gap: var(--spacing-lg);
    margin-top: 1rem;
}

.tw-single .workshop-basic-meta .meta-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: rgba(254, 254, 254, 0.72);
    font-size: 1rem;
}

.tw-single .workshop-basic-meta .meta-item i {
    color: rgba(254, 254, 254, 0.72);
}

@media (max-width: 768px) {
    .tw-single .workshop-title-centered {
        font-size: var(--font-size-xx-large);
    }

    .tw-single .workshop-basic-meta {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
}

/* ---- Gallery carousel ---- (light gradient background dropped; the veil shows) */
.tw-single .workshop-carousel-section {
    padding: 4rem 0;
    margin-top: 0;
    margin-bottom: 0;
    position: relative;
}

.tw-single .workshop-swiper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 3rem;
    position: relative;
    overflow: visible;
}

.tw-single .workshop-swiper .swiper-slide {
    width: auto;
    max-width: 420px;
    margin-right: 2rem;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    transition: transform 0.3s ease;
}

.tw-single .workshop-swiper .swiper-slide:hover {
    transform: scale(1.02);
}

/* ---- Related section layout ---- (background dropped; reset shows the veil) */
.tw-single .related-workshops-section {
    padding: var(--spacing-2xl) 0;
    margin-top: var(--spacing-lg);
}

.tw-single .related-workshops-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.tw-single .related-workshops-actions {
    text-align: center;
}


/* =============================================================================
   (3) SCOPED OVERRIDES for shared components that remain in main.css
       Each selector meets or exceeds its light twin's specificity (or uses
       !important only where the section reset above would otherwise win).
   ============================================================================= */

/* Main article prose -> glass panel + cream text.
   (.article-content base is (0,1,0) gray-dark; this (0,2,0) wins.) */
.tw-single .article-content {
    background-color: rgba(17, 24, 39, 0.30);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    padding: 2rem;
    color: var(--brand-cream);
    -webkit-backdrop-filter: blur(18px) brightness(0.72) saturate(1.05);
    backdrop-filter: blur(18px) brightness(0.72) saturate(1.05);
}

/* Headings inside the article carry their own (0,1,1) midnight rule -> (0,2,1). */
.tw-single .article-content h2,
.tw-single .article-content h3,
.tw-single .article-content h4 {
    color: var(--brand-cream);
}

.tw-single .article-content a {
    color: var(--brand-cream);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Details sidebar card -> glass panel.
   (0,3,0) beats .workshop-sidebar .workshop-details-card (0,2,0) at main.css:9734
   and .sidebar-section (0,1,0).) */
.tw-single .workshop-sidebar .workshop-details-card {
    background: rgba(17, 24, 39, 0.30);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    color: var(--brand-cream);
    -webkit-backdrop-filter: blur(18px) brightness(0.72) saturate(1.05);
    backdrop-filter: blur(18px) brightness(0.72) saturate(1.05);
}

/* Card heading: beats .workshop-sidebar h3 (0,1,1) at main.css:9758. */
.tw-single .workshop-details-card h3 {
    color: var(--brand-cream);
}

/* Detail rows: mute the light pill fill; recolour label + value.
   strong/span/time carry (0,1,1) rules -> use (0,2,1). */
.tw-single .detail-item {
    background: rgba(255, 255, 255, 0.04);
}

.tw-single .detail-item strong {
    color: var(--brand-cream);
}

.tw-single .detail-item p,
.tw-single .detail-item span,
.tw-single .detail-item time {
    color: rgba(254, 254, 254, 0.85);
}

/* Participants block -> glass panel + cream (inline colours removed in template).
   background-color needs !important because the (1) section-cream reset is !important. */
.tw-single .section-cream[data-section="workshop-participants"] {
    background-color: rgba(17, 24, 39, 0.30) !important;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--brand-cream);
    -webkit-backdrop-filter: blur(18px) brightness(0.72) saturate(1.05);
    backdrop-filter: blur(18px) brightness(0.72) saturate(1.05);
}

.tw-single .section-cream[data-section="workshop-participants"] h3,
.tw-single .section-cream[data-section="workshop-participants"] > div {
    color: var(--brand-cream);
}

/* Related title: order-flip guard. main.css:9520 sets a white twin at equal
   specificity; relocating the related block flips load order, so force cream. */
.tw-single .related-workshops-section .section-title {
    color: var(--brand-cream) !important;
}

/* "See all" button -> translucent cream-on-dark (mirrors the removed
   [data-section="workshop-related"] .btn-enhanced rule, now scoped). */
.tw-single .related-workshops-section .btn-enhanced {
    background: rgba(255, 255, 255, 0.15);
    color: var(--brand-white);
    border: 2px solid rgba(255, 255, 255, 0.3);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.tw-single .related-workshops-section .btn-enhanced:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}