/* ============================================================
   HUDBA + O MNĚ PAGE — hudba.css
   ============================================================ */

/* ---- About Editorial ---- */
#about {
    padding: var(--sv) 0;
    background: var(--black-2);
    position: relative;
    overflow: hidden;
}
#about::before {
    content: '';
    position: absolute;
    top: -200px; right: -200px;
    width: 650px; height: 650px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--orange-faint), transparent 70%);
    pointer-events: none;
}
.about-editorial {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--px);
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 80px;
    align-items: start;
}

/* Left column */
.ae-left .display-title { margin-bottom: 40px; }
.ae-stats {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 48px;
}
.ae-stat { display: flex; flex-direction: column; gap: 3px; padding: 0 28px 0 0; }
.ae-stat:first-child { padding-left: 0; }
.ae-n {
    font-family: var(--ff-d);
    font-size: 52px;
    line-height: 1;
    color: var(--orange);
}
.ae-l {
    font-family: var(--ff-c);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--muted);
    text-transform: uppercase;
}
.ae-sep {
    width: 1px; height: 52px;
    background: var(--black-5);
    margin-right: 28px;
    flex-shrink: 0;
}

/* Artist photo placeholder */
.ae-photo {
    position: relative;
    aspect-ratio: 3/4;
    max-width: 380px;
}
.ae-photo-inner {
    width: 100%; height: 100%;
    background: linear-gradient(155deg, #200d04 0%, #0e0808 45%, #080810 100%);
    position: relative;
    overflow: hidden;
}
.ae-photo-bg-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ff-d);
    font-size: 190px;
    line-height: 1;
    color: rgba(232,99,26,0.07);
    letter-spacing: -0.05em;
    user-select: none;
}
.ae-photo-glow {
    position: absolute;
    bottom: -80px; left: 50%;
    transform: translateX(-50%);
    width: 280px; height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232,99,26,0.22) 0%, transparent 65%);
}
.ae-photo-scan {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg, transparent, transparent 3px,
        rgba(0,0,0,0.05) 3px, rgba(0,0,0,0.05) 4px
    );
}
.ae-photo-frame {
    position: absolute;
    bottom: -14px; right: -14px;
    width: 52%; height: 52%;
    border: 1.5px solid rgba(232,99,26,0.25);
    pointer-events: none;
}
.ae-photo-tag {
    position: absolute;
    top: 20px; left: -6px;
    font-family: var(--ff-c);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.24em;
    background: var(--orange);
    color: var(--black);
    padding: 5px 14px;
    z-index: 2;
}

/* Right column — story */
.ae-right { padding-top: 8px; }
.ae-story {}
.ae-pullquote {
    font-family: var(--ff-c);
    font-size: clamp(22px, 2.5vw, 32px);
    font-weight: 700;
    line-height: 1.25;
    color: var(--orange);
    letter-spacing: 0.01em;
    margin-bottom: 36px;
    position: relative;
    padding-left: 20px;
}
.ae-pullquote::before {
    content: '';
    position: absolute;
    left: 0; top: 4px; bottom: 4px;
    width: 2px;
    background: var(--orange);
    opacity: 0.5;
}
.ae-lead {
    font-size: 18px;
    font-weight: 300;
    color: var(--white-70);
    line-height: 1.8;
    margin-bottom: 24px;
}
.ae-story p {
    font-size: 15px;
    line-height: 1.9;
    color: var(--white-40);
    margin-bottom: 20px;
}
.ae-story strong { color: var(--orange); font-weight: 600; }
.ae-closing {
    font-style: italic;
    color: var(--muted) !important;
    font-size: 14px !important;
    margin-top: 12px;
}

/* ---- Releases ---- */
#hudba {
    padding: var(--sv) 0;
    background: var(--black);
}
.releases-wrap {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--px);
}
.rw-header { margin-bottom: 60px; }
.rw-header .display-title { margin-bottom: 0; }

/* Featured EP */
.ep-feature {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 56px;
    align-items: start;
    margin-bottom: 64px;
    padding-bottom: 64px;
    border-bottom: 1px solid var(--black-4);
}

