/*
  video-embed.css
  Delt stilark for "click-to-load"-videoen (Vimeo, video-id 1222972638),
  brukt sammen med js/video-embed.js. Samme komponent gjenbrukes på
  forsiden (.home-stats__video-frame), /golfklubber (.quote-video__ratio)
  og /sponsorer (.stats-video__video-frame) — og på eventuelle fremtidige
  sider med samme video.

  Bruk: legg klassen .video-embed-frame på video-rammen (i tillegg til
  sidens egen layout-klasse), og inni den:
    <div class="video-cover" data-video-id="..." data-video-params="..." data-video-title="...">
      <img class="video-cover__thumb" src="..." alt="" aria-hidden="true">
      <button type="button" class="video-cover__play" aria-label="Spill video: ...">…</button>
      <div class="video-consent">
        <div class="video-consent__box">…</div>
      </div>
    </div>
  Se index.html / golfklubber/index.html / sponsorer/index.html for fullt
  oppsett.
*/

/* .video-consent__title bruker Clash Display (samme lokale fontfil som
   stat-tallene rundt videoen, se public/fonts/clash-display/). */
@font-face {
  font-family: 'Clash Display';
  src: url('../public/fonts/clash-display/ClashDisplay-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Kortramme — firkantet, ingen kant/skygge/bakgrunnsfarge bak
   thumbnail/spilleren. */
.video-embed-frame {
  border-radius: 0;
  overflow: hidden;
}

.video-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.video-cover__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-cover__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111111;
  cursor: pointer;
}

.video-cover__play svg {
  width: 22px;
  height: 22px;
}

.video-cover.is-consent-open .video-cover__play {
  display: none;
}

/* Samtykkeboks — vises oppå thumbnailen ved avspilling med mindre
   brukeren har valgt "Godta alle" i cookie-banneret (se js/video-embed.js). */
.video-consent {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(13, 13, 13, 0.55);
}

.video-cover.is-consent-open .video-consent {
  display: flex;
}

.video-consent__box {
  width: 100%;
  max-width: 300px;
  background: #ffffff;
  border-radius: 0;
  border-top: 4px solid #9EA2A2;
  padding: clamp(16px, 3vw, 22px);
  text-align: center;
}

/* Overskrift og brødtekst matcher den generelle cookie-boksen
   (css/cookie-banner.css): Clash Display 500 med kursivt ord i
   overskriften, Inter i sidens brødtekstfarge. */
.video-consent__title {
  margin: 0 0 8px;
  font-family: 'Clash Display', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: #0d0d0d;
}

.video-consent__title em {
  font-style: italic;
}

.video-consent__text {
  margin: 0 0 16px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #0d0d0d;
}

.video-consent__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.video-consent__accept,
.video-consent__cancel {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.82rem;
  padding: 10px 16px;
  border-radius: 10px;
  cursor: pointer;
  border: 1.5px solid #0d0d0d;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.video-consent__accept {
  background: #0d0d0d;
  color: #ffffff;
}

.video-consent__cancel {
  background: transparent;
  color: #0d0d0d;
}

.video-consent__accept:hover {
  background: #333333;
}

.video-consent__cancel:hover {
  background: rgba(13, 13, 13, 0.06);
}

/* Tilbaketrukket lenke til cookie-erklæringen — skal ikke konkurrere
   visuelt med Godta/Avbryt-knappene over. */
.video-consent__more {
  display: block;
  margin-top: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  color: #9EA2A2;
  text-align: center;
  text-decoration: none;
}

.video-consent__more:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------
   Mobil (kun): kompakt samtykkeboks. Samme brytepunkt som den
   generelle cookie-boksen (css/cookie-banner.css), siden de to er
   søsterkomponenter og skal se like ut.

   Boksen skal være tydelig mindre enn videorammen slik at man ser
   forhåndsvisningen rundt den på alle fire sider. Med desktop-
   størrelsene ble boksen omtrent like høy som en 16:9-video på en
   telefon, og dekket den helt.

   Alle fire tekstnivåene er skalert med samme faktor (0,76) slik at
   størrelsesforholdet mellom dem er nøyaktig som på desktop:
     overskrift 1rem    -> 0.76rem
     brødtekst  0.85rem -> 0.65rem
     knapper    0.82rem -> 0.62rem
     "les mer"  0.72rem -> 0.55rem

   240px er valgt bevisst, ikke bare "minst mulig": ved smalere boks
   brytes overskriften over to linjer og brødteksten over fem, og da
   blir boksen ~30px HØYERE selv om den er smalere. 240px gir 60px
   synlig video på hver side og 27px over/under på en 390px-skjerm.
   --------------------------------------------------------------- */
@media (max-width: 620px) {
  .video-consent {
    padding: 20px;
  }

  .video-consent__box {
    max-width: 240px;
    padding: 12px;
    border-top-width: 3px;
  }

  .video-consent__title {
    font-size: 0.76rem;
    margin: 0 0 5px;
  }

  .video-consent__text {
    font-size: 0.65rem;
    margin: 0 0 10px;
  }

  .video-consent__actions {
    gap: 6px;
  }

  .video-consent__accept,
  .video-consent__cancel {
    font-size: 0.62rem;
    padding: 6px 12px;
    border-width: 1px;
  }

  .video-consent__more {
    font-size: 0.55rem;
    margin-top: 8px;
  }
}