/* =========================================================
   PARA AUDIO PLAYER
   Base wrapper, blurred background og layout
   ========================================================= */

.para-audio-card{position:relative;overflow:hidden;isolation:isolate;margin:30px 0;border-radius:18px;background:#222;border:1px solid rgba(255,255,255,.08);box-shadow:0 8px 30px rgba(0,0,0,.16);}
.para-audio-bg{position:absolute;inset:0;z-index:0;background-color:#222;background-image:var(--para-audio-bg-image);background-size:cover;background-position:center;opacity:.50;}
.para-audio-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg, rgba(18,18,18,.88), rgba(18,18,18,.72));}
.para-audio-inner{position:relative;z-index:1;display:grid;grid-template-columns:88px 1fr;gap:24px;align-items:center;padding:26px;}


/* =========================================================
   Cover image
   Artikkelbildet vises også som lite cover foran blur-bakgrunnen
   ========================================================= */

.para-audio-cover{width:88px;height:88px;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.12);}
.para-audio-cover-img{width:100%;height:100%;object-fit:cover;display:block;}
.para-audio-cover-fallback{width:100%;height:100%;background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03));}


/* =========================================================
   Tekst og hovedinnhold
   Tittel, metadata og skjult native audio-element
   ========================================================= */

.para-audio-main{min-width:0;display:flex;flex-direction:column;gap:12px;}
.para-audio-title{font-weight:800;font-size:18px;line-height:1.3;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.para-audio-player audio{width:100%;display:block;height:0;opacity:0;pointer-events:none;}


/* =========================================================
   Kontroller
   Play/pause, progressbar og tid
   ========================================================= */

.para-audio-controls{display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:center;}
.para-audio-btn{width:42px;height:42px;border-radius:999px;border:2px solid rgba(255,255,255,.18);background:rgba(255,255,255,.10);cursor:pointer;position:relative;backdrop-filter:blur(8px);}
.para-audio-btn:hover{background:rgba(255,255,255,.16);}
.para-audio-play::before{content:"";position:absolute;left:15px;top:11px;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:13px solid #fff;opacity:.95;}
.para-audio-play::after{content:"";position:absolute;left:12px;top:11px;width:4px;height:16px;background:#fff;box-shadow:10px 0 0 #fff;opacity:0;}
.para-audio-card.is-playing .para-audio-play::before{opacity:0;}
.para-audio-card.is-playing .para-audio-play::after{opacity:.95;}
.para-audio-progress{height:10px;border-radius:999px;background:rgba(255,255,255,.22);overflow:hidden;cursor:pointer;}
.para-audio-progress-bar{height:100%;width:0%;border-radius:999px;background:var(--para-color-primary, #1E73BE);}
.para-audio-time{font-size:12px;color:rgba(255,255,255,.82);font-weight:700;white-space:nowrap;min-width:74px;text-align:right;}


/* =========================================================
   Light theme
   Lys variant med samme blur-effekt, men lys overlay
   ========================================================= */

.para-audio-card.para-audio-light{background:#fff;border:1px solid rgba(0,0,0,.08);box-shadow:0 8px 30px rgba(0,0,0,.10);}
.para-audio-card.para-audio-light .para-audio-bg{opacity:.25;}
.para-audio-card.para-audio-light .para-audio-bg::after{background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.78));}
.para-audio-card.para-audio-light .para-audio-cover{background:rgba(255,255,255,.55);border:1px solid rgba(0,0,0,.08);box-shadow:0 8px 24px rgba(0,0,0,.12);}
.para-audio-card.para-audio-light .para-audio-cover-fallback{background:linear-gradient(135deg, rgba(0,0,0,.08), rgba(0,0,0,.03));}
.para-audio-card.para-audio-light .para-audio-title{color:#111;}
.para-audio-card.para-audio-light .para-audio-btn{border:2px solid rgba(0,0,0,.10);background:rgba(255,255,255,.55);}
.para-audio-card.para-audio-light .para-audio-btn:hover{background:rgba(255,255,255,.75);}
.para-audio-card.para-audio-light .para-audio-play::before{border-left-color:#111;}
.para-audio-card.para-audio-light .para-audio-play::after{background:#111;box-shadow:10px 0 0 #111;}
.para-audio-card.para-audio-light .para-audio-progress{background:rgba(0,0,0,.12);}
.para-audio-card.para-audio-light .para-audio-time{color:rgba(0,0,0,.72);}


/* =========================================================
   Responsive
   Kompakt visning på mobil og smalere skjermer
   ========================================================= */

@media (max-width:900px){
  .para-audio-inner{grid-template-columns:72px 1fr;gap:16px;padding:16px;}
  .para-audio-cover{width:72px;height:72px;}
  .para-audio-title{font-size:16px;}
  .para-audio-controls{grid-template-columns:42px 1fr;gap:10px;}
  .para-audio-time{grid-column:2;text-align:left;min-width:0;}
}