/*
Theme Name:   Sunscope Cinema Pro
Theme URI:    https://sunscope-entertainment.com
Author:       Sunscope Entertainment Corporation
Author URI:   https://sunscope-entertainment.com
Description:  Optimized dark cinematic theme for the Sunscope Entertainment streaming and production catalog. Adds a clean post-list layout (capped feature image left / excerpt right), performance hardening, accessibility refinements, and SEO/schema. Integrates with the Sunscope Rentals plugin.
Version:      2.1.2
Requires at least: 6.4
Requires PHP: 8.0
Text Domain:  sunscope-cinema-pro
License:      Private — all rights reserved
*/

/* ===================================================================
   DESIGN TOKENS
   =================================================================== */
:root {
    /* Color */
    --c-bg:           #090909;
    --c-surface:      #111318;
    --c-surface-2:    #1b1d26;
    --c-surface-3:    #22242f;
    --c-border:       rgba(255,255,255,.065);
    --c-border-hover: rgba(255,255,255,.14);

    --c-red:          #c0392b;
    --c-red-hover:    #e74c3c;
    --c-red-muted:    rgba(192,57,43,.18);

    --c-text:         #f0efec;
    --c-text-muted:   #8b8b94;
    --c-text-faint:   #44444f;

    --c-gold:         #d4a843;   /* Available for licensing */
    --c-green:        #27ae60;   /* Active rental */

    /* Type */
    --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
    --font-body:    'Inter', system-ui, -apple-system, sans-serif;

    /* Spacing scale */
    --sp-xs:   .375rem;
    --sp-sm:   .75rem;
    --sp-md:   1.25rem;
    --sp-lg:   2rem;
    --sp-xl:   3.5rem;
    --sp-2xl:  6rem;

    /* Layout */
    --max-w:         1340px;
    --nav-h:         72px;
    --card-radius:   4px;
    --poster-radius: 4px;

    /* Transitions */
    --ease:   cubic-bezier(.25,.46,.45,.94);
    --ease-out: cubic-bezier(0,0,.2,1);
}

/* ===================================================================
   RESET + BASE
   =================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background:  var(--c-bg);
    color:       var(--c-text);
    font-family: var(--font-body);
    font-size:   1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, video {
    display:    block;
    max-width:  100%;
    height:     auto;
}

a {
    color:           var(--c-text);
    text-decoration: none;
    transition:      color .18s var(--ease);
}
a:hover { color: var(--c-red); }

ul, ol { list-style: none; }

button, input, select, textarea {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    outline: none;
}

button { cursor: pointer; }

:focus-visible {
    outline: 2px solid var(--c-red);
    outline-offset: 3px;
}

/* ===================================================================
   TYPOGRAPHY
   =================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 400;   /* Bebas Neue only has one weight */
    line-height: 1.05;
    letter-spacing: .02em;
    color: var(--c-text);
}

h1 { font-size: clamp(2.8rem, 7vw, 6.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.6rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2.4rem); }
h4 { font-size: 1.4rem; }
h5 { font-size: 1.1rem; font-family: var(--font-body); font-weight: 600; letter-spacing: .04em; }

p { max-width: 68ch; }

/* Eyebrow label */
.label {
    font-size:      .7rem;
    font-weight:    700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color:          var(--c-text-muted);
}
.label--red { color: var(--c-red); }

/* ===================================================================
   LAYOUT UTILITIES
   =================================================================== */
.wrap {
    width:     100%;
    max-width: var(--max-w);
    margin:    0 auto;
    padding:   0 var(--sp-lg);
}

.grid-auto {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap:                   var(--sp-md);
}

@media (min-width: 640px)  { .grid-auto { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } }
@media (min-width: 1024px) { .grid-auto { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } }

