/**
 * Category / archive page styles.
 *
 * The .hm-featured* rules (including the top banner styling) live in the
 * shared assets/css/components/featured-article.css.
 *
 * @package Hamechadesh
 */

/* ==========================================================================
   Main column — no inline padding (overrides the 70px from single-columns.css).
   The mobile 0 10px override in single-columns.css still applies via !important.
   ========================================================================== */

.hm-single-columns__main {
	padding: 0;
}

/* ==========================================================================
   Top banner — centered horizontally within the main column (mobile 320px /
   desktop 970px). The actual width is capped by the banner's own max-width
   in featured-article.css; this rule just centers whatever width remains.
   ========================================================================== */

.hm-single-columns__main > .hm-featured__banner {
	margin-inline: auto;
}

/* ==========================================================================
   Featured Article on archive — sits below the top banner with breathing room.
   ========================================================================== */

.hm-single-columns__main .hm-featured {
	margin-top: 22px;
}

/* ==========================================================================
   Galleries category — accent color override.

   Header dot (.hm-single-cat-header__dot): the component sets
   --hm-single-cat-accent inline from hm_get_category_color(), which falls
   back to orange for the gallery category. !important is needed to beat
   the inline style.

   Card category dots (.hm-card-md__category-dot): each card SVG carries a
   server-side fill="..." attribute. CSS on the ellipse element wins over
   that presentation attribute without !important, and applies to every
   card on the page — including those appended via infinite scroll.
   ========================================================================== */

.hm-archive-galleries .hm-single-cat-header {
	--hm-single-cat-accent: #55EBB1 !important;
}

.hm-archive-galleries .hm-card-md__category-dot ellipse {
	fill: #55EBB1;
}

.hm-archive-galleries .hm-card-md__badge {
	color: #55EBB1;
	border-inline-start-color: #55EBB1;
}

/* Video category — header dot accent. Same mechanism as galleries:
   the component sets --hm-single-cat-accent inline, so !important is
   needed to beat the inline style. */
.hm-archive-video .hm-single-cat-header {
	--hm-single-cat-accent: #F4C811 !important;
}

/* Video category — featured-article "before-title" badge accent.
   The shared component uses var(--hm-color-accent) for both the
   left-border and text color; scope it to the video archive body
   class so other archives keep their orange accent. */
.hm-archive-video .hm-featured__badge {
	color: #F4C811;
	border-inline-start-color: #F4C811;
}

/* Video category — centered play-circle overlay inside featured media.
   The SVG is only rendered in the markup on the video archive, so
   these rules don't apply elsewhere. Physical left/transform are used
   intentionally — centering math is identical in RTL and LTR. */
.hm-featured__play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 120px;
	height: 120px;
	pointer-events: none;
	z-index: 2;
}

/* ==========================================================================
   Video category — dark-card grid variant.

   Mirrors the galleries dark-card variant but with the video accent
   (#F4C811). Card category dots and badge are recolored; the card
   itself goes dark with white title/excerpt and #D9D9D9 meta row.
   Higher specificity than the component defaults so this also wins
   on mobile (where the card uses a horizontal layout).
   ========================================================================== */

.hm-archive-video .hm-card-md__category-dot ellipse {
	fill: #F4C811;
}

/* Per-context dot positioning.
   The component default (article-card.css) is top:-2px; right:4px;
   That's the correct position INSIDE the wide hero (the .hm-galleries-hero
   markup also uses .hm-card-md__category-dot, but it's NOT inside any
   .hm-card-md, so the default stays untouched there).
   Inside the regular grid card the dot needs to sit flush at top:0; right:0;
   so we scope the override to .hm-card-md descendants only. */
.hm-archive-video .hm-card-md .hm-card-md__category-dot {
	top: 0;
	right: 0;
}

.hm-archive-video .hm-card-md__badge {
	color: #F4C811;
	border-inline-start-color: #F4C811;
}

/* 3-column grid on desktop. Tablet drops to 2 columns and mobile to 1,
   matching the galleries cadence and the shared archive-posts-grid
   breakpoints. */
.hm-archive-video .hm-archive-grid {
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
}

@media (max-width: 1023px) {
	.hm-archive-video .hm-archive-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.hm-archive-video .hm-archive-grid {
		grid-template-columns: 1fr;
	}
}

/* Dark card surface. */
.hm-archive-video .hm-card-md {
	background-color: #383838;
}

/* Title + excerpt (inside .hm-card-md__text) — white. The two child
   selectors are listed explicitly because the component sets color on
   them directly via var(--hm-color-primary); a plain rule on __text
   wouldn't cascade through. */
.hm-archive-video .hm-card-md__title,
.hm-archive-video .hm-card-md__title a,
.hm-archive-video .hm-card-md__excerpt {
	color: #ffffff;
}

