/* =========================================================
   LEEFHub FRONTEND — UNIFIED BOXED LAYOUT (1200px)
========================================================= */

/* --------------------------------------
   UNIVERSAL PAGE-WIDTH CONTAINER
-------------------------------------- */
.leefhub-container,
.leefhub-single-wrapper,
.leefhub-media-programs,
.leefhub-media-collections,
.leefhub-media-gallery {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}


/* =========================================================
   1. UNIVERSAL 16:9 COVER BOX (ALL THUMBNAILS)
========================================================= */

.media-thumb,
.program-cover,
.program-cover-large-wrapper,
.program-video-card .media-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
    background: #000;
    border-radius: 12px;
    display: block;
}

.media-thumb img,
.program-cover img,
.program-video-card .media-thumb img,
.program-cover-large-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* =========================================================
   2. GALLERY GRID (VIDEO LIBRARY)
========================================================= */

.leefhub-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
    gap: 24px;
}

@media(max-width:900px){
    .leefhub-media-grid { grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); }
}
@media(max-width:600px){
    .leefhub-media-grid { grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); }
}
@media(max-width:480px){
    .leefhub-media-grid { grid-template-columns: 1fr; }
}

.media-card {
    background:#fff;
    border:1px solid #eee;
    border-radius:12px;
    padding:8px;
    transition:.2s;
}
.media-card:hover {
    transform:translateY(-2px);
    box-shadow:0 4px 10px rgba(0,0,0,0.08);
}

.play-overlay {
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%, -50%);
    width:58px; height:58px;
    border-radius:50%;
    background:rgba(0,0,0,0.6);
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    transition:.25s;
}
.media-thumb:hover .play-overlay { opacity:1; }

.media-title {
    font-size:1rem;
    font-weight:600;
    margin-top:8px;
}


/* =========================================================
   3. COLLECTIONS — NETFLIX STYLE ROWS (ALWAYS SCROLLBAR)
========================================================= */

/* ===== OUTER WRAPPER (MUST NOT CLIP SCROLLBAR) ===== */
.leefhub-collection-wrapper {
    width: 100%;
    position: relative;
    overflow: visible !important;
    display: flex;
    align-items: center;
}