.flex { display: flex; }
.flex-center { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ===================================================================
   BUTTONS
   =================================================================== */
.btn {
    display:         inline-flex;
    align-items:     center;
    gap:             .5em;
    padding:         .7em 1.6em;
    border-radius:   var(--card-radius);
    font-weight:     600;
    font-size:       .92rem;
    letter-spacing:  .02em;
    transition:      background .18s var(--ease), transform .12s var(--ease), box-shadow .18s;
    white-space:     nowrap;
}
.btn:active { transform: scale(.97); }

.btn--primary {
    background: var(--c-red);
    color:      #fff;
}
.btn--primary:hover {
    background: var(--c-red-hover);
    color:      #fff;
    box-shadow: 0 4px 20px rgba(192,57,43,.45);
}

.btn--ghost {
    background: rgba(255,255,255,.07);
    color:      var(--c-text);
    border:     1px solid var(--c-border-hover);
}
.btn--ghost:hover {
    background: rgba(255,255,255,.13);
    color:      var(--c-text);
}

.btn--sm {
    padding:   .45em 1.1em;
    font-size: .8rem;
}

.btn--lg {
    padding:   .85em 2em;
    font-size: 1rem;
}

/* ===================================================================
   TAGS / STATUS BADGES
   =================================================================== */
.tag {
    display:        inline-block;
    padding:        .2em .65em;
    font-size:      .65rem;
    font-weight:    700;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-radius:  2px;
}

.tag--available  { background: rgba(212,168,67,.15);  color: var(--c-gold);   border: 1px solid rgba(212,168,67,.3);  }
.tag--dev        { background: rgba(52,152,219,.12);  color: #5dade2;         border: 1px solid rgba(52,152,219,.25); }
.tag--filming    { background: rgba(192,57,43,.15);   color: var(--c-red);    border: 1px solid rgba(192,57,43,.3);   }
.tag--genre      { background: rgba(255,255,255,.06); color: var(--c-text-muted); border: 1px solid var(--c-border); }
.tag--podcast    { background: rgba(155,89,182,.15);  color: #a569bd;         border: 1px solid rgba(155,89,182,.25); }

/* ===================================================================
   SITE HEADER / NAV
   =================================================================== */
.site-header {
    position:   fixed;
    top:        0;
    left:       0;
    right:      0;
    z-index:    900;
    height:     var(--nav-h);
    transition: background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s;
    border-bottom: 1px solid transparent;
}

.site-header.scrolled {
    background:    rgba(9,9,9,.96);
    border-color:  var(--c-border);
    box-shadow:    0 4px 40px rgba(0,0,0,.6);
    backdrop-filter: blur(12px);
}

.site-header__inner {
    display:     flex;
    align-items: center;
    height:      100%;
    gap:         var(--sp-lg);
}

/* Logo */
.site-logo {
    flex-shrink: 0;
}
.site-logo img {
    height: 36px;
    width:  auto;
}
.site-logo__text {
    font-family:    var(--font-display);
    font-size:      1.6rem;
    letter-spacing: .06em;
    color:          var(--c-text);
    line-height:    1;
}
.site-logo__text span { color: var(--c-red); }

/* Primary nav */
.site-nav { margin-left: auto; }

.site-nav__list {
    display:     flex;
    align-items: center;
    gap:         var(--sp-md);
}

.site-nav__link {
    font-size:      .85rem;
    font-weight:    500;
    letter-spacing: .04em;
    color:          rgba(240,239,236,.7);
    padding:        .3em 0;
    position:       relative;
    transition:     color .18s;
}
.site-nav__link::after {
    content:    '';
    position:   absolute;
    bottom:     0; left: 0; right: 0;
    height:     1px;
    background: var(--c-red);
    transform:  scaleX(0);
    transform-origin: left;
    transition: transform .22s var(--ease);
}
.site-nav__link:hover,
.site-nav__link.current { color: var(--c-text); }
.site-nav__link:hover::after,
.site-nav__link.current::after { transform: scaleX(1); }

/* Dropdown */
.site-nav__item { position: relative; }
.site-nav__dropdown {
    position:   absolute;
    top:        calc(100% + 12px);
    left:       50%;
    transform:  translateX(-50%);
    min-width:  220px;
    background: var(--c-surface-2);
    border:     1px solid var(--c-border);
    border-radius: 6px;
    padding:    .5rem 0;
    opacity:    0;
    visibility: hidden;
    transition: opacity .2s, transform .2s var(--ease);
    transform-origin: top center;
    transform:  translateX(-50%) translateY(6px);
    box-shadow: 0 16px 48px rgba(0,0,0,.6);
}
.site-nav__item:hover .site-nav__dropdown,
.site-nav__item:focus-within .site-nav__dropdown {
    opacity:    1;
    visibility: visible;
    transform:  translateX(-50%) translateY(0);
}
.site-nav__dropdown a {
    display:     block;
    padding:     .5rem 1.1rem;
    font-size:   .82rem;
    color:       var(--c-text-muted);
}
.site-nav__dropdown a:hover { color: var(--c-text); background: rgba(255,255,255,.04); }

/* Hamburger / mobile */
.nav-toggle {
    display:     none;
    flex-direction: column;
    gap:         5px;
    padding:     .3rem;
    margin-left: auto;
}
.nav-toggle span {
    display:    block;
    width:      24px;
    height:     2px;
    background: var(--c-text);
    transition: transform .25s, opacity .25s;
}
.nav-toggle.is-open span:nth-child(1) { transform: rotate(45deg) translateY(10px); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: rotate(-45deg) translateY(-10px); }

/* ===================================================================
   HOMEPAGE HERO
   =================================================================== */
.site-hero {
    position:    relative;
    min-height:  calc(100svh - 0px);
    display:     flex;
    align-items: center;
    overflow:    hidden;
    padding-top: var(--nav-h);
}

/* Ambient background — pulled from featured poster */
.site-hero__bg {
    position:   absolute;
    inset:      0;
    background: var(--c-bg);
    z-index:    0;
}
.site-hero__bg::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: radial-gradient(ellipse 80% 60% at 80% 50%, rgba(192,57,43,.12), transparent 70%);
    z-index:    1;
}
.site-hero__bg-img {
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 52%;
    object-fit: cover;
    object-position: center top;
    mask-image: linear-gradient(to left, rgba(0,0,0,.6) 30%, transparent 100%);
    -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,.6) 30%, transparent 100%);
    z-index: 0;
}

.site-hero__inner {
    position:  relative;
    z-index:   2;
    padding:   var(--sp-2xl) 0;
}

.site-hero__eyebrow {
    display:         flex;
    align-items:     center;
    gap:             .6em;
    margin-bottom:   var(--sp-md);
}
.site-hero__eyebrow::before {
    content:    '';
    display:    inline-block;
    width:      32px;
    height:     2px;
    background: var(--c-red);
}

.site-hero__title {
    font-size:     clamp(3.5rem, 9vw, 8rem);
    line-height:   .95;
    max-width:     12ch;
    margin-bottom: var(--sp-md);
}

