/* Brand work: a featured screen with a running order beside it.
   Flat by design - the samples above already float in 3D, so the commercials
   read like a broadcast programme: what's on now, and what else is on the reel. */
.brand-program{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;background:var(--pine);box-shadow:0 0 0 1px rgba(213,175,89,.32),0 26px 48px -30px rgba(6,44,36,.7);padding:12px;color:var(--paper)}
.brand-program-feature{display:flex;flex-direction:column;min-width:0}
.brand-program-screen{position:relative;display:block;width:100%;padding:0;overflow:hidden;background:#041f19;aspect-ratio:16/9}
.brand-program-screen img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease,cubic-bezier(.2,.7,.2,1))}
.brand-program-play{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:var(--gold);box-shadow:0 14px 30px -10px rgba(4,31,25,.85);transition:transform .3s ease}
.brand-program-play svg{width:24px;height:24px;fill:none;stroke:#062c24;stroke-width:2}
.brand-program-screen:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(hover:hover) and (pointer:fine){
  .brand-program-screen:hover img{transform:scale(1.025)}
  .brand-program-screen:hover .brand-program-play{transform:scale(1.08)}
}
.brand-program-now{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:4px 20px;padding:18px 8px 6px}
.brand-program-brand{grid-column:1;font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
.brand-program-now h4{grid-column:1;font-size:clamp(24px,2.3vw,32px);font-weight:560;letter-spacing:-.03em;line-height:1.08;color:var(--paper)}
.brand-program-flag{grid-column:2;grid-row:1 / span 2;align-self:end;max-width:22ch;padding-left:14px;border-left:1px solid rgba(213,175,89,.34);color:var(--muted-dark);font-size:12px;font-weight:600;letter-spacing:.08em;line-height:1.45;text-transform:uppercase}
.brand-program-flag[hidden]{display:none}

/* Running order */
.brand-program-list{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.brand-program-list button{
  position:relative;
  display:grid;
  grid-template-columns:96px minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  width:100%;
  padding:8px 14px 8px 8px;
  border:1px solid rgba(213,175,89,.16);
  background:rgba(4,31,25,.45);
  color:var(--paper);
  text-align:left;
  transition:background-color .25s ease,border-color .25s ease;
}
.brand-program-list img{display:block;width:96px;height:54px;object-fit:cover;filter:saturate(.7) brightness(.8);transition:filter .25s ease}
.brand-program-list span{display:flex;flex-direction:column;gap:3px;min-width:0}
.brand-program-list small{font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--muted-dark)}
.brand-program-list strong{font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.brand-program-list b{font-size:12px;font-weight:650;font-variant-numeric:tabular-nums;color:var(--muted-dark)}
.brand-program-list button[aria-pressed="true"]{border-color:var(--gold);background:rgba(213,175,89,.12)}
.brand-program-list button[aria-pressed="true"]::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:3px;background:var(--gold)}
.brand-program-list button[aria-pressed="true"] img{filter:none}
.brand-program-list button[aria-pressed="true"] b,.brand-program-list button[aria-pressed="true"] small{color:var(--gold)}
.brand-program-list button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media(hover:hover) and (pointer:fine){
  .brand-program-list button[aria-pressed="false"]:hover{border-color:rgba(213,175,89,.5)}
  .brand-program-list button[aria-pressed="false"]:hover img{filter:saturate(.9) brightness(.95)}
}

/* A quick fade on the screen when the programme changes. */
.brand-program.is-switching .brand-program-screen img,.brand-program.is-switching .brand-program-now{animation:brand-program-in .45s ease}
@keyframes brand-program-in{from{opacity:.35}to{opacity:1}}

@media(min-width:900px){
  .brand-program{grid-template-columns:minmax(0,1.75fr) minmax(260px,1fr);gap:16px;padding:14px}
  .brand-program-list{justify-content:flex-start}
  .brand-program-list button{min-height:76px}
}
@media(max-width:759px){
  .brand-program{padding:10px}
  .brand-program-now{grid-template-columns:minmax(0,1fr);padding:16px 6px 4px}
  .brand-program-flag{grid-column:1;grid-row:auto;margin-top:8px;padding:8px 0 0;border-left:0;border-top:1px solid rgba(213,175,89,.34);max-width:none;font-size:13px}
  .brand-program-now h4{font-size:27px}
  .brand-program-brand{font-size:13px}
  .brand-program-list button{grid-template-columns:84px minmax(0,1fr) auto;min-height:60px}
  .brand-program-list img{width:84px;height:47px}
  .brand-program-list strong{font-size:17px}
}
html.motion-off .brand-program *{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.brand-program *{animation:none!important;transition:none!important}}