/* =========================================================
   TSAEAMF MASTER THEME
   Master visual system based on schedule.php
   Palette:
   --tsa-brand       #8B0000
   --tsa-brand-dark  #650000
   --tsa-brand-deep  #4D0000
   --tsa-gold        #C59D5F
   --tsa-gold-dark   #B38744
   --tsa-ink         #1F1F1F
   --tsa-paper       #F8F6F2
   --tsa-border      #EADFD2
========================================================= */
:root{
  --tsa-brand:#8B0000;
  --tsa-brand-dark:#650000;
  --tsa-brand-deep:#4D0000;
  --tsa-gold:#C59D5F;
  --tsa-gold-dark:#B38744;
  --tsa-ink:#1F1F1F;
  --tsa-muted:#6C757D;
  --tsa-paper:#F8F6F2;
  --tsa-white:#fff;
  --tsa-border:#EADFD2;
  --tsa-shadow:0 14px 38px rgba(31,31,31,.09);
  --tsa-radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  padding-top:88px;
  font-family:'Heebo',Arial,sans-serif;
  color:var(--tsa-ink);
  background:#fff;
  line-height:1.7;
}
body.is-home{padding-top:88px}
a{color:var(--tsa-brand);text-decoration:none;transition:.25s ease}
a:hover{color:var(--tsa-brand-dark)}
h1,h2,h3,h4,h5,h6{
  font-family:'Merriweather',Georgia,serif;
  font-weight:700;
  color:var(--tsa-ink);
  line-height:1.25;
}
img{max-width:100%;height:auto}
::selection{background:var(--tsa-brand);color:#fff}
.container,.tsa-container{max-width:1180px}

/* NAVIGATION */
.tsa-navbar{
  min-height:88px;
  background:rgba(255,255,255,.98)!important;
  border-bottom:3px solid var(--tsa-brand);
  box-shadow:0 8px 25px rgba(31,31,31,.08);
  z-index:1030;
}
.tsa-logo{width:auto;height:58px;object-fit:contain}
.tsa-brand{gap:11px;color:var(--tsa-ink)!important;padding:10px 0}
.tsa-brand-copy{display:flex;flex-direction:column;line-height:1.05}
.tsa-brand-copy strong{font-family:'Merriweather',serif;font-size:1rem;color:var(--tsa-brand)}
.tsa-brand-copy small{font-size:.72rem;color:var(--tsa-muted);margin-top:5px;white-space:nowrap}
.tsa-navbar .nav-link{
  color:#333!important;font-weight:700;padding:31px 10px!important;position:relative
}
.tsa-navbar .nav-link:hover,.tsa-navbar .nav-link.active{color:var(--tsa-brand)!important}
.tsa-navbar .nav-link.active:after{
  content:"";position:absolute;left:10px;right:10px;bottom:14px;height:2px;
  background:var(--tsa-brand);border-radius:2px
}
.tsa-navbar .dropdown-menu{
  border:0;border-top:3px solid var(--tsa-brand);border-radius:0 0 12px 12px;
  box-shadow:0 14px 35px rgba(0,0,0,.12);padding:8px;min-width:210px
}
.tsa-navbar .dropdown-item{padding:10px 13px;border-radius:8px;font-weight:600}
.tsa-navbar .dropdown-item:hover,.tsa-navbar .dropdown-item.active{background:rgba(139,0,0,.07);color:var(--tsa-brand)}
.tsa-btn{border-radius:999px;padding:.72rem 1.25rem;font-weight:800;border:1px solid transparent;transition:.25s}
.tsa-btn-primary{background:var(--tsa-brand);color:#fff!important;border-color:var(--tsa-brand)}
.tsa-btn-primary:hover{background:var(--tsa-brand-dark);border-color:var(--tsa-brand-dark);transform:translateY(-1px)}
.tsa-btn-gold{background:var(--tsa-gold);color:#fff!important;border-color:var(--tsa-gold)}
.tsa-btn-outline{border-color:var(--tsa-brand);color:var(--tsa-brand);background:#fff}
.tsa-btn-outline:hover{background:var(--tsa-brand);color:#fff}
.tsa-toggler{border-color:var(--tsa-border)}
.tsa-toggler:focus{box-shadow:0 0 0 .2rem rgba(139,0,0,.15)}

/* COMMON PAGE TREATMENT */
.tsa-page-banner{
  position:relative;overflow:hidden;
  padding:78px 0 72px;
  background:linear-gradient(135deg,var(--tsa-brand-deep),var(--tsa-brand));
  color:#fff;
}
.tsa-page-banner:after{
  content:"";position:absolute;width:330px;height:330px;border-radius:50%;
  right:-110px;top:-160px;background:rgba(197,157,95,.18)
}
.tsa-page-banner .container{position:relative;z-index:1}
.tsa-page-banner h1{color:#fff;font-size:clamp(2rem,4vw,3.2rem);margin:0 0 12px}
.tsa-page-banner p{margin:0;color:rgba(255,255,255,.86);font-size:1.05rem}
.tsa-breadcrumb{margin-top:20px}
.tsa-breadcrumb a{color:var(--tsa-gold)}
.tsa-breadcrumb span{color:rgba(255,255,255,.75);margin:0 8px}
.section-padding{padding:78px 0}
.section-light{background:var(--tsa-paper)}
.tsa-section-title{text-align:center;margin-bottom:45px}
.tsa-section-title .eyebrow{
  color:var(--tsa-gold-dark);font-size:.78rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px
}
.tsa-section-title h2{color:var(--tsa-brand);margin:0}
.tsa-section-title h2:after{
  content:"";display:block;width:68px;height:3px;background:var(--tsa-gold);
  margin:14px auto 0;border-radius:4px
}
.tsa-card,.feature-card,.leader-card,.sponsor-card,.download-card,.news-card,.gallery-card{
  background:#fff;border:1px solid var(--tsa-border);border-radius:var(--tsa-radius);
  box-shadow:var(--tsa-shadow);overflow:hidden;transition:.28s ease
}
.tsa-card:hover,.feature-card:hover,.leader-card:hover,.sponsor-card:hover,.download-card:hover,.news-card:hover,.gallery-card:hover{
  transform:translateY(-5px);box-shadow:0 20px 45px rgba(31,31,31,.13)
}
.tsa-card-body{padding:28px}
.tsa-icon{
  width:58px;height:58px;border-radius:15px;display:flex;align-items:center;justify-content:center;
  background:rgba(139,0,0,.08);color:var(--tsa-brand);font-size:1.35rem;margin-bottom:18px
}
.tsa-kicker{color:var(--tsa-gold-dark);font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.78rem}
.tsa-lead{font-size:1.08rem;color:#555}
.tsa-divider{height:1px;background:var(--tsa-border);margin:30px 0}

/* TABLES */
.table{--bs-table-border-color:var(--tsa-border);margin-bottom:0}
.table thead th{
  background:var(--tsa-brand);color:#fff;border:0;padding:14px 15px;font-weight:800
}
.table tbody td{padding:13px 15px;vertical-align:middle}
.table tbody tr:hover{background:rgba(197,157,95,.08)}
.schedule-table{border-collapse:separate;border-spacing:0;width:100%;overflow:hidden;border:1px solid var(--tsa-border);border-radius:14px}
.schedule-table thead th{background:var(--tsa-brand)}
.activity-icon{color:var(--tsa-gold);margin-right:8px}

/* FORMS */
.form-control,.form-select{
  border:1px solid #d9cbbb;border-radius:10px;padding:.78rem .9rem;min-height:48px
}
.form-control:focus,.form-select:focus{
  border-color:var(--tsa-gold);box-shadow:0 0 0 .2rem rgba(197,157,95,.18)
}
.form-label{font-weight:700}
.form-check-input:checked{background-color:var(--tsa-brand);border-color:var(--tsa-brand)}
.alert{border:0;border-left:4px solid var(--tsa-gold);border-radius:10px}

/* IMAGES / GALLERY */
.gallery-card img,.news-card img,.leader-card img,.sponsor-card img{transition:.4s ease}
.gallery-card:hover img,.news-card:hover img{transform:scale(1.03)}
.gallery-card .gallery-caption{padding:16px 18px;font-weight:700}

/* HOME/EXISTING COMPONENT COMPATIBILITY */
.hero,.schedule-hero,.contact-hero,.hero-leadership{position:relative}
.hero-overlay{background:linear-gradient(rgba(77,0,0,.78),rgba(31,31,31,.58))!important}
.btn-brand,.btn-primary{background:var(--tsa-brand)!important;border-color:var(--tsa-brand)!important;color:#fff!important}
.btn-brand:hover,.btn-primary:hover{background:var(--tsa-brand-dark)!important;border-color:var(--tsa-brand-dark)!important}
.section-title{color:var(--tsa-brand)}
.page-hero{background:linear-gradient(135deg,var(--tsa-brand-deep),var(--tsa-brand))!important}
.page-hero h1,.page-hero h2,.hero-text h1{color:#fff}
.service-item{background:var(--tsa-paper)}
.service-item:hover{background:var(--tsa-brand)!important}
.countdown-wrap{background:linear-gradient(135deg,var(--tsa-brand-deep),var(--tsa-brand))!important}
.count-box{border:1px solid var(--tsa-border)}
.stats{background:var(--tsa-paper)}
.leader-card{border-top:3px solid var(--tsa-brand)}
.leader-card img{border-color:var(--tsa-gold)!important}

/* SCHEDULE MASTER */
.schedule-hero{
  min-height:330px;display:flex;align-items:center;
  background:linear-gradient(135deg,rgba(77,0,0,.94),rgba(139,0,0,.84)),url('../img/TSANMF%20(794).jpg') center/cover;
}
.schedule-hero h1,.schedule-hero h2,.schedule-hero p{color:#fff}
.breadcrumb-area{background:var(--tsa-paper);padding:14px 0;border-bottom:1px solid var(--tsa-border)}
.schedule-tabs .btn,.schedule-filter .btn{border-radius:999px}
.schedule-search{border-radius:999px!important;padding-left:20px}
.fade-up{opacity:0;transform:translateY(20px);transition:.65s ease}
.fade-up.show{opacity:1;transform:none}

/* FOOTER */
.tsa-footer{
  background:linear-gradient(135deg,var(--tsa-brand-deep),#260000);
  color:rgba(255,255,255,.8);padding:64px 0 0;margin-top:70px
}
.tsa-footer h5{color:#fff;font-size:1rem;margin-bottom:18px}
.tsa-footer a{color:rgba(255,255,255,.8);display:block;margin-bottom:9px}
.tsa-footer a:hover{color:var(--tsa-gold)}
.footer-brand{display:flex!important;align-items:center;gap:12px;color:#fff!important}
.footer-brand img{width:58px;height:58px;object-fit:contain;border-radius:10px;background:#fff}
.footer-brand span{display:flex;flex-direction:column;line-height:1.1}
.footer-brand strong{font-family:'Merriweather',serif;font-size:1.1rem}
.footer-brand small{color:var(--tsa-gold);margin-top:5px}
.tsa-footer p{color:rgba(255,255,255,.72)}
.tsa-socials{display:flex;gap:8px;margin-top:20px}
.tsa-socials a{width:38px;height:38px;border:1px solid rgba(255,255,255,.25);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0}
.tsa-socials a:hover{background:var(--tsa-gold);border-color:var(--tsa-gold);color:#fff}
.footer-festival-meta{border-top:1px solid rgba(255,255,255,.12);padding-top:14px;margin-top:15px;display:grid;gap:7px}
.tsa-footer-bottom{
  margin-top:45px;padding:20px 0;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:20px;font-size:.88rem;color:rgba(255,255,255,.55)
}
.tsa-backtop{
  position:fixed;right:24px;bottom:24px;width:44px;height:44px;border:0;border-radius:50%;
  background:var(--tsa-brand);color:#fff;box-shadow:0 8px 25px rgba(0,0,0,.2);
  opacity:0;visibility:hidden;transition:.25s;z-index:1020
}
.tsa-backtop.show{opacity:1;visibility:visible}

/* MODALS */
.modal-content{border:0;border-radius:18px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.modal-header{background:var(--tsa-brand);color:#fff;border:0}
.modal-header h1,.modal-header h2,.modal-header h3,.modal-header h4,.modal-header h5{color:#fff}
.modal-header .btn-close{filter:invert(1)}

/* COMMON LEGACY FOOTER OVERRIDES */
.site-footer,.footer{background:linear-gradient(135deg,var(--tsa-brand-deep),#260000)!important;color:#fff!important}
.site-footer a,.footer a{color:rgba(255,255,255,.8)}
.bg-dark{background:var(--tsa-brand-deep)!important}

/* RESPONSIVE */
@media (max-width:991.98px){
  body,body.is-home{padding-top:74px}
  .tsa-navbar{min-height:74px}
  .tsa-logo{height:48px}
  .tsa-navbar .nav-link{padding:10px 4px!important}
  .tsa-navbar .nav-link.active:after{display:none}
  .tsa-navbar .navbar-collapse{
    background:#fff;margin:0 -12px;padding:12px 18px 18px;
    border-top:1px solid var(--tsa-border);box-shadow:0 12px 25px rgba(0,0,0,.06)
  }
  .tsa-navbar .dropdown-menu{box-shadow:none;border-top:1px solid var(--tsa-border);border-left:3px solid var(--tsa-brand);border-radius:0}
  .tsa-register-btn{display:inline-block;margin-top:5px}
  .section-padding{padding:58px 0}
  .tsa-page-banner{padding:55px 0}
}
@media (max-width:575.98px){
  .tsa-brand-copy small{font-size:.62rem}
  .tsa-brand-copy strong{font-size:.88rem}
  .tsa-logo{height:43px}
  .tsa-page-banner h1{font-size:1.85rem}
  .tsa-footer{padding-top:48px}
  .tsa-footer-bottom{display:block}
  .tsa-footer-bottom span{display:block;margin-bottom:5px}
}

/* PRINT */
@media print{
  .tsa-navbar,.tsa-footer,.tsa-backtop{display:none!important}
  body{padding:0!important}
}
/* ============================================================
   TSA EAST AFRICA MUSIC FESTIVAL
   PROFESSIONAL LIVE PAGE
   ============================================================ */

.tsa-live-page {
    background: #ffffff;
    color: #111111;
}


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

.tsa-live-hero {
    position: relative;
    overflow: hidden;
    padding: 105px 0 100px;
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(255,255,255,.10),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #080808 0%,
            #141414 48%,
            #222222 100%
        );
    color: #ffffff;
}

.tsa-live-hero-pattern {
    position: absolute;
    width: 700px;
    height: 700px;
    right: -320px;
    top: -300px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
}

.tsa-live-hero-pattern::before,
.tsa-live-hero-pattern::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 50%;
}

.tsa-live-hero-pattern::before {
    inset: 80px;
}

.tsa-live-hero-pattern::after {
    inset: 160px;
}


.tsa-live-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr);
    align-items: center;
    gap: 80px;
}


.tsa-live-hero-content {
    max-width: 760px;
}


.tsa-live-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 15px;
    margin-bottom: 25px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}


.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e21b23;
    box-shadow: 0 0 0 5px rgba(226,27,35,.16);
}


.tsa-live-kicker {
    display: block;
    margin-bottom: 15px;
    color: #e21b23;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2.5px;
}


.tsa-live-hero h1 {
    margin: 0;
    font-size: clamp(52px, 7vw, 92px);
    line-height: .98;
    letter-spacing: -3px;
    font-weight: 900;
}


.tsa-live-hero h1 span {
    display: block;
    color: rgba(255,255,255,.45);
}


.tsa-live-intro {
    max-width: 690px;
    margin: 30px 0 0;
    color: rgba(255,255,255,.70);
    font-size: 18px;
    line-height: 1.8;
}


.tsa-live-date {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 30px;
}


.date-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    color: #ffffff;
    font-size: 18px;
}


.tsa-live-date strong {
    display: block;
    font-size: 16px;
}


.tsa-live-date span {
    display: block;
    margin-top: 4px;
    color: rgba(255,255,255,.55);
    font-size: 13px;
}


.tsa-live-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 35px;
}


/* ============================================================
   BUTTONS
   ============================================================ */

.tsa-btn {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 23px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    transition: all .2s ease;
}


.tsa-btn:hover {
    transform: translateY(-2px);
}


.tsa-btn-primary {
    background: #e21b23;
    border: 1px solid #e21b23;
    color: #ffffff;
}


.tsa-btn-primary:hover {
    background: #c9141b;
    color: #ffffff;
}


.tsa-btn-light {
    border: 1px solid rgba(255,255,255,.25);
    color: #ffffff;
    background: rgba(255,255,255,.04);
}


.tsa-btn-light:hover {
    background: rgba(255,255,255,.10);
    color: #ffffff;
}


/* ============================================================
   HERO CARD
   ============================================================ */

.tsa-live-hero-card {
    padding: 30px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 16px;
    background: rgba(255,255,255,.055);
    backdrop-filter: blur(12px);
    box-shadow: 0 25px 70px rgba(0,0,0,.25);
}


.hero-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(255,255,255,.10);
}


.hero-card-top > span:first-child {
    color: rgba(255,255,255,.60);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.3px;
}


.hero-card-status {
    padding: 5px 8px;
    border-radius: 4px;
    background: rgba(226,27,35,.14);
    color: #ff6870;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
}


.hero-card-title {
    padding: 30px 0;
    font-size: 28px;
    line-height: 1.15;
    font-weight: 900;
}


.hero-card-divider {
    height: 1px;
    background: rgba(255,255,255,.10);
}


.hero-card-details {
    padding-top: 25px;
}


.hero-detail {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}


.hero-detail:last-child {
    margin-bottom: 0;
}


.hero-detail > i {
    width: 38px;
    color: #e21b23;
    font-size: 16px;
}


.hero-detail small {
    display: block;
    margin-bottom: 3px;
    color: rgba(255,255,255,.40);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
}


.hero-detail strong {
    display: block;
    color: #ffffff;
    font-size: 12px;
    letter-spacing: .4px;
}


/* ============================================================
   COUNTDOWN SECTION
   ============================================================ */

.tsa-countdown-section {
    padding: 100px 0;
    background: #f5f5f5;
    text-align: center;
}


.tsa-countdown-header {
    max-width: 700px;
    margin: 0 auto;
}


.tsa-section-label {
    display: inline-block;
    margin-bottom: 13px;
    color: #e21b23;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
}


.tsa-countdown-header h2,
.tsa-section-heading h2 {
    margin: 0 0 14px;
    color: #111111;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: -1.5px;
}


.tsa-countdown-header p,
.tsa-section-heading p {
    margin: 0;
    color: #666666;
    font-size: 16px;
    line-height: 1.75;
}


.tsa-countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 50px auto 30px;
}


.countdown-box {
    width: 145px;
    padding: 25px 15px 20px;
    border: 1px solid #dedede;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 15px 35px rgba(0,0,0,.06);
}


.countdown-box strong {
    display: block;
    color: #111111;
    font-size: 48px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -2px;
}


.countdown-box span {
    display: block;
    margin-top: 10px;
    color: #888888;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}


.countdown-separator {
    color: #bdbdbd;
    font-size: 35px;
    font-weight: 900;
}


.countdown-calendar {
    margin-top: 25px;
}


.calendar-button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 18px;
    border: 1px solid #d8d8d8;
    border-radius: 6px;
    background: #ffffff;
    color: #333333;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    transition: all .2s ease;
}


.calendar-button:hover {
    border-color: #111111;
    background: #111111;
    color: #ffffff;
}


.countdown-live-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    margin: 30px auto 0;
    padding: 13px 20px;
    border-radius: 7px;
    background: #111111;
    color: #ffffff;
    font-size: 13px;
}


.countdown-live-message strong {
    color: #ff4d55;
}


.live-now-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e21b23;
}


/* ============================================================
   PLAYER
   ============================================================ */

.tsa-player-section {
    padding: 105px 0;
    background: #ffffff;
}


.tsa-section-heading {
    max-width: 720px;
    margin: 0 auto 45px;
    text-align: center;
}


.tsa-section-heading.left {
    margin-left: 0;
    text-align: left;
}


.tsa-player-container {
    max-width: 1100px;
    margin: 0 auto;
}


.tsa-player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 14px;
    background: #050505;
    box-shadow:
        0 30px 70px rgba(0,0,0,.14),
        0 8px 20px rgba(0,0,0,.08);
}


.tsa-player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


.player-underbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 20px;
    border: 1px solid #e6e6e6;
    border-top: 0;
    border-radius: 0 0 10px 10px;
    background: #fafafa;
}


.player-status {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #555555;
    font-size: 12px;
    font-weight: 700;
}


.player-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #b5b5b5;
}


.player-youtube-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #111111;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
}


.player-youtube-link:hover {
    color: #e21b23;
}


/* ============================================================
   EXPERIENCE
   ============================================================ */

.tsa-experience-section {
    padding: 100px 0;
    background: #f5f5f5;
}


.tsa-experience-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 45px;
}


.tsa-experience-card {
    position: relative;
    overflow: hidden;
    min-height: 310px;
    padding: 30px;
    border: 1px solid #e4e4e4;
    border-radius: 12px;
    background: #ffffff;
    transition: transform .2s ease, box-shadow .2s ease;
}


.tsa-experience-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(0,0,0,.08);
}


.experience-number {
    position: absolute;
    right: 20px;
    top: 16px;
    color: #eeeeee;
    font-size: 60px;
    font-weight: 900;
    line-height: 1;
}


.experience-icon {
    position: relative;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    border-radius: 9px;
    background: #111111;
    color: #ffffff;
}


.tsa-experience-card h3 {
    position: relative;
    margin: 0 0 13px;
    color: #111111;
    font-size: 19px;
    font-weight: 900;
}


.tsa-experience-card p {
    position: relative;
    margin: 0;
    color: #666666;
    font-size: 14px;
    line-height: 1.75;
}


/* ============================================================
   BROADCAST INFORMATION
   ============================================================ */

.tsa-broadcast-info {
    padding: 105px 0;
    background: #111111;
    color: #ffffff;
}


.broadcast-info-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    align-items: center;
    gap: 80px;
}


.broadcast-info-main {
    max-width: 650px;
}


.broadcast-info-main .tsa-section-label {
    color: #e21b23;
}


.broadcast-info-main h2 {
    margin: 0 0 22px;
    color: #ffffff;
    font-size: clamp(38px, 5vw, 60px);
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -2px;
}


.broadcast-info-main > p {
    margin: 0;
    color: rgba(255,255,255,.62);
    font-size: 16px;
    line-height: 1.8;
}


.broadcast-checklist {
    margin-top: 30px;
}


.broadcast-checklist div {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 13px;
    color: rgba(255,255,255,.80);
    font-size: 14px;
}


.broadcast-checklist i {
    color: #e21b23;
}


.broadcast-time-card {
    padding: 40px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 15px;
    background: rgba(255,255,255,.055);
    text-align: center;
}


.time-card-label {
    color: rgba(255,255,255,.40);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
}


.time-card-day {
    margin-top: 25px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 3px;
}


.time-card-date {
    margin-top: 8px;
    color: #ffffff;
    font-size: 100px;
    line-height: .95;
    font-weight: 900;
}


.time-card-month {
    margin-top: 5px;
    color: #e21b23;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 2px;
}


.time-card-time {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 25px;
    padding: 11px 15px;
    border-radius: 5px;
    background: #ffffff;
    color: #111111;
    font-size: 12px;
    font-weight: 900;
}


/* ============================================================
   FINAL YOUTUBE CTA
   ============================================================ */

.tsa-youtube-cta {
    padding: 70px 0;
    background: #e21b23;
    color: #ffffff;
}


.youtube-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}