/* ===== SCROLLING ROW ===== */
.leefhub-collection-row {
    width: 100%;
    display: flex;
    gap: 12px;
    overflow-x: scroll !important;     /* always allow scroll */
    overflow-y: hidden !important;
    padding-bottom: 16px;              /* space for scrollbar */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* ALWAYS FORCE OVERFLOW (EVEN WITH 3–4 ITEMS) */
@media (min-width: 768px) {
  .leefhub-collection-row::after {
    content: "";
    flex: 0 0 120px; /* ensures overflow beyond width */
  }
}

/* =========================================================
   ALWAYS-VISIBLE DESKTOP SCROLLBAR
========================================================= */
@media (min-width: 768px) {

  /* Firefox scrollbar visible */
  .leefhub-collection-row {
      scrollbar-width: thin !important;
      scrollbar-color: rgba(0,0,0,0.45) rgba(0,0,0,0.12) !important;
  }

  /* Chrome + Safari scrollbar visible */
  .leefhub-collection-row::-webkit-scrollbar {
      height: 10px !important;
  }
  .leefhub-collection-row::-webkit-scrollbar-track {
      background: rgba(0,0,0,0.12) !important;
      border-radius: 6px;
  }
  .leefhub-collection-row::-webkit-scrollbar-thumb {
      background: rgba(0,0,0,0.45) !important;
      border-radius: 6px;
  }
}

/* MOBILE: HIDE SCROLLBAR COMPLETELY */
@media (max-width: 767px) {
  .leefhub-collection-row {
      scrollbar-width: none !important;
  }
  .leefhub-collection-row::-webkit-scrollbar {
      display: none !important;
  }
}

/* =========================================================
   NETFLIX RESPONSIVE SIZING
========================================================= */

/* Ensure each item always scrolls */
.leefhub-collection-row .media-thumb {
    min-width: 240px;
    flex-shrink: 0;
    border-radius: 12px;
}

/* Desktop: ~4.5 items per row */
@media (min-width: 1301px) {
  .leefhub-collection-row .media-thumb {
    flex: 0 0 calc((100% - 36px) / 4.5);
  }
}

/* Medium Desktop: ~3.5 items */
@media (max-width: 1300px) and (min-width: 1101px) {
  .leefhub-collection-row .media-thumb {
    flex: 0 0 calc((100% - 24px) / 3.5);
  }
}

/* Tablet: ~2.5 items */
@media (max-width: 1100px) and (min-width: 769px) {
  .leefhub-collection-row .media-thumb {
    flex: 0 0 calc((100% - 12px) / 2.5);
  }
}

/* Small Tablet: ~1.8 items */
@media (max-width: 768px) and (min-width: 521px) {
  .leefhub-collection-row .media-thumb {
    flex: 0 0 calc((100% - 12px) / 1.8);
  }
}

/* Mobile: 1.3 peek (like Netflix mobile) */
@media (max-width: 520px) and (min-width: 421px) {
  .leefhub-collection-row .media-thumb {
    flex: 0 0 70%;
  }
}

/* Smallest Mobile: full width per card */
@media (max-width: 420px) {
  .leefhub-collection-row .media-thumb {
    flex: 0 0 100%;
  }
}

/* =========================================================
   4. PROGRAMS GRID
========================================================= */

.leefhub-programs-grid {
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
    gap:24px;
}

@media(max-width:768px){
    .leefhub-programs-grid {
        grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
    }
}

.leefhub-program-card {
    background:#fff;
    border:2px solid #eee;
    border-radius:12px;
    overflow:hidden;
    transition:.25s;
}
.leefhub-program-card:hover {
    transform:translateY(-4px);
    border-color:#0073aa;
    box-shadow:0 6px 16px rgba(0,0,0,0.15);
}

.program-info { padding:14px 16px; }

.program-title {
    font-size:1.1em;
    font-weight:600;
    margin:0 0 6px;
}

.program-desc {
    font-size:.9em;
    color:#666;
    margin:0;
    line-height:1.4;
}


/* =========================================================
   5. PROGRAM SINGLE PAGE
========================================================= */

.program-header {
    margin-bottom:32px;
    text-align:center;
}

.program-cover-large-wrapper {
    max-width:900px;
    margin:0 auto 20px;
    border-radius:12px;
}

.program-meta {
    max-width:800px;
    margin:0 auto;
}


/* =========================================================
   6. SINGLE VIDEO PLAYER (16:9)
========================================================= */

.media-player { width:100%; }

.media-aspect {
    width:100%;
    aspect-ratio:16/9;
    background:#000;
    border-radius:8px;
    overflow:hidden;
    position:relative;
}

.media-aspect video {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:100%;
    height:100%;
    object-fit:contain;
}

/* Allow LeefHub layouts to escape Divi constraints */
.et_pb_text_inner .leefhub-root,
.et_pb_module .leefhub-root {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

/* Fix Divi column behavior breaking horizontal rows */
.et_pb_column .leefhub-root {
    overflow: visible !important;
}

/* Fix Netflix horizontal scroll */
.leefhub-root .leefhub-collection-row {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* Fix <p> wrapper around shortcode */
.et_pb_text_inner p > .leefhub-root {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Make Divi wrappers transparent for LeefHub */
.et_pb_text_inner .leefhub-root,
.et_pb_text_inner * > .leefhub-root,
.et_pb_text .leefhub-root,
.et_pb_column .leefhub-root,
.et_pb_row .leefhub-root {
    width:100% !important;
    max-width:100% !important;
    padding:0 !important;
    margin:0 !important;
    display:block !important;
    overflow:visible !important;
}

/* Ensure horizontal scroll always works */
.leefhub-root .leefhub-collection-row {
    overflow-x:auto !important;
}

/* Ensure grids can break responsively */
.leefhub-root .leefhub-media-grid,
.leefhub-root .leefhub-collection-row,
.leefhub-root .leefhub-programs-grid {
    width:100% !important;
}

/* =========================================================
   7. Edit Media Single Program
========================================================= */
/* SMALLER PROGRAM COVER */
.program-cover-wrapper-small {
    margin: 0 auto 30px auto;
    text-align: center;
}

.program-cover-img {
    width: 60%;          /* smaller */
    max-width: 600px;
    border-radius: 16px;
    display: block;
    margin: 0 auto;
}

/* VIDEO ROW LIST */
.program-video-list-rows {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 32px;
}

/* Video Row */
.program-video-row {
    display: flex;
    gap: 20px;
    padding: 18px;
    background: #fafafa;
    border-radius: 12px;
    align-items: center;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s ease;
}

.program-video-row:hover {
    background: #f0f0f0;
}

/* Thumbnail */
.row-thumb img {
    width: 200px;        /* smaller + proportional */
    height: 120px;
    object-fit: cover;
    border-radius: 12px;
}

/* Text Layout */
.row-info h3 {
    margin: 0 0 6px;
    font-size: 1.1rem;
}

.row-info p {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.75;
}

/* MOBILE STACKING FOR VIDEO ROW */
@media (max-width: 640px) {

    .program-video-row {
        flex-direction: column;
        align-items: flex-start; /* Keep text left-aligned */
        padding: 16px;
        gap: 12px;
    }

    .row-thumb img {
        width: 100%;              /* full width thumb */
        height: auto;             /* keep aspect ratio */
        max-height: 180px;        /* optional: avoids giant images */
        object-fit: cover;
        border-radius: 12px;
    }

    .row-info h3 {
        font-size: 1rem;
    }

    .row-info p {
        font-size: 0.9rem;
    }
}

.leefhub-scroll-arrow { z-index: 99 !important; }
.hidden { display:block !important; }


/* =========================================================
   8. Media Thumb
========================================================= */
.media-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
    background: #000;
    border-radius: 12px;
    flex-shrink: 0;
}

.media-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}