.site-hero__logline {
    font-size:     1.05rem;
    color:         var(--c-text-muted);
    max-width:     44ch;
    margin-bottom: var(--sp-lg);
    line-height:   1.6;
}

.site-hero__actions {
    display:   flex;
    gap:       .75rem;
    flex-wrap: wrap;
}

.site-hero__meta {
    display:     flex;
    align-items: center;
    gap:         var(--sp-md);
    margin-top:  var(--sp-lg);
    padding-top: var(--sp-lg);
    border-top:  1px solid var(--c-border);
    flex-wrap:   wrap;
}
.site-hero__meta-item {
    font-size:   .8rem;
    color:       var(--c-text-faint);
    display:     flex;
    align-items: center;
    gap:         .4em;
}
.site-hero__meta-item strong { color: var(--c-text-muted); font-weight: 500; }

/* ===================================================================
   SECTION HEADERS
   =================================================================== */
.section-head {
    display:         flex;
    align-items:     baseline;
    justify-content: space-between;
    gap:             var(--sp-md);
    margin-bottom:   var(--sp-lg);
    border-bottom:   1px solid var(--c-border);
    padding-bottom:  var(--sp-sm);
}
.section-head__title { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.section-head__link  { font-size: .82rem; color: var(--c-red); white-space: nowrap; }
.section-head__link:hover { color: var(--c-red-hover); }

/* ===================================================================
   CATALOG SECTION (homepage + archive)
   =================================================================== */
.catalog-section { padding: var(--sp-xl) 0; }

/* ===================================================================
   RAIL (horizontal scroll)
   =================================================================== */
.poster-rail {
    padding:    var(--sp-xl) 0;
    background: var(--c-surface);
    border-top:    1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
}

.poster-rail__track {
    display:              grid;
    grid-auto-flow:       column;
    grid-auto-columns:    170px;
    gap:                  var(--sp-sm);
    overflow-x:           auto;
    scroll-snap-type:     x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom:       var(--sp-sm);
    /* hide scrollbar but keep scrollable */
    scrollbar-width: thin;
    scrollbar-color: var(--c-border) transparent;
}
.poster-rail__track::-webkit-scrollbar { height: 4px; }
.poster-rail__track::-webkit-scrollbar-thumb { background: var(--c-border-hover); border-radius: 2px; }

@media (min-width: 640px)  { .poster-rail__track { grid-auto-columns: 190px; } }
@media (min-width: 1024px) { .poster-rail__track { grid-auto-columns: 210px; } }

.poster-rail__item { scroll-snap-align: start; }

/* ===================================================================
   POSTER CARD
   =================================================================== */
.poster-card {
    position:      relative;
    border-radius: var(--poster-radius);
    overflow:      hidden;
    /* Perspective for the tilt effect */
    perspective:   800px;
    cursor:        pointer;
}

.poster-card__inner {
    position:   relative;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
    transform-style: preserve-3d;
    border-radius: var(--poster-radius);
    overflow:   hidden;
}

/* 2:3 poster aspect ratio */
.poster-card__image-wrap {
    position:      relative;
    padding-bottom: 150%;   /* 2:3 */
    overflow:      hidden;
    background:    var(--c-surface-2);
}
.poster-card__img {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform .6s var(--ease);
}

/* Gradient overlay */
.poster-card__overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        to top,
        rgba(9,9,9,.97)  0%,
        rgba(9,9,9,.4)   50%,
        transparent      100%
    );
    transition: opacity .3s;
}

/* Tags in the card */
.poster-card__tags {
    position:   absolute;
    top:        .6rem;
    left:       .6rem;
    display:    flex;
    gap:        .3rem;
    flex-wrap:  wrap;
    z-index:    2;
}

/* Hover CTA that slides up */
.poster-card__cta {
    position:    absolute;
    bottom:      0; left: 0; right: 0;
    padding:     1rem .8rem .8rem;
    z-index:     3;
    transform:   translateY(4px);
    opacity:     0;
    transition:  transform .3s var(--ease), opacity .25s;
}
.poster-card__cta .btn {
    width:       100%;
    justify-content: center;
    font-size:   .78rem;
    padding:     .5em .8em;
}

/* Text below card */
.poster-card__body {
    padding:    .6rem .2rem 0;
}
.poster-card__title {
    font-family:   var(--font-display);
    font-size:     1.05rem;
    line-height:   1.15;
    letter-spacing: .02em;
    margin-bottom: .2rem;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}
.poster-card__genre {
    font-size:  .72rem;
    color:      var(--c-text-faint);
    letter-spacing: .04em;
}

/* Hover state */
.poster-card:hover .poster-card__inner {
    transform:  rotateY(-5deg) translateY(-4px);
    box-shadow: 6px 16px 40px rgba(0,0,0,.7), 0 0 0 1px var(--c-border-hover);
}
.poster-card:hover .poster-card__img    { transform: scale(1.04); }
.poster-card:hover .poster-card__cta   { transform: translateY(0); opacity: 1; }
.poster-card:hover .poster-card__overlay {
    background: linear-gradient(to top, rgba(9,9,9,.98) 0%, rgba(9,9,9,.6) 55%, rgba(9,9,9,.2) 100%);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .poster-card:hover .poster-card__inner { transform: translateY(-2px); }
    .poster-card__img { transition: none; }
}