.tsa-youtube-cta .tsa-section-label {
    color: rgba(255,255,255,.65);
}


.tsa-youtube-cta h2 {
    margin: 0 0 12px;
    color: #ffffff;
    font-size: clamp(30px, 4vw, 45px);
    line-height: 1.1;
    font-weight: 900;
}


.tsa-youtube-cta p {
    max-width: 650px;
    margin: 0;
    color: rgba(255,255,255,.78);
    font-size: 15px;
    line-height: 1.7;
}


.youtube-cta-button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 55px;
    padding: 0 24px;
    border-radius: 6px;
    background: #ffffff;
    color: #111111;
    text-decoration: none;
    font-size: 13px;
    font-weight: 900;
    transition: transform .2s ease;
}


.youtube-cta-button:hover {
    transform: translateY(-2px);
    color: #111111;
}


/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */

@media (max-width: 1000px) {

    .tsa-live-hero-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }


    .tsa-live-hero-content {
        max-width: 850px;
    }


    .tsa-live-hero-card {
        max-width: 600px;
    }


    .tsa-experience-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .broadcast-info-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }


    .broadcast-time-card {
        max-width: 390px;
    }

}


/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */

@media (max-width: 700px) {

    .tsa-live-hero {
        padding: 70px 0;
    }


    .tsa-live-hero h1 {
        font-size: 48px;
        letter-spacing: -2px;
    }


    .tsa-live-intro {
        font-size: 16px;
    }


    .tsa-live-hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }


    .tsa-btn {
        width: 100%;
    }


    .tsa-live-hero-card {
        padding: 24px;
    }


    .tsa-countdown-section,
    .tsa-player-section,
    .tsa-experience-section,
    .tsa-broadcast-info {
        padding: 70px 0;
    }


    .tsa-countdown {
        gap: 5px;
    }


    .countdown-box {
        width: 70px;
        padding: 17px 5px 13px;
        border-radius: 8px;
    }


    .countdown-box strong {
        font-size: 28px;
        letter-spacing: -1px;
    }


    .countdown-box span {
        font-size: 7px;
        letter-spacing: .5px;
    }


    .countdown-separator {
        font-size: 18px;
    }


    .player-underbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }


    .tsa-experience-grid {
        grid-template-columns: 1fr;
    }


    .tsa-experience-card {
        min-height: auto;
    }


    .broadcast-info-main h2 {
        font-size: 42px;
    }


    .broadcast-time-card {
        padding: 30px;
    }


    .time-card-date {
        font-size: 80px;
    }


    .youtube-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }


    .youtube-cta-button {
        width: 100%;
    }

}