/* Meta row — text + comment icon + separator all in #D9D9D9.
   opacity reset to 1 so the color matches exactly (default meta-item
   rule uses opacity: 0.5 to mute the dark text). */
.hm-archive-video .hm-card-md__meta-item,
.hm-archive-video .hm-card-md__meta-item:hover,
.hm-archive-video .hm-card-md__comment-icon {
	color: #D9D9D9;
	opacity: 1;
}

.hm-archive-video .hm-card-md__sep {
	background-color: #D9D9D9;
}

/* Centered play-circle overlay on each card thumbnail.
   Rendered as a CSS pseudo-element (SVG inlined as a data URI) instead
   of markup, because the article-card template runs from both the
   initial page render and the AJAX infinite-scroll endpoint — pure CSS
   scoped via the .hm-archive-video body class is the only way to apply
   identically to both flows without threading a "show_play_icon" flag
   through the shared template-part. The SVG itself is the same one
   used in .hm-featured__play-icon (Figma node 739:22225), sized at
   64×64 — about half the 120px featured overlay, balanced for the
   ~200px-tall card thumbnail. */
.hm-archive-video .hm-card-md__media::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	pointer-events: none;
	z-index: 2;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none'><circle cx='20' cy='20' r='16.6667' fill='%23FFFFFF' opacity='0.4'/><path d='M25.7664 18.23023L18.30318 13.66358C16.81818 12.75524 14.908 13.82018 14.908 15.55851V24.4387C14.908 26.1771 16.81818 27.242 18.30318 26.3337L25.7664 21.76701C27.0897 20.95701 27.0897 19.04023 25.7664 18.23023Z' fill='%23FFFFFF'/></svg>");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* ==========================================================================
   Video category — wide hero (in-grid variant) overrides.

   The shared galleries-hero component uses #55EBB1 (green) for its
   before-title badge and ships with an image-gallery icon at top-right.
   On the video archive we recolor the badge to the video accent and
   stamp a centered play-circle overlay matching .hm-featured__play-icon
   and the .hm-card-md__media::after used on regular grid cards.
   Same data-URI SVG and same 64px size as the card variant — the wide
   media is similarly ~205px tall, so the ratio stays consistent.
   ========================================================================== */

.hm-archive-video .hm-galleries-hero__badge {
	color: #F4C811;
	border-inline-start-color: #F4C811;
}

/* The image-gallery icon (4 framed-image paths in the top-right of the
   media) is contextually wrong for video content — hide it here. The
   icon is absolutely positioned, so display:none won't reflow the media
   layout. Other archives that use this component (galleries) keep it. */
.hm-archive-video .hm-galleries-hero__icon {
	display: none;
}

.hm-archive-video .hm-galleries-hero__media::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	pointer-events: none;
	z-index: 2;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none'><circle cx='20' cy='20' r='16.6667' fill='%23FFFFFF' opacity='0.4'/><path d='M25.7664 18.23023L18.30318 13.66358C16.81818 12.75524 14.908 13.82018 14.908 15.55851V24.4387C14.908 26.1771 16.81818 27.242 18.30318 26.3337L25.7664 21.76701C27.0897 20.95701 27.0897 19.04023 25.7664 18.23023Z' fill='%23FFFFFF'/></svg>");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* 3-column grid on desktop (default archive grid is 2 columns).
   Tablet drops to 2 columns and mobile to 1 column, matching the shared
   archive-posts-grid.css breakpoints. Gap is a flat 15px across all
   breakpoints (default grid scales 20px → 16px → 12px). */
.hm-archive-galleries .hm-archive-grid {
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
}

@media (max-width: 1023px) {
	.hm-archive-galleries .hm-archive-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.hm-archive-galleries .hm-archive-grid {
		grid-template-columns: 1fr;
	}
}

/* Dark card variant — white title/excerpt, light-gray meta. Higher
   specificity (.hm-archive-galleries .hm-card-md) than the mobile
   horizontal-card rule (.hm-card-md alone), so this background also
   wins on mobile. */
.hm-archive-galleries .hm-card-md {
	background-color: #383838;
}

.hm-archive-galleries .hm-card-md__title,
.hm-archive-galleries .hm-card-md__title a,
.hm-archive-galleries .hm-card-md__excerpt {
	color: #ffffff;
}

/* Meta row — text + comment icon + separator line all in #D9D9D9.
   Resetting opacity to 1 so the color matches exactly (the default
   meta-item rule applies opacity: 0.5 to mute the dark text). */
.hm-archive-galleries .hm-card-md__meta-item,
.hm-archive-galleries .hm-card-md__meta-item:hover,
.hm-archive-galleries .hm-card-md__comment-icon {
	color: #D9D9D9;
	opacity: 1;
}

.hm-archive-galleries .hm-card-md__sep {
	background-color: #D9D9D9;
}