/**
 * Music landing page styles (template-music.php).
 *
 * @package Hamechadesh
 */

/* === Page shell === */
.hm-music-page__inner {
	display: flex;
	flex-direction: column;
	gap: var(--hm-space-section, 40px);
	padding-block: var(--hm-space-lg, 24px);
}

/* ==========================================================================
   Top Banner Ad — zone 96313 (1140×100)
   Mirrors the home page's banner pattern (.hm-featured__banner) but scoped
   locally so we don't have to pull in featured-article.css just for this.
   ========================================================================== */

@keyframes hm-music-page-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

.hm-music-page__banner {
	position: relative;
	width: 100%;
	max-width: 1140px;
	min-height: 100px;
	margin-inline: auto;
}

.hm-music-page__banner--loading {
	border-radius: var(--hm-radius-md);
	background: linear-gradient(90deg, #e0e0e0 25%, #efefef 50%, #e0e0e0 75%);
	background-size: 200% 100%;
	/* Cap iterations so paint loop stops if JS never removes --loading. */
	animation: hm-music-page-shimmer 1.5s ease-in-out 12;
}

@media (prefers-reduced-motion: reduce) {
	.hm-music-page__banner--loading {
		animation: none;
	}
}

/* Hide the <ins> placeholder while the shimmer is visible so the ad's
   pre-fill state doesn't peek through the skeleton. */
.hm-music-page__banner--loading > * {
	opacity: 0;
}

/* Tablet portrait: the desktop markup carries the 1140x100 creative (zone
   96313), which can't fit a 768-1023 viewport (iframes crop, not scale) —
   hide it, same treatment as the 970px banners on archive pages. */
@media (min-width: 768px) and (max-width: 1023px) {
	.hm-music-page__banner {
		display: none;
	}
}

/* Mobile: shrink the skeleton to match the 320×100 banner size. */
@media (max-width: 767px) {
	.hm-music-page__banner {
		max-width: 320px;
	}
}

/* ==========================================================================
   Music Feature Section — 5 expandable cards (Figma node 516:24152 reskinned)
   Reuses .hm-music-section__cards from assets/css/components/music-section.css
   (4-card 4.5fr:1fr:1fr:1fr expandable grid) but adds a 5-card variant with
   the LAST DOM card (= leftmost in RTL) open by default — that slot previously
   held .hm-music-feature__card--main.
   ========================================================================== */

.hm-music-feature {
	width: 100%;
}

.hm-music-feature__row {
	display: block;
}

/* --- 5-column expandable variant (desktop default ≥1350px). --- */
.hm-music-feature .hm-music-section__cards {
	grid-template-columns: 1fr 1fr 1fr 1fr 4.5fr;
}

.hm-music-feature .hm-music-section__cards[data-active="0"] { grid-template-columns: 4.5fr 1fr 1fr 1fr 1fr; }
.hm-music-feature .hm-music-section__cards[data-active="1"] { grid-template-columns: 1fr 4.5fr 1fr 1fr 1fr; }
.hm-music-feature .hm-music-section__cards[data-active="2"] { grid-template-columns: 1fr 1fr 4.5fr 1fr 1fr; }
.hm-music-feature .hm-music-section__cards[data-active="3"] { grid-template-columns: 1fr 1fr 1fr 4.5fr 1fr; }
.hm-music-feature .hm-music-section__cards[data-active="4"] { grid-template-columns: 1fr 1fr 1fr 1fr 4.5fr; }

/* --- Small desktop (1024-1349px) — keep 4.5fr scale --- */
@media (min-width: 1024px) and (max-width: 1349px) {
	.hm-music-feature .hm-music-section__cards { grid-template-columns: 1fr 1fr 1fr 1fr 4.5fr; }
	.hm-music-feature .hm-music-section__cards[data-active="0"] { grid-template-columns: 4.5fr 1fr 1fr 1fr 1fr; }
	.hm-music-feature .hm-music-section__cards[data-active="1"] { grid-template-columns: 1fr 4.5fr 1fr 1fr 1fr; }
	.hm-music-feature .hm-music-section__cards[data-active="2"] { grid-template-columns: 1fr 1fr 4.5fr 1fr 1fr; }
	.hm-music-feature .hm-music-section__cards[data-active="3"] { grid-template-columns: 1fr 1fr 1fr 4.5fr 1fr; }
	.hm-music-feature .hm-music-section__cards[data-active="4"] { grid-template-columns: 1fr 1fr 1fr 1fr 4.5fr; }
}

/* --- Tablet (768-1023px) — match 3.5fr scaling of the singles/clips section --- */
@media (min-width: 768px) and (max-width: 1023px) {
	.hm-music-feature .hm-music-section__cards { grid-template-columns: 1fr 1fr 1fr 1fr 3.5fr; }
	.hm-music-feature .hm-music-section__cards[data-active="0"] { grid-template-columns: 3.5fr 1fr 1fr 1fr 1fr; }
	.hm-music-feature .hm-music-section__cards[data-active="1"] { grid-template-columns: 1fr 3.5fr 1fr 1fr 1fr; }
	.hm-music-feature .hm-music-section__cards[data-active="2"] { grid-template-columns: 1fr 1fr 3.5fr 1fr 1fr; }
	.hm-music-feature .hm-music-section__cards[data-active="3"] { grid-template-columns: 1fr 1fr 1fr 3.5fr 1fr; }
	.hm-music-feature .hm-music-section__cards[data-active="4"] { grid-template-columns: 1fr 1fr 1fr 1fr 3.5fr; }
}

/* --- Mobile (≤767px) — LTR scroll so the main post (DOM[last], visually
   leftmost on desktop) appears FIRST and the user swipes left-to-right
   through the remaining 4 cards. Scoped to .hm-music-feature only so the
   singles/clips section keeps its RTL scroll behavior.

   Why this combo:
   - `direction: ltr` on the container → scrollLeft=0 sits at the LEFT, so
     the first visible card is whichever is laid out leftmost.
   - `order` reversed (5→1 over the 5 cards) → the LAST DOM child (main)
     gets order:1 and lands at the leftmost position; DOM[0] gets order:5
     and lands at the rightmost. Avoids the row-reverse browser quirk where
     scroll-origin sometimes flips to the right in LTR.
   - `direction: rtl` restored on each card → Hebrew text alignment, the
     `inset-inline-end` content position, and `border-inline-start` on
     the subtitle pill all stay correct. --- */
@media (max-width: 767px) {
	.hm-music-feature .hm-music-section__cards {
		direction: ltr;
	}

	.hm-music-feature .hm-music-section__card {
		direction: rtl;
	}

	.hm-music-feature .hm-music-section__card:nth-child(1) { order: 5; }
	.hm-music-feature .hm-music-section__card:nth-child(2) { order: 4; }
	.hm-music-feature .hm-music-section__card:nth-child(3) { order: 3; }
	.hm-music-feature .hm-music-section__card:nth-child(4) { order: 2; }
	.hm-music-feature .hm-music-section__card:nth-child(5) { order: 1; }
}

/* ==========================================================================
   Music Section — page variant (סינגלים & קליפים)
   Overrides the shared .hm-music-section (from music-section.css) to:
     1. Extend the dark bg to the full viewport while content stays centered.
     2. Render a text title in place of the home page's logo image.
     3. Hide the CTA button (no markup — defensive selector below in case).
   Loaded only on templates/template-music.php.
   ========================================================================== */

.hm-music-section--full {
	/* Same outer chrome as the corners section (.hm-vod-section): the element
	   is rendered OUTSIDE .hm-container in template-music.php, so 100% here is
	   the body width — calc(100% - 10px) gives ~viewport minus 5px each side,
	   with rounded corners. Inner elements (.hm-music-section__header / __cards
	   / __slider) already cap their own width at 1325-1342px and self-center,
	   so the content stays in the middle while the dark bg fills the viewport. */
	width: calc( 100% - 10px );
	max-width: none;
	margin-inline: auto;
	margin-block: var( --hm-space-section );

	padding: 75px 4px 75px;
	background-color: var( --hm-color-music-bg );
	border-radius: var( --hm-radius-xl );
	overflow: hidden;
}

/* Header variant — text title (no logo image, no CTA). */
.hm-music-section--full .hm-music-section__header--text {
	/* Inherit display/gap/items-end/max-width from .hm-music-section__header. */
}

.hm-music-section--full .hm-music-section__title {
	font-family: var( --hm-font-primary );
	font-weight: 700;
	font-size: 36px;
	line-height: 38px;
	color: #FFFFFF;
	margin: 0;
	flex-shrink: 0;
	white-space: nowrap;
	unicode-bidi: isolate;
	/* Override the global h2 text-box-trim so the title vertically aligns
	   with the divider line via items-end on the row. */
	text-box-trim: none;
}

/* Defensive: hide the CTA if anything ever renders one inside this variant. */
.hm-music-section--full .hm-music-section__cta {
	display: none;
}

/* --- Mobile tweaks --- */
@media ( max-width: 767px ) {
	.hm-music-section--full .hm-music-section__title {
		font-size: 22px;
		line-height: 26px;
	}
}

/* ==========================================================================
   Albums Slider — light page-bg variant of .hm-galleries
   Reuses galleries.css markup + JS verbatim; this block only overrides the
   dark-section chrome and recolors the header for the music page.
   ========================================================================== */

.hm-galleries--light {
	/* Drop the dark container chrome — section sits directly on the page bg. */
	background-color: transparent;
	width: 100%;
	max-width: var( --hm-container-width );
	margin-top: 0;
	margin-inline: auto;
	border-radius: 0;
	overflow: visible;
	content-visibility: auto;
	contain-intrinsic-size: auto 350px;
}

.hm-galleries--light .hm-galleries__inner {
	padding-top: 0;
	padding-bottom: 0;
	/* keep horizontal padding from base so the slider edge-aligns with
	   the other content on the page. */
}

/* --- Header recolor: purple title text + purple divider line --- */
.hm-galleries--light .hm-galleries__title {
	color: var( --hm-color-music-accent ); /* #692A7C */
}

.hm-galleries--light .hm-galleries__line {
	border-bottom-color: var( --hm-color-music-accent ); /* #692A7C */
	opacity: 0.25;
}

/* Card content area — fits the per-post before_title pill above the title.
   The pill itself uses .hm-music-feature__subtitle--small (white text/border)
   which renders correctly on the purple #7E3E92 card background. */
.hm-galleries--light .hm-galleries__card-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* RIGHT in RTL */
	gap: 4px;
	padding: 12px 10px 14px;
	min-height: 95px;
}

