/* Section 2: "Heavenly Father" (Nuel Beatz & Saelem). Palette from the single's cover:
   forest greens #14281b / #2a4d2f, chartreuse foliage #d9ec6e, copper lettering #b07a52, cover white #f8faf5. */
.hf-panel{--hf-deep:#14281b;--hf-forest:#2a4d2f;--hf-leaf:#5f8f3e;--hf-lime:#d9ec6e;--hf-copper:#b07a52;--hf-paper:#f8faf5}
.hf-panel .hero{background:var(--hf-deep)}
.hf-panel .hero .photo{display:flex;align-items:center;justify-content:center;padding:clamp(24px,4vw,64px);box-sizing:border-box;
  background:radial-gradient(70% 60% at 50% 45%,#3f6b34 0%,#1d3a26 60%,var(--hf-deep) 100%)}
/* the cover is always shown whole, never cropped */
.hf-panel .hero .photo img{width:auto;height:auto;max-width:min(100%,620px);max-height:100%;aspect-ratio:1/1;object-fit:contain;background:var(--hf-paper);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);transition:transform 1.2s var(--ease),opacity .9s ease}
.hf-panel:not(.is-active) .hero .photo img{transform:translateY(24px) scale(.97);opacity:0}
.hf-panel .hero .copy{background:radial-gradient(120% 90% at 20% 15%,var(--hf-leaf) 0%,var(--hf-forest) 45%,var(--hf-deep) 100%)}
.hf-panel .eyebrow{color:var(--hf-lime)}
.hf-panel .hero .btn{background:var(--hf-lime);border-color:var(--hf-lime);color:var(--hf-deep)}
.hf-panel .hero .btn:hover{background:var(--hf-copper);border-color:var(--hf-copper);color:var(--bone)}
.hf-panel .hero .btn.ghost{background:transparent;border-color:var(--bone);color:var(--bone)}
.hf-panel .hero .btn.ghost:hover{background:var(--bone);border-color:var(--bone);color:var(--hf-deep)}
.hf-panel .date{border-top-color:rgba(217,236,110,.35)}
/* phones and tablets: the cover sits above the text (never under it), sized to whatever room is left */
@media (max-width:820px){
  .hf-panel .hero{display:flex;flex-direction:column}
  .hf-panel .hero .photo{position:relative;inset:auto;flex:1 1 auto;min-height:0;padding:18px 20px 0}
  .hf-panel .hero .photo img{max-width:min(100%,520px);max-height:100%}
  .hf-panel .hero .copy{position:relative;flex:none;background:var(--hf-deep);padding-top:22px}
}
@media (max-height:520px) and (orientation:landscape){
  .hf-panel .hero{display:grid;grid-template-columns:auto 1fr}
  .hf-panel .hero .photo{position:relative;padding:14px}
  .hf-panel .hero .photo img{max-width:none;height:calc(100vh - var(--navh,60px) - 28px)}
  .hf-panel .hero .copy{position:relative;background:radial-gradient(120% 90% at 20% 15%,var(--hf-leaf) 0%,var(--hf-forest) 45%,var(--hf-deep) 100%)}
}
@media (prefers-reduced-motion:reduce){.hf-panel .hero .photo img{transition:none}}