.ep-cover {
    position: relative;
}
.ep-cover-art {
    aspect-ratio: 1;
    background: linear-gradient(145deg, #220e02, #3e1800, #0e0808);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.ep-cover-grid {
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 18px, rgba(232,99,26,0.04) 18px, rgba(232,99,26,0.04) 19px),
        repeating-linear-gradient(90deg, transparent, transparent 18px, rgba(232,99,26,0.04) 18px, rgba(232,99,26,0.04) 19px);
}
.ep-cover-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 65% 65% at 50% 60%, rgba(232,99,26,0.3) 0%, transparent 70%);
}
.ep-cover-text {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.ep-cover-text span {
    font-family: var(--ff-d);
    font-size: clamp(32px, 5vw, 52px);
    line-height: 1;
    letter-spacing: 0.06em;
    color: var(--orange);
    text-shadow: 0 0 24px var(--orange-glow);
}
.ep-cover-meta {
    position: absolute;
    bottom: 14px;
    font-family: var(--ff-c);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.24em;
    color: var(--white-40);
    z-index: 2;
}
.ep-cover-play-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0);
    opacity: 0;
    transition: opacity var(--tm) var(--ease), background var(--tm) var(--ease);
    z-index: 3;
}
.ep-feature:hover .ep-cover-play-wrap {
    opacity: 1;
    background: rgba(0,0,0,0.5);
}

.play-btn {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: var(--orange);
    color: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 32px var(--orange-glow);
    transition: transform var(--tm) var(--ease), box-shadow var(--tm) var(--ease);
    padding-left: 3px;
}
.play-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 52px var(--orange-glow);
}

/* EP info */
.ep-meta-top {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}
.rc-badge {
    font-family: var(--ff-c);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.28em;
    background: var(--orange);
    color: var(--black);
    padding: 4px 12px;
}
.ep-year {
    font-family: var(--ff-c);
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--muted);
}
.ep-title {
    font-family: var(--ff-d);
    font-size: clamp(36px, 5vw, 64px);
    line-height: 0.95;
    letter-spacing: -0.01em;
    color: var(--white);
    margin-bottom: 16px;
}
.ep-desc {
    font-size: 15px;
    font-weight: 300;
    color: var(--white-40);
    line-height: 1.85;
    margin-bottom: 32px;
    font-style: italic;
    max-width: 500px;
}

.ep-tracks { display: flex; flex-direction: column; }
.track-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--black-5);
    cursor: pointer;
    transition: padding-left var(--tm) var(--ease);
}
.track-row:hover { padding-left: 6px; }
.trn {
    font-family: var(--ff-c);
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    min-width: 22px;
}
.trname {
    font-family: var(--ff-c);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--white-70);
    flex: 1;
    transition: color var(--tf);
}
.track-row:hover .trname { color: var(--orange); }
.trdur {
    font-family: var(--ff-c);
    font-size: 11px;
    color: var(--muted);
}

/* Previous releases */
.prev-releases {}
.prev-label {
    font-family: var(--ff-c);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.28em;
    color: var(--muted);
    text-transform: uppercase;
    margin-bottom: 28px;
}
.prev-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
}
.prev-card {
    background: var(--black-3);
    overflow: hidden;
}
.prev-cover {
    aspect-ratio: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.pc-b {
    background: linear-gradient(145deg, #060616, #0f0f28, #060610);
}
.pc-b::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 55% at 40% 45%, rgba(60,80,200,0.14), transparent 65%);
}
.pc-c {
    background: linear-gradient(145deg, #04080e, #081018, #040608);
}
.pc-c::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 55% at 55% 55%, rgba(20,120,200,0.1), transparent 65%);
}
.prev-cover-text {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.prev-cover-text span {
    font-family: var(--ff-d);
    font-size: clamp(24px, 3.5vw, 42px);
    line-height: 1;
    letter-spacing: 0.06em;
    color: var(--white-70);
}
.rc-play-over {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.52);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    z-index: 3;
    transition: opacity var(--tm) var(--ease);
}
.prev-card:hover .rc-play-over { opacity: 1; }
.prev-info { padding: 24px 28px; }
.prev-type {
    font-family: var(--ff-c);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.28em;
    color: var(--orange);
}
.prev-info h4 {
    font-family: var(--ff-c);
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--white);
    margin: 8px 0 4px;
}
.prev-info > p {
    font-family: var(--ff-c);
    font-size: 12px;
    letter-spacing: 0.12em;
    color: var(--muted);
    margin-bottom: 20px;
}
.prev-tracks { display: flex; flex-direction: column; }