/* ============================================================
   SMALL PHONES
   ============================================================ */

@media (max-width: 420px) {

    .tsa-live-hero h1 {
        font-size: 41px;
    }


    .tsa-countdown {
        gap: 3px;
    }


    .countdown-box {
        width: 62px;
    }


    .countdown-box strong {
        font-size: 24px;
    }


    .countdown-separator {
        font-size: 15px;
    }


    .countdown-box span {
        font-size: 6px;
    }


    .time-card-date {
        font-size: 70px;
    }

}
/* ============================================================
   TSAEAMF FESTIVAL BANNER
   ============================================================ */

.tsa-festival-banner {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 620px;
    border-radius: 18px;
    background: #080808;
    box-shadow:
        0 35px 80px rgba(0, 0, 0, .35),
        0 10px 30px rgba(0, 0, 0, .20);
}


.tsa-banner-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transition: transform 1s ease;
}


.tsa-festival-banner:hover .tsa-banner-image {
    transform: scale(1.025);
}


/* Dark cinematic overlay */

.tsa-banner-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .90) 0%,
            rgba(0, 0, 0, .70) 35%,
            rgba(0, 0, 0, .28) 70%,
            rgba(0, 0, 0, .15) 100%
        );
}


/* Bottom fade */

.tsa-banner-overlay::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 45%;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, .65),
            transparent
        );
}


