:root {
    --c-track-fill: #fff;
    --radius: 16px;
}


/* ===== Player (BEM) ===== */
.video {
    padding: 24px;
    display: grid;
    place-items: center;
}

.video__container{
  position: relative;
  /* antes: width: min(600px, 92vw); */
  width: clamp(320px, 92vw, 600px);  /* aumenta o teto e continua responsivo */
  display: flex;
  flex-direction: column;
  background: var(--midnight-blue);
  border-radius: var(--radius);
  outline: none;
}


.video__media{
  width: 100%;
  height: auto;              /* remova qualquer height fixa que você tenha colocado */
  aspect-ratio: 16 / 9;      /* mantém a proporção na prévia */
  display: block;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  background: var(--midnight-blue);
}

/* Container em fullscreen preenche a tela e perde cantos arredondados */
.video__container:fullscreen,
.video__container:-webkit-full-screen{
  width: 100vw;
  height: 100vh;
  border-radius: 0;
}

/* Vídeo ocupa o espaço todo do container em fullscreen */
.video__container:fullscreen .video__media,
.video__container:-webkit-full-screen .video__media{
  flex: 1 1 auto;     /* cresce para ocupar o que sobrar */
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: contain; /* mantém proporção sem cortar (troque para 'cover' se quiser encher) */
}

/* Overlay e controles sem bordas no fullscreen */
.video__container:fullscreen .video__overlay,
.video__container:-webkit-full-screen .video__overlay,
.video__container:fullscreen .video__controls,
.video__container:-webkit-full-screen .video__controls{
  border-radius: 0;
}


/* Overlay de play central */
.video__overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .25), rgba(0, 0, 0, .45));
    color: white;
    font-size: clamp(40px, 6vw, 72px);
    cursor: pointer;
    opacity: 1;
    transition: opacity .2s ease;
    border-radius: var(--radius);
}

.video__overlay svg {
    fill: var(--white);
}

.video__overlay:hover svg {
    fill: var(--white);
    opacity: 0.8;
}

.video__overlay.is-hidden {
    opacity: 0;
    pointer-events: none;
}

/* Controles */
.video__controls {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    background: var(--midnight-blue);
}

.video__left,
.video__right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.video__btn {
    display: flex;
    background: var(--midnight-blue);
    border: 1px solid var(--midnight-blue);
    color: var(--white);
    border-radius: 10px;
    padding:  10px;
    text-align: center;
    cursor: pointer;

}

.video__btn:hover {
    border-color: var(--orange-light);
}

.video__btn[aria-pressed="true"] {
    outline: 2px solid var(--white);
}


.video__time {
    font-variant-numeric: tabular-nums;
    color: var(--white);
    font-size: 14px;
}

.video__time-sep {
    margin: 0 4px;
    color: var(--white);
    
}

/* Seek */
.video__seek {
    appearance: none;
   
    height: 8px;
    border-radius: 999px;
    background: var(--white);
    outline: none;
}
.video__seek, input {
    width: 100%;
}

.video__seek::-webkit-slider-thumb {
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
  background: var(--white);
    border: 0;
}

.video__seek::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 0px;;
    border-radius: 50%;
    background: var(--white);
}

.video__seek.is-scrubbing {
    cursor: grabbing;
}

/* Volume */
.video__volume {
    width: 50px;
    accent-color: var(--white);
}

.video__speed select {

    background: var(--orange-light);
    color: var(--white);
    border: 1px solid #1f2a3a;
    border-radius: 8px;
    padding: 6px 8px;
}

/* Acessibilidade : foco visível */
.video__btn:focus-visible,
.video__seek:focus-visible,
.video__volume:focus-visible,
.video__speed select:focus-visible,
.video__container:focus-visible {
    outline: 2px solid var(--orange-light);
    outline-offset: 2px;
}

/* Responsivo */
@media (max-width: 640px) {
    .video__right {
        gap: 8px;
    }

    .video__volume {
        width: 70px;
    }
}