*{box-sizing:border-box}
body{margin:0;background:#090b10;color:white;font-family:Arial,sans-serif}
header{height:72px;display:flex;align-items:center;gap:36px;padding:0 5%;background:#090b10}
.logo{font-size:30px;font-weight:900;color:#39bdf8}
nav{display:flex;gap:26px}
nav a{color:white;text-decoration:none;font-size:15px}
.hero{min-height:520px;display:flex;align-items:center;padding:5%;background:linear-gradient(90deg,#090b10 0%,rgba(9,11,16,.9) 35%,rgba(9,11,16,.1) 100%),linear-gradient(0deg,#090b10,transparent 40%),#24364b}
.hero-content{max-width:520px}
.hero h1{font-size:58px;margin:0 0 18px}
.hero p{font-size:18px;line-height:1.6;color:#e1e5eb}
.buttons{display:flex;gap:12px;margin-top:25px}
.btn{padding:14px 24px;border-radius:5px;background:white;color:#111;text-decoration:none;font-weight:bold}
.btn.secondary{background:#454a53;color:white}
.section{padding:20px 5%}
.section h2{font-size:23px}
.posters{display:flex;gap:15px;overflow-x:auto;padding-bottom:18px}
.poster{flex:0 0 220px;height:125px;background:#24364b;border-radius:6px;padding:15px;display:flex;align-items:end;font-weight:bold}
@media(max-width:650px){.hero h1{font-size:38px}.hero{min-height:430px}header{gap:15px}nav{gap:12px}}

.featured-navigation{display:flex;gap:12px;margin-top:30px}
.featured-dot{width:12px;height:12px;border:0;border-radius:50%;background:#777;cursor:pointer;padding:0}
.featured-dot.active{background:#39bdf8;transform:scale(1.2)}
.featured-dot:hover{background:white}

/* Centre featured navigation across the full banner */
.hero{position:relative}
.featured-navigation{
  position:absolute;
  left:50%;
  bottom:25px;
  transform:translateX(-50%);
  margin:0;
  justify-content:center;
  width:max-content;
  z-index:5;
}

/* IPL TV featured programme artwork */
.hero {
    background-size: cover;
    background-position: center 35%;
    background-repeat: no-repeat;
}

/* IPL TV programme hero layout */
.show-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.show-header .show-artwork {
    display: block;
    width: 100%;
    max-width: 1100px;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 14px;
}

.show-header .show-artwork[hidden] {
    display: none;
}

.show-details {
    width: 100%;
    max-width: 1100px;
}

.show-details h1 {
    font-size: 40px;
}

.show-episodes {
    margin-top: 45px;
}

/* IPL TV wider programme hero */
body:has(.show-page) .show-page {
    max-width: 100%;
    margin: 10px auto 0;
    padding: 0 20px 40px;
}

body:has(.show-page) .show-header {
    width: 100%;
    gap: 20px;
}

body:has(.show-page) .show-header .show-artwork {
    width: 100%;
    max-width: none;
    height: auto;
    max-height: 680px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
}

body:has(.show-page) .show-header .show-artwork[hidden] {
    display: none;
}

body:has(.show-page) .show-details,
body:has(.show-page) .show-episodes {
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}


/* IPL TV episode thumbnails */
.episode-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  overflow: hidden;
  text-decoration: none;
  color: white;
}

.episode-thumbnail {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.episode-title {
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
}

/* IPL TV programme episode thumbnails */
.show-episode {
    display: flex;
    flex-direction: column;
    width: 320px;
    max-width: 100%;
    padding: 0;
    overflow: hidden;
}

.show-episode-thumbnail {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.show-episode-title {
    padding: 12px;
    font-size: 16px;
    font-weight: 600;
}




/* IPL TV programme card artwork */
.programme-artwork {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 8px;
}


/* IPL TV dynamically generated programme tiles */


/* Match generated programme buttons to existing tiles */


/* Final sizing fix for Nix Nuggets */


/* Programme tiles match the original poster dimensions */
.posters button.poster {
    flex: 0 0 220px;
    width: 220px;
    height: 125px;
    min-height: 125px;
    box-sizing: border-box;
    padding: 15px;
    background: #24364b;
    color: white;
    border: none;
    border-radius: 6px;
    display: flex;
    align-items: flex-end;
    font: inherit;
    font-weight: bold;
    text-align: left;
    cursor: pointer;
}