/* ===================================================================
   SERVICES STRIP (homepage)
   =================================================================== */
.services-strip {
    padding:    var(--sp-xl) 0;
    background: var(--c-surface);
    border-top:    1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
}

.services-strip__grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap:                   var(--sp-md);
}

.services-strip__item {
    padding:       var(--sp-md);
    background:    var(--c-surface-2);
    border:        1px solid var(--c-border);
    border-radius: 6px;
    transition:    border-color .2s, background .2s;
}
.services-strip__item:hover {
    border-color: var(--c-border-hover);
    background:   var(--c-surface-3);
}
.services-strip__num {
    font-family:   var(--font-display);
    font-size:     2.4rem;
    color:         var(--c-red);
    line-height:   1;
    margin-bottom: .3rem;
}
.services-strip__name {
    font-size:   .88rem;
    font-weight: 600;
    margin-bottom: .3rem;
}
.services-strip__desc {
    font-size: .78rem;
    color:     var(--c-text-muted);
    max-width: none;
}

/* ===================================================================
   SINGLE TITLE HERO
   =================================================================== */
.title-hero {
    position:    relative;
    min-height:  calc(100svh * .85);
    display:     flex;
    align-items: flex-end;
    padding-top: var(--nav-h);
    overflow:    hidden;
}

.title-hero__bg {
    position:   absolute;
    inset:      0;
    z-index:    0;
}
.title-hero__bg img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    object-position: center 20%;
    filter:     brightness(.4) saturate(.8);
}
.title-hero__bg::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(to top, var(--c-bg) 10%, rgba(9,9,9,.55) 60%, transparent 100%);
}

.title-hero__content {
    position:  relative;
    z-index:   2;
    padding:   var(--sp-2xl) 0 var(--sp-xl);
}

.title-hero__poster {
    float:         right;
    width:         220px;
    border-radius: 4px;
    box-shadow:    0 24px 60px rgba(0,0,0,.7);
    margin:        0 0 var(--sp-lg) var(--sp-lg);
}
@media (max-width: 640px) { .title-hero__poster { display: none; } }

.title-hero__eyebrow {
    display:     flex;
    align-items: center;
    gap:         .6em;
    margin-bottom: var(--sp-sm);
    flex-wrap:   wrap;
}

.title-hero__title { margin-bottom: var(--sp-sm); }

.title-hero__meta-row {
    display:     flex;
    align-items: center;
    gap:         var(--sp-sm);
    flex-wrap:   wrap;
    font-size:   .82rem;
    color:       var(--c-text-muted);
    margin-bottom: var(--sp-md);
}
.title-hero__meta-row span::before {
    content: '·';
    margin-right: var(--sp-sm);
    color: var(--c-text-faint);
}
.title-hero__meta-row span:first-child::before { display: none; }

.title-hero__synopsis {
    font-size:     1rem;
    color:         rgba(240,239,236,.8);
    max-width:     52ch;
    margin-bottom: var(--sp-lg);
    line-height:   1.7;
}

.title-hero__actions {
    display:   flex;
    gap:       .75rem;
    flex-wrap: wrap;
        padding: 0 0 42px 0;
}

/* ===================================================================
   STICKY WATCH BAR
   =================================================================== */
.watch-bar {
    position:   sticky;
    top:        var(--nav-h);
    z-index:    100;
    background: rgba(9,9,9,.96);
    border-bottom: 1px solid var(--c-border);
    backdrop-filter: blur(12px);
    padding:    .8rem 0;
    transform:  translateY(-110%);
    transition: transform .3s var(--ease);
}
.watch-bar.is-visible { transform: translateY(0); }

.watch-bar__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--sp-md);
}
.watch-bar__title {
    font-family:    var(--font-display);
    font-size:      1.3rem;
    letter-spacing: .04em;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
}

/* ===================================================================
   SINGLE CONTENT AREA
   =================================================================== */
.single-layout {
    display:               grid;
    grid-template-columns: 1fr 300px;
    gap:                   var(--sp-xl);
    padding:               0;
    align-items:           start;
}
@media (max-width: 900px) {
    .single-layout { grid-template-columns: 1fr; }
}

/* Tabs */
.tabs {
    display:       flex;
    border-bottom: 1px solid var(--c-border);
    margin-bottom: var(--sp-lg);
    gap:           var(--sp-md);
}
.tab-btn {
    font-size:      .82rem;
    font-weight:    600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color:          var(--c-text-faint);
    padding:        .7rem 0;
    border-bottom:  2px solid transparent;
    transition:     color .18s, border-color .18s;
}
.tab-btn:hover   { color: var(--c-text-muted); }
.tab-btn.is-active { color: var(--c-text); border-bottom-color: var(--c-red); }

.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* Rich text in content area */
.entry-content {
    font-size:   .95rem;
    color:       rgba(240,239,236,.8);
    line-height: 1.75;
}
.entry-content p   { margin-bottom: 1em; max-width: 68ch; }
.entry-content h2,
.entry-content h3  { margin: 1.5em 0 .5em; }
.entry-content a   { color: var(--c-red); }
.entry-content ul  { list-style: disc; margin-left: 1.5em; margin-bottom: 1em; }

/* Crew / cast grid */
.crew-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap:                   var(--sp-md);
    margin-top:            var(--sp-md);
}
.crew-item__role {
    font-size:      .65rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          var(--c-red);
    margin-bottom:  .15rem;
}
.crew-item__name {
    font-size:   .92rem;
    font-weight: 500;
}