.hm-galleries--light .hm-galleries__card-title {
	width: 100%;
}

/* Bump the slider track height so the extra content (subtitle + title) fits
   without clipping the hover-scaled cards. Mirrors galleries.css breakpoints. */
.hm-galleries--light .hm-galleries__track {
	height: 300px; /* desktop: image 187 + content ~95 + buffer */
}

@media ( min-width: 768px ) and ( max-width: 1023px ) {
	.hm-galleries--light .hm-galleries__track {
		height: 275px;
	}
}

@media ( max-width: 767px ) {
	.hm-galleries--light .hm-galleries__track {
		height: 260px;
	}

	/* Slider edge behavior on mobile:
	   - Header keeps the parent's `padding-inline: 16px` (sits inside the
	     content area, away from both viewport edges — current state).
	   - The slider track itself overflows LEFT (RTL inline-end) so cards
	     can slide in from off-screen. RIGHT (RTL inline-start) keeps the
	     16px padding so the first visible card has breathing room.
	   Negative margin-inline-end on .hm-galleries__slider pulls only its
	   LEFT edge out to the parent's box edge. */
	.hm-galleries--light .hm-galleries__slider {
		margin-inline-end: calc( -1 * var( --hm-container-padding ) );
	}

	/* Nav arrows row sits below the slider; keep it inside the padded
	   content area so the buttons aren't flush to the viewport edge. */
	.hm-galleries--light .hm-galleries__nav {
		margin-inline-end: 0;
	}
}

