/* ═══════════════════════════════════════════════════════════════
   tlf-frame — standardisert "brand-phone-preview"-ramme for lyttio
   ═══════════════════════════════════════════════════════════════
   Brukes for alle iframe-baserte player-previews (admin Test-modal,
   salg2 demo-modal, white-label-eksempler, interaktiv player-demo).

   Forholdstall (validert mot iPhone-design):
   - Outer radius: 11.5% av bredden  (~25 @220, ~37 @320, ~41 @360)
   - Notch top:    5%   av bredden
   - Notch width:  19%  av bredden
   - Notch height: 1.6% av bredden
   - Bezel padding: 8px FAST (matcher virkelige phone-bezels)
   - Inner radius: outer − bezel

   ── BRUK ───────────────────────────────────────────────────────
   STATIC (fast bredde):
     <div class="tlf-frame" style="--tlf-w: 220px;">
       <iframe src="/lytt?...&embed=1"></iframe>
     </div>

   FLUID (fyller parent, skalerer proporsjonalt):
     <div class="tlf-frame-host">                <-- container
       <div class="tlf-frame tlf-frame--fluid">
         <iframe src="/lytt?...&embed=1"></iframe>
       </div>
     </div>

   ── MODIFIERS ──────────────────────────────────────────────────
   .tlf-frame--lift          — subtil hover-løft 4px
   .tlf-frame--deep-shadow   — dypere skygge (fullscreen-modaler)
   .tlf-frame--amber-rim     — amber-glød (interaktiv demo)
   ══════════════════════════════════════════════════════════════ */

.tlf-frame {
  --tlf-w: 320px;
  --tlf-bezel: 8px;

  width: var(--tlf-w);
  background: #000;
  aspect-ratio: 9 / 19.5;
  border-radius: calc(var(--tlf-w) * 0.115);
  padding: var(--tlf-bezel);
  position: relative;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* Notch — sentrert øverst, skalerer proporsjonalt med --tlf-w */
.tlf-frame::before {
  content: '';
  position: absolute;
  top: calc(var(--tlf-w) * 0.05);
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--tlf-w) * 0.19);
  height: calc(var(--tlf-w) * 0.016);
  background: #1a1a1a;
  border-radius: 100px;
  z-index: 10;
  pointer-events: none;
}

/* Innholdslag (iframe / img / wrapper-div) — fyller innenfor bezel-padding */
.tlf-frame > iframe,
.tlf-frame > img,
.tlf-frame > .tlf-frame-content {
  position: absolute;
  inset: var(--tlf-bezel);
  width: calc(100% - var(--tlf-bezel) * 2);
  height: calc(100% - var(--tlf-bezel) * 2);
  border: 0;
  border-radius: calc(var(--tlf-w) * 0.115 - var(--tlf-bezel));
  overflow: hidden;
  display: block;
  background: #0e1117;
}

/* ═══════════════════════════════════════════════════════════════
   FLUID-modus — skalering via container queries.
   Parent (.tlf-frame-host) må ha container-type: inline-size.
   --tlf-w settes til container-bredden (100cqi), så alle calc()
   over skalerer proporsjonalt med hvor bredt frame-en faktisk
   rendres. Inkluderer radius og notch-størrelser.
   ═══════════════════════════════════════════════════════════════ */
.tlf-frame-host {
  container-type: inline-size;
  width: 100%;
}

.tlf-frame--fluid {
  --tlf-w: 100cqi;
  width: 100%;
}

/* ── MODIFIERS ─────────────────────────────────────────────── */

/* Subtil hover-løft (interaktiv demo-seksjon) */
.tlf-frame--lift {
  transition: transform 0.5s cubic-bezier(0.2, 0, 0.1, 1);
}
.tlf-frame--lift:hover {
  transform: translateY(-4px);
}

/* Dyp skygge for fullscreen-modaler (demo-modal) */
.tlf-frame--deep-shadow {
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.8),
    0 2px 8px rgba(232, 160, 48, 0.05);
}

/* Amber-glød (interaktiv demo) */
.tlf-frame--amber-rim {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.3),
    0 24px 60px rgba(0, 0, 0, 0.5),
    0 60px 120px rgba(232, 160, 48, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}