/* Sidebar */
.single-sidebar {
    display:       flex;
    flex-direction: column;
    gap:           var(--sp-md);
}

.sidebar-block {
    background:    var(--c-surface);
    border:        1px solid var(--c-border);
    border-radius: 6px;
    padding:       var(--sp-md);
}

.sidebar-block__title {
    font-size:      .65rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          var(--c-text-faint);
    margin-bottom:  var(--sp-sm);
    padding-bottom: var(--sp-sm);
    border-bottom:  1px solid var(--c-border);
}

.sidebar-kv { display: flex; flex-direction: column; gap: .6rem; }
.sidebar-kv dt {
    font-size:   .72rem;
    color:       var(--c-text-faint);
    letter-spacing: .06em;
    text-transform: uppercase;
}
.sidebar-kv dd { font-size: .88rem; color: var(--c-text-muted); }

/* Episode list */
.episode-list { display: flex; flex-direction: column; gap: .5rem; }

.episode-item {
    display:       flex;
    align-items:   center;
    gap:           .75rem;
    padding:       .65rem .8rem;
    border-radius: 4px;
    background:    var(--c-surface-2);
    border:        1px solid var(--c-border);
    transition:    border-color .18s, background .18s;
}
.episode-item:hover {
    border-color: var(--c-border-hover);
    background:   var(--c-surface-3);
}
.episode-item__num {
    font-family:   var(--font-display);
    font-size:     1.4rem;
    color:         var(--c-text-faint);
    width:         2.5ch;
    flex-shrink:   0;
    line-height:   1;
}
.episode-item__info { flex: 1; min-width: 0; }
.episode-item__title {
    font-size:     .88rem;
    font-weight:   600;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    margin-bottom: .1rem;
}
.episode-item__meta { font-size: .72rem; color: var(--c-text-faint); }
.episode-item__action { flex-shrink: 0; }

/* ===================================================================
   ARCHIVE / FILTER BAR
   =================================================================== */
.filter-bar {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    flex-wrap:   wrap;
    padding:     var(--sp-md) 0;
    border-bottom: 1px solid var(--c-border);
    margin-bottom: var(--sp-lg);
}

.filter-btn {
    padding:        .35em .9em;
    border:         1px solid var(--c-border);
    border-radius:  50px;
    font-size:      .78rem;
    font-weight:    600;
    letter-spacing: .04em;
    color:          var(--c-text-muted);
    transition:     background .18s, border-color .18s, color .18s;
}
.filter-btn:hover   { border-color: var(--c-border-hover); color: var(--c-text); }
.filter-btn.is-active {
    background:   var(--c-red);
    border-color: var(--c-red);
    color:        #fff;
}

/* ===================================================================
   SITE FOOTER
   =================================================================== */
.site-footer {
    background:    var(--c-surface);
    border-top:    1px solid var(--c-border);
    padding:       var(--sp-xl) 0 var(--sp-lg);
    margin-top:    var(--sp-2xl);
}

.site-footer__grid {
    display:               grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap:                   var(--sp-lg);
    margin-bottom:         var(--sp-xl);
}
@media (max-width: 860px) {
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .site-footer__grid { grid-template-columns: 1fr; }
}

.site-footer__logo {
    font-family:    var(--font-display);
    font-size:      1.8rem;
    letter-spacing: .06em;
    margin-bottom:  .6rem;
}
.site-footer__logo span { color: var(--c-red); }

.site-footer__tagline {
    font-size:     .82rem;
    color:         var(--c-text-faint);
    max-width:     28ch;
    line-height:   1.55;
    margin-bottom: var(--sp-md);
}

.site-footer__col-title {
    font-size:      .65rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color:          var(--c-text-faint);
    margin-bottom:  .8rem;
}

.site-footer__links { display: flex; flex-direction: column; gap: .5rem; }
.site-footer__links a {
    font-size:  .82rem;
    color:      var(--c-text-muted);
}
.site-footer__links a:hover { color: var(--c-text); }

.site-footer__bottom {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             var(--sp-sm);
    padding-top:     var(--sp-md);
    border-top:      1px solid var(--c-border);
    font-size:       .75rem;
    color:           var(--c-text-faint);
}

.site-footer__bottom a { color: var(--c-text-faint); }
.site-footer__bottom a:hover { color: var(--c-text-muted); }

/* ===================================================================
   SEARCH, 404, PAGE
   =================================================================== */
.page-hero {
   adding: 5px 0;
}

.page-content {
    padding:    0 0 var(--sp-2xl);
    max-width:  860px;
}

.not-found-wrap {
    display:     flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align:  center;
    min-height:  60svh;
    padding:     var(--sp-2xl) 0;
}
.not-found-wrap h1 {
    font-size: clamp(5rem, 20vw, 16rem);
    color:     var(--c-surface-3);
    line-height: 1;
    margin-bottom: var(--sp-sm);
}
.not-found-wrap p { color: var(--c-text-muted); margin-bottom: var(--sp-lg); }