/* --- Cards: light theme (purple bg + white text) --- */
.hm-galleries--light .hm-galleries__card {
	background-color: #7E3E92;
}

.hm-galleries--light .hm-galleries__card-img--placeholder {
	background-color: #4f1361;
}

.hm-galleries--light .hm-galleries__card-title,
.hm-galleries--light .hm-galleries__card-title a {
	color: #FFFFFF;
}

/* --- Mobile-aligned tweaks: keep galleries.css mobile sizing,
       but undo the dark-section padding remnants. --- */
@media ( max-width: 767px ) {
	.hm-galleries--light .hm-galleries__inner {
		padding-top: 0;
		padding-bottom: 0;
		padding-inline: 5px;
	}
}

@media ( min-width: 1350px ) {
	.hm-galleries--light .hm-galleries__inner {
		padding-top: 0;
		padding-bottom: 0;
	}
}

/* ==========================================================================
   Music Interview Section — 3 static gallery-style cards + sidebar column
   Sidebar reuses .hm-catposts__sidebar (2 horizontal vod-cards + banner),
   with the vod-card __content recolored to music purple + white text.
   ========================================================================== */

.hm-music-interview__row {
	display: flex;
	gap: 15px;
	align-items: stretch; /* sidebar's natural height defines the row; cards stretch */
}

/* The 3 gallery cards: stretch to match the sidebar column's height. */
.hm-music-interview__row > .hm-galleries__card {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
	display: flex;
	flex-direction: column;
}

.hm-music-interview__row > .hm-galleries__card .hm-galleries__card-content {
	flex: 1; /* fills extra height when the card is stretched */
}