/* ============================================================
   CONTENT ON BANNER
   ============================================================ */

.tsa-banner-caption {
    position: relative;
    z-index: 3;

    max-width: 700px;

    padding: 75px 65px;
}


.tsa-banner-caption .tsa-live-status {
    margin-bottom: 25px;
}


.tsa-banner-caption .tsa-live-kicker {
    display: block;

    margin-bottom: 15px;

    color: #ffffff;

    font-size: 12px;
    font-weight: 900;

    letter-spacing: 3px;
}


.tsa-banner-caption h1 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(52px, 6vw, 82px);

    line-height: .98;

    letter-spacing: -3px;

    font-weight: 900;
}


.tsa-banner-caption h1 span {
    display: block;

    color: #e21b23;
}


.tsa-banner-caption .tsa-live-intro {
    max-width: 620px;

    margin-top: 28px;

    color: rgba(255, 255, 255, .78);

    font-size: 17px;

    line-height: 1.75;
}


/* ============================================================
   DATE ON BANNER
   ============================================================ */

.tsa-banner-caption .tsa-live-date {
    margin-top: 25px;
}


.tsa-banner-caption .date-icon {
    background: rgba(255, 255, 255, .10);

    border-color: rgba(255, 255, 255, .20);
}


/* ============================================================
   BANNER INFORMATION BAR
   ============================================================ */