/* Search form */
.search-form-wrap {
    display:   flex;
    max-width: 500px;
    margin:    0 auto var(--sp-xl);
}
.search-form-wrap input {
    flex:        1;
    padding:     .75em 1em;
    background:  var(--c-surface-2);
    border:      1px solid var(--c-border);
    border-right: none;
    border-radius: 4px 0 0 4px;
    color:       var(--c-text);
    font-size:   .95rem;
}
.search-form-wrap input:focus {
    border-color: var(--c-border-hover);
    outline: none;
}
.search-form-wrap button {
    padding:       .75em 1.2em;
    background:    var(--c-red);
    color:         #fff;
    font-weight:   600;
    border-radius: 0 4px 4px 0;
    font-size:     .9rem;
}
.search-form-wrap button:hover { background: var(--c-red-hover); }

/* ===================================================================
   MOBILE NAV
   =================================================================== */
@media (max-width: 860px) {
    .nav-toggle { display: flex; }

    .site-nav {
        position:   fixed;
        top:        var(--nav-h);
        left:       0; right: 0;
        background: rgba(9,9,9,.98);
        border-bottom: 1px solid var(--c-border);
        padding:    var(--sp-lg);
        transform:  translateY(-110%);
        opacity:    0;
        transition: transform .3s var(--ease), opacity .3s;
        z-index:    800;
        backdrop-filter: blur(16px);
        margin-left: 0;
    }

    .site-nav.is-open {
        transform: translateY(0);
        opacity:   1;
    }

    .site-nav__list {
        flex-direction: column;
        align-items:    flex-start;
        gap:            0;
    }

    .site-nav__item { width: 100%; }

    .site-nav__link {
        display:  block;
        padding:  .8rem 0;
        font-size: 1rem;
        border-bottom: 1px solid var(--c-border);
    }
    .site-nav__link::after { display: none; }

    .site-nav__dropdown {
        position:   static;
        transform:  none;
        opacity:    1;
        visibility: visible;
        background: transparent;
        border:     none;
        box-shadow: none;
        padding:    0 0 .5rem var(--sp-md);
    }
    .site-nav__dropdown a {
        padding:   .4rem 0;
        font-size: .88rem;
    }
}

/* ===================================================================
   RESPONSIVE UTILITIES
   =================================================================== */
@media (max-width: 640px) {
    :root { --sp-xl: 2.5rem; --sp-2xl: 4rem; }
    .site-hero { min-height: auto; padding: calc(var(--nav-h) + 2rem) 0 3rem; }
    .site-hero__bg-img { display: none; }
    .single-layout { grid-template-columns: 1fr; }
    .services-strip__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 400px) {
    .services-strip__grid { grid-template-columns: 1fr; }
}

/* ===================================================================
   PLUGIN INTEGRATION OVERRIDES
   Ensure the Sunscope Rentals plugin styles blend with the theme
   =================================================================== */
.scr-rent-btn {
    /* Override plugin defaults to use theme tokens */
    font-family:    var(--font-body) !important;
    border-radius:  var(--card-radius) !important;
}

/* ===================================================================
   POST LIST ROW  (v2.0)
   Two-column blog/archive listing:
   LEFT  = feature image, capped at 300px
   RIGHT = excerpt pulled from page content
   This is the fix for: "feature image is not more than 300px and is
   set to left column and the right column is the excerpt."
   =================================================================== */
.post-list {
    display:        flex;
    flex-direction: column;
    gap:            var(--sp-lg);
    padding-bottom: var(--sp-2xl);
}

.post-row {
    display:        grid;
    /* LEFT column hard-capped at 300px, RIGHT column flexes */
    grid-template-columns: minmax(0, 300px) 1fr;
    gap:            var(--sp-lg);
    align-items:    start;
    padding-bottom: var(--sp-lg);
    border-bottom:  1px solid var(--c-border);
}
.post-row:last-child { border-bottom: 0; }

/* LEFT — feature image */
.post-row__media {
    position:      relative;
    width:         100%;
    max-width:     300px;          /* hard cap */
    aspect-ratio:  16 / 10;
    overflow:      hidden;
    border-radius: var(--card-radius);
    background:    var(--c-surface-2);
    border:        1px solid var(--c-border);
    transition:    border-color .2s var(--ease), transform .35s var(--ease);
}
.post-row__media img {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform .6s var(--ease);
}
.post-row:hover .post-row__media        { border-color: var(--c-border-hover); }
.post-row:hover .post-row__media img    { transform: scale(1.04); }

/* Placeholder when no thumbnail */
.post-row__media--empty {
    display:        flex;
    align-items:    center;
    justify-content:center;
}
.post-row__media--empty span {
    font-family: var(--font-display);
    font-size:   3rem;
    color:       var(--c-text-faint);
}

/* RIGHT — text / excerpt */
.post-row__body {
    min-width: 0;   /* allow text to wrap inside grid track */
}
.post-row__eyebrow {
    display:       flex;
    align-items:   center;
    gap:           .5rem;
    flex-wrap:     wrap;
    margin-bottom: .5rem;
}
.post-row__date {
    font-size:      .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color:          var(--c-text-faint);
}
.post-row__title {
    font-size:     clamp(1.5rem, 2.4vw, 2.1rem);
    line-height:   1.08;
    margin-bottom: .5rem;
}
.post-row__title a { color: var(--c-text); }
.post-row__title a:hover { color: var(--c-red); }