/* Sidebar column: fixed 320px width like the home-page catposts sidebar. */
.hm-music-interview__sidebar {
	flex-shrink: 0;
	width: 320px;
	gap: 15px;
}

/* Vod-card recolor — only the __content (text) side gets music purple +
   white text; the image side keeps its photo. */
.hm-music-interview__sidebar .hm-vod-card {
	background-color: transparent;
	align-items: stretch; /* let __content fill the full 100px card height */
	overflow: hidden;     /* clip __content's bg to the card's rounded corners */
}

.hm-music-interview__sidebar .hm-vod-card__content {
	background-color: #7E3E92;
	color: #FFFFFF;
	justify-content: center; /* center the text block within the stretched height */
	padding-inline: 12px;
}

.hm-music-interview__sidebar .hm-vod-card--light .hm-vod-card__title,
.hm-music-interview__sidebar .hm-vod-card__title {
	color: #FFFFFF;
}

/* Before-title badge — white text + white left border (RTL inline-start). */
.hm-music-interview__sidebar .hm-vod-card--light .hm-vod-card__badge,
.hm-music-interview__sidebar .hm-vod-card__badge {
	color: #FFFFFF;
	border-inline-start-color: #FFFFFF;
}

/* Meta row (time / date / author) — white on purple. */
.hm-music-interview__sidebar .hm-vod-card__meta,
.hm-music-interview__sidebar .hm-vod-card__meta time,
.hm-music-interview__sidebar .hm-vod-card__meta-author {
	color: #FFFFFF;
}

.hm-music-interview__sidebar .hm-vod-card__sep {
	background-color: rgba( 255, 255, 255, 0.5 );
}

/* Banner inside the sidebar — keep it readable within the 320px column,
   but allow shrinking on smaller viewports. */
.hm-music-interview__sidebar .hm-catposts__sidebar-banner {
	width: 100%;
	max-width: 320px;
}

/* --- Responsive: stack to a single column on tablets/mobile. --- */
@media ( max-width: 1023px ) {
	.hm-music-interview__row {
		flex-direction: column;
		align-items: stretch;
	}

	/* RESET the desktop `flex: 1 1 0` — in flex-direction:column it makes
	   flex-basis:0 the main-axis (vertical) size, collapsing each card to
	   height 0 because the column container has no defined height to grow
	   into. Use natural sizing instead. */
	.hm-music-interview__row > .hm-galleries__card {
		flex: 0 0 auto;
		width: 100%;
	}

	.hm-music-interview__sidebar {
		width: 100%;
		flex-direction: column;
	}
}

/* --- Mobile-only tweaks --- */
@media ( max-width: 767px ) {
	/* 1. Hide the sidebar banner on mobile (mobile already has its own banner
	      rendered as a standalone .hm-music-page__banner between sections). */
	.hm-music-interview__sidebar .hm-catposts__sidebar-banner {
		display: none;
	}

	/* 2. Shrink the vod-card image to 95px tall on mobile.
	      __img has width:100%; height:100% so it follows __media's size, and we
	      pull the card itself in so the purple content side matches the image. */
	.hm-music-interview__sidebar .hm-vod-card {
		min-height: 95px;                 /* grows for 3-line titles instead of clipping */
	}
	.hm-music-interview__sidebar .hm-vod-card__media {
		height: auto;                     /* stretch to full card height (align-items: stretch) */
	}
}

/* ==========================================================================
   Music Corners Section — reuses .hm-vod-section
   Wrapper .hm-music-corners scopes these overrides to the music page only.
   The home-vod-section CSS stays untouched.
   ========================================================================== */

/* 1. Section background → music dark purple. The section already sits outside
      .hm-container, so its own .hm-vod-section { width: calc(100% - 10px) }
      makes it span the viewport like on the home page. */
.hm-music-corners .hm-vod-section {
	background-color: var( --hm-color-music-bg ); /* #23002D */
}

/* 5. 100px margin below the section. */
.hm-music-corners {
	margin-bottom: 100px;
}

/* 2. Dot — solid white, no dark stroke (gradient already → white via white args). */
.hm-music-corners .hm-vod-section__logo-dot circle {
	stroke: none;
}

/* 3. Slider nav buttons — white pill (already white from white args) +
      purple icon (override the white-on-white from the SVG). */
.hm-music-corners .hm-vod-section__nav-btn svg path {
	fill: var( --hm-color-music-accent ); /* #692A7C */
}

/* Hide the CTA — per spec, no "לעמוד הפינות" button on this section. */
.hm-music-corners .hm-vod-section__cta {
	display: none;
}

/* 4. Hide the video play icon on each card. */
.hm-music-corners .hm-vod-section__card-play {
	display: none;
}