/* media theme: Entertainment, Media & Sports.
   Stage / broadcast / stadium: near-black, violet + magenta + amber beams,
   scanlines and grain, condensed heavy display type, lower-third tags.
   Every selector is scoped to .theme-panel[data-theme="media"]. */

.theme-panel[data-theme="media"]{
  --tp-bg:
    radial-gradient(70% 55% at 94% -8%, rgba(132,84,255,.46), transparent 68%),
    radial-gradient(38% 46% at 104% 50%, rgba(255,58,160,.26), transparent 70%),
    radial-gradient(62% 34% at 86% 106%, rgba(255,158,64,.28), transparent 72%),
    radial-gradient(48% 40% at -4% 104%, rgba(98,60,200,.14), transparent 70%),
    linear-gradient(160deg, #0F0A17 0%, #09070E 55%, #0B0711 100%);
  /* photo: see the ::before rule at the end of this file */
  --tp-photo-pos: 72% 38%;
  --tp-overlay:
    linear-gradient(90deg, rgba(8,6,13,.93) 0%, rgba(8,6,13,.86) 40%, rgba(8,6,13,.70) 72%, rgba(8,6,13,.58) 100%),
    linear-gradient(180deg, rgba(8,6,13,.18) 0%, rgba(8,6,13,0) 34%, rgba(8,6,13,.72) 100%);
  --tp-accent: #FF4FA8;
  --tp-accent-2: #FFB547;
  --tp-text: #F7F2FA;
  --tp-text-2: #BFB5CF;
  --tp-line: rgba(255,255,255,.13);
  --tp-card: linear-gradient(180deg, rgba(32,22,48,.80), rgba(15,11,24,.86));
  --tp-card-border: rgba(255,255,255,.11);
  --tp-font-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --tp-font-body: "Archivo", "Helvetica Neue", Arial, "Apple SD Gothic Neo", sans-serif;
  --tp-font-label: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --tp-h3-size: clamp(42px, 5.6vw, 84px);
  --tp-h3-weight: 800;
  --tp-h3-stretch: 66%;
  --tp-h3-style: normal;
  --tp-h3-transform: uppercase;
  --tp-h3-tracking: .004em;
  --tp-radius:20px;
  --tp-decor-opacity: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(10,6,16,.6);
}

/* the rig hangs top right, its truss cut by the top edge like a camera tilted up at the stage */
.theme-panel[data-theme="media"] .tp-art{top:-30px}
.theme-panel[data-theme="media"] .tp-decor{object-position:100% 0}

/* scanlines over a fine film grain, strongest on the stage side, fading out behind the copy.
   Both live in this static layer (rasterized once) rather than in the animated decor SVG. */
.theme-panel[data-theme="media"]::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.6 -.72'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.07'/%3E%3C/svg%3E") 0 0 / 180px 180px repeat;
  -webkit-mask-image:linear-gradient(90deg, transparent 18%, rgba(0,0,0,.55) 55%, #000 100%);
          mask-image:linear-gradient(90deg, transparent 18%, rgba(0,0,0,.55) 55%, #000 100%);
}

/* on-air label */
.theme-panel[data-theme="media"] .panel-n{
  display:flex;align-items:center;gap:10px;width:fit-content;margin-bottom:18px;padding:6px 12px 6px 11px;
  font-size:12.5px;font-weight:700;font-stretch:75%;letter-spacing:.28em;line-height:1.2;text-transform:uppercase;
  background:rgba(10,7,16,.62);border:1px solid rgba(255,255,255,.12);border-radius:999px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.theme-panel[data-theme="media"] .panel-n::before{
  content:"";flex:none;width:8px;height:8px;border-radius:50%;
  background:#FF3D7F;box-shadow:0 0 0 3px rgba(255,61,127,.16),0 0 14px rgba(255,61,127,.85);
  animation:media-onair 4s ease-in-out infinite;
}
@keyframes media-onair{0%,100%{opacity:1}50%{opacity:.35}}

/* headline: condensed, heavy, lit from the stage side */
.theme-panel[data-theme="media"] h3{
  line-height:.9;margin-bottom:36px;max-width:9em;
  background:linear-gradient(96deg, #FFFFFF 0%, #FFFFFF 34%, #FFE6F2 56%, #FFD7AE 82%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 3px rgba(8,6,13,.75)) drop-shadow(0 0 26px rgba(255,79,168,.16));
}

/* section labels with a broadcast tab */
.theme-panel[data-theme="media"] h4{
  display:flex;align-items:center;gap:12px;
  font-size:12.5px;font-weight:700;font-stretch:75%;letter-spacing:.3em;color:#CFC6DD;
}
.theme-panel[data-theme="media"] h4::before{
  content:"";flex:none;width:22px;height:3px;border-radius:1px;
  background:linear-gradient(90deg,#FFB547,#FF4FA8);
}

/* questions with scoreboard cells */
.theme-panel[data-theme="media"] .questions li{
  padding:20px 0 20px 66px;font-size:17.5px;line-height:1.6;
}
.theme-panel[data-theme="media"] .questions li::before{
  top:19px;padding:6px 7px 5px;min-width:38px;text-align:center;
  font-family:"Archivo","Arial Narrow",sans-serif;font-size:19px;font-weight:800;font-stretch:62%;letter-spacing:.06em;line-height:1;
  color:#FFC46A;background:rgba(255,181,71,.07);border:1px solid rgba(255,181,71,.36);border-radius:4px;
  text-shadow:0 0 12px rgba(255,181,71,.55);
}

/* who's in the room: broadcast lower thirds */
.theme-panel[data-theme="media"] .board{gap:12px}
.theme-panel[data-theme="media"] .board li{
  position:relative;overflow:hidden;padding:0 16px 18px;border-radius:6px;
  font-size:15.5px;line-height:1.45;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 30px rgba(0,0,0,.35);
}
.theme-panel[data-theme="media"] .board li::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;pointer-events:none;
  background:linear-gradient(90deg,#FFB547 0%,#FF4FA8 38%,rgba(138,92,255,.6) 70%,transparent 100%);
  opacity:.75;transition:opacity .3s;
}
.theme-panel[data-theme="media"] .board li:hover::after{opacity:1}
/* lower-third chip: dark glass with a warm cue bar, the colour kept to a quiet tint */
.theme-panel[data-theme="media"] .tag{
  width:fit-content;margin:0 0 12px -16px;padding:7px 22px 6px 17px;
  font-size:12px;font-weight:700;font-stretch:75%;letter-spacing:.2em;line-height:1.2;color:#FFFFFF;
  background:
    linear-gradient(180deg,#FFB547 0%,#FF4FA8 100%) 0 0 / 3px 100% no-repeat,
    linear-gradient(90deg,rgba(196,30,124,.26) 0%,rgba(106,59,227,.16) 100%),
    rgba(14,10,22,.85);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.07);
  clip-path:polygon(0 0,100% 0,calc(100% - 11px) 100%,0 100%);
}
.theme-panel[data-theme="media"] .mentor-name{font-stretch:88%;letter-spacing:.01em}

.theme-panel[data-theme="media"] .mentor-note{margin-top:18px;font-size:13.5px}

@media (max-width:720px){
  .theme-panel[data-theme="media"]{
    --tp-overlay:
      linear-gradient(180deg, rgba(8,6,13,.56) 0%, rgba(8,6,13,.83) 19%, rgba(8,6,13,.87) 70%, rgba(8,6,13,.68) 100%);
    --tp-h3-size: clamp(34px, 11vw, 50px);
  }
  /* on a tall narrow panel, keep the rig to the top of the card and let it fade out */
  .theme-panel[data-theme="media"] .tp-body{padding-top:84px}
  .theme-panel[data-theme="media"] .tp-art{top:-12px;bottom:auto;height:760px;
    -webkit-mask-image:linear-gradient(180deg,#000 45%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 45%,transparent 100%)}
  .theme-panel[data-theme="media"] .tp-decor{object-position:84% 0}
  .theme-panel[data-theme="media"] .questions li{padding-left:56px;font-size:16.5px}
  .theme-panel[data-theme="media"] .questions li::before{font-size:17px;min-width:34px}
}

/* very narrow phones: give the question text a wider column */
@media (max-width:380px){
  .theme-panel[data-theme="media"] .questions li{padding-left:46px;font-size:16px}
  .theme-panel[data-theme="media"] .questions li::before{min-width:30px;font-size:16px}
}

/* desktop and tablet: keep a clear gutter between the copy and the ribbon board on the right edge */
@media (min-width:721px){
  .theme-panel[data-theme="media"] .tp-body{padding-right:calc(clamp(26px,4vw,48px) + 18px)}
}

@media (prefers-reduced-motion:reduce){
  .theme-panel[data-theme="media"] .panel-n::before{animation:none}
}

/* photo slot: uncomment once assets/themes/media.jpg exists (url resolves relative to this file in every browser) */
/* .theme-panel[data-theme="media"]::before{background-image:var(--tp-overlay),url("media.jpg")} */