/* ---- Streaming ---- */
#streaming {
    padding: var(--sv) 0;
    background: var(--black-2);
    position: relative;
    overflow: hidden;
}
#streaming::before {
    content: '';
    position: absolute;
    bottom: -200px; left: -200px;
    width: 600px; height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(29,185,84,0.05), transparent 70%);
    pointer-events: none;
}
.stream-wrap {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--px);
}
.sw-header { margin-bottom: 56px; }
.sw-header .display-title { margin-bottom: 0; }

.stream-card {
    background: var(--black-3);
    border: 1px solid var(--black-5);
    display: grid;
    grid-template-columns: 320px 1fr;
    overflow: hidden;
    position: relative;
}
.stream-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(to right, var(--spotify), transparent 50%);
    opacity: 0.6;
}

/* EP side */
.sc-ep { padding: 40px; display: flex; flex-direction: column; gap: 28px; border-right: 1px solid var(--black-5); }
.sc-ep-cover {
    aspect-ratio: 1;
    background: linear-gradient(145deg, #1e0d00, #380f00, #0c0808);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.sc-cover-grid {
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 14px, rgba(232,99,26,0.04) 14px, rgba(232,99,26,0.04) 15px),
        repeating-linear-gradient(90deg, transparent, transparent 14px, rgba(232,99,26,0.04) 14px, rgba(232,99,26,0.04) 15px);
}
.sc-cover-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 50% 65%, rgba(232,99,26,0.32), transparent 70%);
}
.sc-cover-titles {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.sc-cover-titles span {
    font-family: var(--ff-d);
    font-size: 28px;
    line-height: 1;
    letter-spacing: 0.06em;
    color: var(--orange);
    text-shadow: 0 0 18px var(--orange-glow);
}
.sc-cover-tag {
    position: absolute;
    bottom: 10px;
    font-family: var(--ff-c);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.22em;
    color: var(--white-40);
    z-index: 2;
}

.sc-listeners {
    display: flex;
    align-items: center;
    gap: 14px;
}
.sc-spotify-icon {
    width: 28px; height: 28px;
    color: var(--spotify);
    flex-shrink: 0;
}
.sc-listener-count {
    display: block;
    font-family: var(--ff-d);
    font-size: 28px;
    line-height: 1;
    color: var(--white);
}
.sc-listener-label {
    display: block;
    font-family: var(--ff-c);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--muted);
    text-transform: uppercase;
}

.sc-platforms {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sc-plat {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--ff-c);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--white-40);
    padding: 10px 14px;
    border: 1px solid var(--black-5);
    transition: color var(--tf), border-color var(--tf), background var(--tf);
}
.sc-plat svg { width: 18px; height: 18px; flex-shrink: 0; }
.sc-plat:hover { color: var(--white); border-color: var(--gray); background: var(--black-4); }
.sc-plat-spotify svg { color: var(--spotify); }
.sc-plat-apple svg  { color: #fa233b; }
.sc-plat-yt svg     { color: #ff0000; }

/* Tracks side */
.sc-tracks { padding: 40px; display: flex; flex-direction: column; gap: 28px; }
.sc-top-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ff-c);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.24em;
    color: var(--spotify);
}
.sc-top-label svg { color: var(--spotify); }

.sc-track-list { display: flex; flex-direction: column; flex: 1; }
.sct-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--black-5);
    cursor: pointer;
    transition: background var(--tf);
}
.sct-row:last-child { border-bottom: none; }
.sct-row:hover { background: var(--black-4); margin: 0 -16px; padding: 14px 16px; }
.sct-n {
    font-family: var(--ff-c);
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    min-width: 24px;
}
.sct-name {
    font-family: var(--ff-c);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--white-70);
    min-width: 160px;
    transition: color var(--tf);
}
.sct-row:hover .sct-name { color: var(--white); }
.sct-bar {
    flex: 1;
    height: 3px;
    background: var(--black-5);
    overflow: hidden;
    border-radius: 2px;
}
.st-fill {
    height: 100%;
    background: linear-gradient(to right, var(--spotify), rgba(29,185,84,0.5));
    border-radius: 2px;
    transition: width 1.2s var(--ease-o);
    width: 0;
}
.sct-count {
    font-family: var(--ff-c);
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    min-width: 44px;
    text-align: right;
}

.sc-cta {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.sc-sub-link {
    font-family: var(--ff-c);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--muted);
    transition: color var(--tf);
    border-bottom: 1px solid var(--black-5);
    padding-bottom: 1px;
}
.sc-sub-link:hover { color: var(--spotify); border-color: var(--spotify); }