.post-row__excerpt {
    font-size:     .95rem;
    color:         rgba(240,239,236,.78);
    line-height:   1.7;
    max-width:     68ch;
    margin-bottom: var(--sp-sm);
}
.post-row__more {
    display:        inline-flex;
    align-items:    center;
    gap:            .4em;
    font-size:      .8rem;
    font-weight:    600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color:          var(--c-red);
}
.post-row__more:hover { color: var(--c-red-hover); }
.post-row__more::after {
    content:    '→';
    transition: transform .2s var(--ease);
}
.post-row__more:hover::after { transform: translateX(3px); }

/* Responsive — stack on small screens */
@media (max-width: 680px) {
    .post-row {
        grid-template-columns: 1fr;
        gap: var(--sp-md);
    }
    .post-row__media { max-width: 100%; aspect-ratio: 16 / 9; }
}

/* ===================================================================
   LAYOUT TOGGLE — list vs grid (archive/blog views, v2.0)
   =================================================================== */
.view-toggle {
    display:     inline-flex;
    gap:         .25rem;
    margin-left: auto;
    background:  var(--c-surface-2);
    border:      1px solid var(--c-border);
    border-radius: 50px;
    padding:     .2rem;
}
.view-toggle__btn {
    display:        inline-flex;
    align-items:    center;
    gap:            .35em;
    padding:        .3em .8em;
    border-radius:  50px;
    font-size:      .72rem;
    font-weight:    600;
    letter-spacing: .04em;
    color:          var(--c-text-muted);
    transition:     background .18s, color .18s;
}
.view-toggle__btn.is-active {
    background: var(--c-red);
    color:      #fff;
}

/* ===================================================================
   SKIP LINK (a11y, v2.0)
   =================================================================== */
.skip-link {
    position:   absolute;
    left:       -9999px;
    top:        0;
    z-index:    999;
    background: var(--c-red);
    color:      #fff;
    padding:    .7em 1.2em;
    font-weight:600;
    border-radius: 0 0 4px 0;
}
.skip-link:focus {
    left:  0;
    color: #fff;
}

/* ===================================================================
   ============  CONSOLIDATED FIXES  (v2.1.0)  =======================
   Replaces all earlier appended patches. Loaded last → wins cascade.
   Fixes: (A) oversized fonts  (B) invisible header  (C) hidden posters
   plus the prior responsive / thumbnail / no-sidebar work, cleaned up.
   =================================================================== */

/* -------------------------------------------------------------------
   GLOBAL GUARDS
   ------------------------------------------------------------------- */
html, body { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { min-width: 0; }
img, video, iframe, svg, table { max-width: 100%; }
img, video { height: auto; }
h1, h2, h3, h4, h5, h6, p, a, li, dd, span { overflow-wrap: break-word; }
.wrap { padding-left: clamp(1rem, 4vw, 2rem); padding-right: clamp(1rem, 4vw, 2rem); }

/* -------------------------------------------------------------------
   (A) FONT SIZES — hard, sane caps. The theme's vw-based clamps blew
   up on wide screens. These ceilings keep type readable everywhere.
   ------------------------------------------------------------------- */
h1 { font-size: 20px !important}
h2 { font-size: 18px !important}
h3 { font-size: 17px !important}
h4 { font-size: 16px !important }

/* Homepage / catalog hero */
.site-hero__title  { font-size: clamp(2.4rem, 5vw, 4rem) !important; line-height: 1.04; }
.site-hero__logline{ font-size: clamp(.95rem, 1.4vw, 1.1rem) !important; }

/* Single film hero */
.title-hero__title { font-size: clamp(2rem, 4.5vw, 3.4rem) !important; }

/* Section headings */
.section-head__title { font-size: clamp(1.5rem, 3vw, 2.2rem) !important; }

/* Catalog card titles — these were rendering huge */
.poster-card__title { font-size: 1rem !important; line-height: 1.2; }
.poster-card__title a { font-size: inherit; }

/* List-row titles */
.post-row__title { font-size: clamp(1.3rem, 2.4vw, 1.9rem) !important; }

/* Footer + services numerals */
.services-strip__num { font-size: 2rem !important; }
.site-footer__logo, .site-hero__eyebrow { font-size: 1.6rem; }

/* -------------------------------------------------------------------
   (B) HEADER — always visible. The bar was transparent until the page
   scrolled; at the top it vanished against the dark page. Give it a
   solid background at all times, and pad the page so content isn't
   hidden underneath the fixed bar.
   ------------------------------------------------------------------- */
.site-header {
    position: fixed !important;
    padding: 20px 0;
    top: 32px !important;
    left:       0 !important;
    right:      0 !important;
    z-index:    900 !important;
    background: rgba(9,9,9,.97) !important;
    border-bottom: 1px solid var(--c-border) !important;
    backdrop-filter: blur(12px);
}
.site-header.scrolled {
    box-shadow: 0 4px 40px rgba(0,0,0,.6);
}
.site-header__inner { gap: clamp(1rem, 3vw, 2rem); }

/* Make sure the logo text is visible and not oversized */
.site-logo__text { font-size: 1.5rem !important; color: var(--c-text); }
@media (max-width: 480px) { .site-logo__text { font-size: 1.25rem !important; } }

/* Push the homepage hero (which sits under the fixed header) down so it
   isn't covered. Header now starts at 52px, so add that to the offset. */
body.is-front .site-hero { padding-top: calc(var(--nav-h) + 52px + 1rem); }
.site-hero, .title-hero { scroll-margin-top: calc(var(--nav-h) + 52px); }

/* -------------------------------------------------------------------
   (C) POSTER IMAGES — guarantee a box for the absolutely-positioned
   image to fill. The 2:3 ratio came from padding-bottom:150% on the
   wrap; we make that explicit with aspect-ratio + min-height so the
   image can never collapse to zero height.
   ------------------------------------------------------------------- */
.poster-card__image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    padding-bottom: 0;          /* replace the % hack with aspect-ratio */
    min-height: 220px;
    overflow: hidden;
    background: var(--c-surface-2);
    border-radius: var(--poster-radius);
}
.poster-card__image-wrap img,
.poster-card__img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center;
    display: block;
}

