/*
  article_header.css
  ------------------
  Layout for the article hero/header: move title + excerpt beside a card-like
  16:9 header image and style the overlay panel for Flash/Night/Day.

  NOTE: This file is intentionally loaded late (inside article.php near the hero)
  so it can override older theme CSS.
*/

body.theme-flash .articleHeader,
body.theme-night .articleHeader,
body.theme-day .articleHeader{
  position: relative;
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 14px;
}

body.theme-flash .articleHeader img,
body.theme-night .articleHeader img,
body.theme-day .articleHeader img{
  position: relative;
  z-index: 1;
  width: 300px;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: 14px;
  flex: 0 0 300px;
}

body.theme-flash .articleHeader__overlay,
body.theme-night .articleHeader__overlay,
body.theme-day .articleHeader__overlay{
  position: relative;
  z-index: 2;
  left: auto;
  right: auto;
  bottom: auto;
  top: auto;
  flex: 1;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(120,200,255,.22);
  backdrop-filter: blur(2px);
}

/* Flash: “rød felt” look i overlay (ved siden af billedet) */
body.theme-flash .articleHeader__overlay{
  background: linear-gradient(180deg, rgba(120,10,0,.78), rgba(45,0,0,.88));
}

/* Night: lidt mørkere */
body.theme-night .articleHeader__overlay{
  background: linear-gradient(180deg, rgba(110,10,0,.70), rgba(20,0,0,.85));
}

/* Day: lys panel */
body.theme-day .articleHeader__overlay{
  background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.70));
  border-color: rgba(10,20,40,.14);
}

/* Skjul bund-bjælken som standard (aktiveres kun for Flash) */
.articleHeader__bar{ display:none; }

/* Dekorativ bund-bjælke (bevarer “rødt felt”-looket i Flash) */
body.theme-flash .articleHeader__bar{
  display:block;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 78px;
  background: linear-gradient(180deg, rgba(110,10,0,.82), rgba(35,0,0,.92));
  opacity: .85;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 760px){
  body.theme-flash .articleHeader,
  body.theme-night .articleHeader,
  body.theme-day .articleHeader{
    display: block;
  }

  body.theme-flash .articleHeader img,
  body.theme-night .articleHeader img,
  body.theme-day .articleHeader img{
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
    border-radius: 14px;
    flex: none;
  }

  body.theme-flash .articleHeader__overlay,
  body.theme-night .articleHeader__overlay,
  body.theme-day .articleHeader__overlay{
    margin-top: 12px;
  }

  body.theme-flash .articleHeader__bar{ display:none; }
}

/*
  Day-header test: mørk journalistisk tekst med rolig accent.
  Accentfarven bruges som ramme/streg i stedet for som tekstfarve eller glow.
*/
body.theme-day .articleHeader{
  --pm-header-accent:#1686c9;
  border-color:rgba(15,23,42,.14);
  box-shadow:
    0 12px 30px rgba(15,23,42,.12),
    inset 0 0 0 1px rgba(255,255,255,.58) !important;
}

body.theme-day .articleHeader.accent-cyan{--pm-header-accent:#087f96}
body.theme-day .articleHeader.accent-blue{--pm-header-accent:#2563a8}
body.theme-day .articleHeader.accent-magenta{--pm-header-accent:#a63b79}
body.theme-day .articleHeader.accent-lime{--pm-header-accent:#3f7f48}
body.theme-day .articleHeader.accent-gold{--pm-header-accent:#a66a13}
body.theme-day .articleHeader.accent-sort,
body.theme-day .articleHeader.accent-black{--pm-header-accent:#334155}

body.theme-day .articleHeader__overlay{
  border:1px solid rgba(15,23,42,.13);
  border-left:5px solid var(--pm-header-accent);
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(247,249,252,.88));
  box-shadow:none;
}

body.theme-day .articleHeader__overlay h1,
body.theme-day .articleHeader__overlay h1[class*="txt-"]{
  color:#111827 !important;
  font-weight:800;
  letter-spacing:-.025em;
  line-height:1.08;
  text-shadow:
    0 1px 0 rgba(255,255,255,.96),
    0 2px 7px rgba(15,23,42,.14) !important;
}

body.theme-day .articleHeader__overlay h1::after{
  content:"";
  display:block;
  width:clamp(52px,18%,84px);
  height:4px;
  margin-top:10px;
  border-radius:999px;
  background:var(--pm-header-accent);
  box-shadow:none;
}

body.theme-day .articleHeader__overlay p,
body.theme-day .articleHeader__overlay p[class*="txt-"]{
  color:#334155 !important;
  opacity:1;
  text-shadow:none !important;
}

@media (max-width:760px){
  body.theme-day .articleHeader__overlay{
    border-left-width:4px;
  }

  body.theme-day .articleHeader__overlay h1::after{
    height:3px;
    margin-top:8px;
  }
}