.tsa-live-banner-info {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    margin-top: 18px;

    border: 1px solid rgba(255, 255, 255, .12);

    border-radius: 12px;

    background: rgba(255, 255, 255, .055);

    backdrop-filter: blur(12px);

    overflow: hidden;
}


.tsa-banner-info-item {
    display: flex;

    align-items: center;

    gap: 13px;

    min-height: 90px;

    padding: 20px 24px;

    border-right: 1px solid rgba(255, 255, 255, .10);
}


.tsa-banner-info-item:last-child {
    border-right: 0;
}


.tsa-banner-info-item > i {
    flex: 0 0 auto;

    width: 38px;

    color: #e21b23;

    font-size: 17px;
}


.tsa-banner-info-item small {
    display: block;

    margin-bottom: 4px;

    color: rgba(255, 255, 255, .40);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.4px;
}


.tsa-banner-info-item strong {
    display: block;

    color: #ffffff;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .3px;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 900px) {

    .tsa-festival-banner {
        min-height: 600px;
    }


    .tsa-banner-caption {
        padding: 60px 45px;
    }


    .tsa-live-banner-info {
        grid-template-columns: repeat(2, 1fr);
    }


    .tsa-banner-info-item:nth-child(2) {
        border-right: 0;
    }


    .tsa-banner-info-item:nth-child(3),
    .tsa-banner-info-item:nth-child(4) {
        border-top: 1px solid rgba(255, 255, 255, .10);
    }

}


@media (max-width: 600px) {

    .tsa-festival-banner {
        min-height: 650px;

        border-radius: 12px;
    }


    .tsa-banner-image {
        object-position: center;
    }


    .tsa-banner-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, .45) 0%,
                rgba(0, 0, 0, .78) 55%,
                rgba(0, 0, 0, .94) 100%
            );
    }


    .tsa-banner-caption {
        display: flex;

        flex-direction: column;

        justify-content: flex-end;

        min-height: 650px;

        padding: 35px 25px;
    }


    .tsa-banner-caption .tsa-live-kicker {
        font-size: 10px;

        letter-spacing: 2px;
    }


    .tsa-banner-caption h1 {
        font-size: 47px;

        letter-spacing: -2px;
    }


    .tsa-banner-caption .tsa-live-intro {
        font-size: 15px;

        line-height: 1.65;
    }


    .tsa-live-banner-info {
        grid-template-columns: 1fr;

        border-radius: 10px;
    }


    .tsa-banner-info-item {
        min-height: 75px;

        border-right: 0 !important;

        border-bottom: 1px solid rgba(255, 255, 255, .10);
    }


    .tsa-banner-info-item:last-child {
        border-bottom: 0;
    }

}