/* List-row media keeps its 300px cap + fixed ratio */
.post-row__media { aspect-ratio: 16 / 10; }
.post-row__media img,
.post-row__img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}

/* -------------------------------------------------------------------
   CATALOG GRID — column counts that fit each width
   ------------------------------------------------------------------- */
.grid-auto { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-sm); }
@media (min-width: 480px)  { .grid-auto { grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sp-md); } }
@media (min-width: 768px)  { .grid-auto { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (min-width: 1024px) { .grid-auto { grid-template-columns: repeat(5, minmax(0,1fr)); } }
@media (min-width: 1280px) { .grid-auto { grid-template-columns: repeat(6, minmax(0,1fr)); } }

/* -------------------------------------------------------------------
   POSTER RAIL — scroll edge-to-edge, no .wrap conflict
   ------------------------------------------------------------------- */
.poster-rail__track.wrap {
    max-width: 100%; margin: 0;
    padding-left: clamp(1rem, 4vw, 2rem);
    padding-right: clamp(1rem, 4vw, 2rem);
}
@media (max-width: 640px) { .poster-rail__track { grid-auto-columns: 40vw; } }

/* -------------------------------------------------------------------
   POSTER TILT — off on touch / small screens
   ------------------------------------------------------------------- */
@media (hover: none), (pointer: coarse), (max-width: 768px) {
    .poster-card:hover .poster-card__inner { transform: translateY(-2px) !important; }
    .poster-card__img { transition: none; }
}

/* -------------------------------------------------------------------
   HEADER NAV — My Rentals CTA into mobile menu
   ------------------------------------------------------------------- */
@media (max-width: 480px) { .site-nav__cta { display: none; } }
@media (max-width: 860px) {
    .site-nav.is-open .site-nav__cta { display: block; margin-top: var(--sp-md); }
    .site-nav__cta .btn { width: 100%; justify-content: center; }
}

/* -------------------------------------------------------------------
   SINGLE POST — full width (sidebar removed)
   ------------------------------------------------------------------- */
.single-layout { grid-template-columns: 1fr !important; max-width: 860px;
    margin: 0 auto;
    
}

/* -------------------------------------------------------------------
   MISC RESPONSIVE
   ------------------------------------------------------------------- */
@media (max-width: 900px) {
    .title-hero__poster { width: 150px; margin-left: var(--sp-md); }
}
@media (max-width: 560px) {
    .title-hero__poster { float: none; display: block; width: 130px; margin: 0 0 var(--sp-md); }
    .services-strip__grid { grid-template-columns: 1fr; }
    .site-footer__grid    { grid-template-columns: 1fr; gap: var(--sp-lg); }
    .view-toggle { margin-left: 0; width: 100%; justify-content: center; }
}
.filter-bar { row-gap: .5rem; }
.entry-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ===================================================================
   POSTER FALLBACK LETTER  (v2.1.2)
   Sits behind the image; visible only when no image resolves, so a
   card is never a blank box. The <img> (z-index above) covers it.
   =================================================================== */
.poster-card__fallback {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 3rem;
    color: var(--c-text-faint);
    background: var(--c-surface-3);
}
.poster-card__image-wrap img,
.poster-card__img {
    z-index: 1;   /* cover the fallback letter when an image exists */
}


/* Vimeo / responsive video embeds — correct 16:9, no cropping */
.entry-content figure.wp-block-embed,
.single-primary figure.wp-block-embed,
.single-layout figure.wp-block-embed {
    margin: 1rem 0;
}

.entry-content .wp-block-embed__wrapper,
.single-primary .wp-block-embed__wrapper,
.single-layout .wp-block-embed__wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%;   /* 1080 / 1920 = exact 16:9 */
    margin: 0;
    line-height: 0;
}

/* Let the video extend wider than the text column */
.entry-content {
    overflow: visible;
}
.entry-content iframe[src*="player.vimeo.com"] {
    width: 100vw;
    max-width: 1100px;          /* same control number */
    margin-left: 50%;
    transform: translateX(-50%); /* center the wider video */
}

/* Tighten space directly around the Vimeo video */
.entry-content iframe[src*="player.vimeo.com"],
.single-primary iframe[src*="player.vimeo.com"],
.single-layout iframe[src*="player.vimeo.com"] {
    position: relative;
    display: block;
    width: 100%;
    max-width: 1100px;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
   
}

/* Kill the gap ABOVE: remove top padding/margin on the content + first child */
.entry-content { padding-top: 0 !important; }
.entry-content > *:first-child { margin-top: 0 !important; }

/* Kill the gap BELOW: pull the first heading after the video up close */
.entry-content iframe[src*="player.vimeo.com"] + h4,
.entry-content iframe[src*="player.vimeo.com"] + .wp-block-heading {
    margin-top: 0.75rem !important;   /* small, deliberate gap — raise/lower */
}