/* ---- Gallery ---- */
#gallery {
    padding: var(--sv) 0;
    background: var(--black);
}
.gallery-wrap {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--px);
}
.gw-header { margin-bottom: 56px; }
.gw-header .display-title { margin-bottom: 0; }

/* Editorial first row */
.gallery-editorial {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-bottom: 4px;
}
.ge-big { grid-row: span 2; }
.ge-col-right { display: flex; flex-direction: column; gap: 4px; }

.ge-item { overflow: hidden; }
.ge-img {
    width: 100%; height: 100%;
    min-height: 260px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--ts) var(--ease);
}
.ge-item:hover .ge-img { transform: scale(1.03); }
.ge-big .ge-img { min-height: 100%; height: 100%; min-height: 520px; }
.ge-col-right .ge-img { height: 260px; }

/* Strip second row */
.gallery-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}
.gs-item { overflow: hidden; }
.gs-item .ge-img { height: 240px; }

/* Photo art */
.ge-stage {
    background: linear-gradient(145deg, #280e00, #4a1e00, #0e0806);
}
.ge-stage::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 70% at 50% 80%, rgba(232,99,26,0.38), transparent 65%);
}
.ge-studio {
    background: linear-gradient(145deg, #04040e, #0c0c28, #060610);
}
.ge-studio::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 55% at 35% 40%, rgba(60,60,200,0.18), transparent 65%);
}
.ge-back {
    background: linear-gradient(145deg, #040c04, #0a180a, #040808);
}
.ge-back::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 55% at 60% 50%, rgba(30,140,30,0.1), transparent 65%);
}
.ge-festival {
    background: linear-gradient(145deg, #0e0e04, #221e02, #0a0a02);
}
.ge-festival::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 65% 60% at 50% 55%, rgba(200,160,20,0.18), transparent 70%);
}
.ge-mv {
    background: linear-gradient(145deg, #0e0004, #2a0010, #080006);
}
.ge-mv::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 55% at 48% 50%, rgba(200,20,60,0.16), transparent 65%);
}
.ge-press {
    background: linear-gradient(145deg, #060e12, #0a1e2c, #040810);
}
.ge-press::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 55% at 55% 45%, rgba(20,130,180,0.12), transparent 65%);
}

/* Overlay caption */
.ge-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(8,8,8,0.9) 0%, rgba(8,8,8,0.05) 55%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px 22px;
    z-index: 4;
    opacity: 0;
    transition: opacity var(--tm) var(--ease);
}
.ge-item:hover .ge-overlay,
.gs-item:hover .ge-overlay { opacity: 1; }
.ge-tag {
    font-family: var(--ff-c);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.26em;
    color: var(--orange);
    margin-bottom: 5px;
}
.ge-caption {
    font-family: var(--ff-c);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--white);
}

/* Scan line texture on all photos */
.ge-stage::after, .ge-studio::after, .ge-back::after,
.ge-festival::after, .ge-mv::after, .ge-press::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg, transparent, transparent 3px,
        rgba(0,0,0,0.04) 3px, rgba(0,0,0,0.04) 4px
    );
    pointer-events: none;
    z-index: 2;
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
    .about-editorial {
        grid-template-columns: 360px 1fr;
        gap: 56px;
    }
    .ep-feature {
        grid-template-columns: 280px 1fr;
        gap: 40px;
    }
    .stream-card { grid-template-columns: 280px 1fr; }
    .sc-ep { padding: 28px; }
    .sc-tracks { padding: 28px; }
}
@media (max-width: 900px) {
    .about-editorial { grid-template-columns: 1fr; }
    .ae-photo { max-width: 340px; }
    .ep-feature { grid-template-columns: 1fr; }
    .ep-cover { max-width: 320px; }
    .prev-grid { grid-template-columns: 1fr; }
    .stream-card { grid-template-columns: 1fr; }
    .sc-ep { border-right: none; border-bottom: 1px solid var(--black-5); }
    .sc-ep-cover { max-width: 200px; }
}
@media (max-width: 768px) {
    .ae-stats { flex-wrap: wrap; gap: 16px; }
    .ae-sep { display: none; }
    .gallery-editorial { grid-template-columns: 1fr; }
    .ge-big .ge-img { min-height: 280px; }
    .ge-col-right .ge-img { height: 200px; }
    .gallery-strip { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .gallery-strip { grid-template-columns: 1fr; }
    .gs-item .ge-img { height: 200px; }
}