/* ──────────────────────────────────────────────
   ALBUMS — Discografía page
   Extends css/landing.css
   ────────────────────────────────────────────── */

/* ── page-hero ── */
.page-hero {
  position: relative;
  height: clamp(280px, 38vh, 440px);
  overflow: hidden;
  display: flex; align-items: flex-end;
  background: var(--bg);
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--blue) 12%, transparent) 0%,
    transparent 60%
  );
}
.page-hero-body {
  position: relative; z-index: 1;
  width: 100%; padding: 0 0 52px;
}
.page-hero-body .wrap { display: flex; flex-direction: column; gap: 10px; }
.page-hero-body .eyebrow { color: var(--blue-bright); }
.page-hero-body h1 { font-size: clamp(40px, 7vw, 80px); line-height: 1; margin: 0; }
.page-hero-sub {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted); margin-top: 4px;
}

/* ── featured album section ── */
.feature { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.rain-canvas {
  /* Was a fixed 280px — the JS (js/landing.js initRain()) already sizes its
     drawing buffer and drop physics off the full .feature section height,
     but this fixed CSS height squeezed that into a short band at the top
     and the mask below faded it out by 280px regardless of how much taller
     the section actually is (album photo + text + player easily runs
     800px+). height: 100% lets it span the whole section like the JS
     already intends. */
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0; opacity: 0.6;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 45%, transparent 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 45%, transparent 100%);
}
.feature-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: center; }
.feature-cover { position: relative; }
.feature-cover img { border-radius: 14px; border: 1px solid var(--line-2); width: 100%; }
.feature-cover .ring { position: absolute; inset: -14px; border: 1px solid var(--line); border-radius: 20px; z-index: -1; }
.feature h2 { font-size: clamp(44px, 6vw, 84px); font-style: italic; margin: 18px 0 6px; }
.feature .meta { font-family: var(--mono); font-size: 13px; color: var(--muted); letter-spacing: 0.04em; margin-bottom: 22px; }
.feature .desc { color: var(--muted); max-width: 460px; font-size: 18px; margin-bottom: 30px; }
.feature-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 38px; }

@media (max-width: 820px) { .feature-grid { grid-template-columns: 1fr; gap: 40px; } .feature-cover { max-width: 340px; } }

/* ── EP release cards ── */
.ep-card {
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  transition: border-color .2s, transform .2s;
  background: var(--card);
  display: flex; flex-direction: column;
}
.ep-card:hover { border-color: var(--blue); transform: translateY(-3px); }

.ep-card-banner {
  position: relative;
  background-size: cover;
  background-position: center;
  padding: 36px 28px 28px;
  min-height: 260px;
  display: flex; align-items: flex-end;
}
.ep-card-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(160deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.82) 100%
  );
}
.ep-card-banner-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 4px;
}
.ep-card-kind {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--blue-bright);
}
.ep-card-title {
  font-family: var(--serif); font-size: 28px; font-style: italic;
  line-height: 1.1; color: #fff;
}
.ep-card-sub { font-size: 13px; color: rgba(255,255,255,0.6); margin-bottom: 6px; }
/* ── Streaming icon buttons ── */
.streaming-btns { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.stream-btn {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  text-decoration: none; flex-shrink: 0;
  transition: transform .15s, opacity .15s;
}
.stream-btn:hover { transform: scale(1.1); opacity: .88; }
.stream-btn svg { width: 20px; height: 20px; }
.stream-spotify { background: #1ed760; color: #000; }
.stream-apple   { background: #fff;    color: #000; }
.stream-amazon  { background: #00A8E1; color: #fff; }
.stream-ytmusic { background: #212121; color: #ff0000; }
.stream-youtube { background: #ff0000; color: #fff; }
.stream-tidal   { background: #000;    color: #fff; }
.stream-deezer  { background: #A238FF; color: #fff; }

.ep-card-embed { flex: 1; }
.ep-card-embed iframe { display: block; border: 0; width: 100%; }

@media (max-width: 760px) {
  .ep-card-banner { min-height: 200px; }
}