/**
 * MMAZS Block Enhancement Styles
 *
 * These styles enhance block styles registered in functions.php.
 * All colors use CSS custom properties from theme.json.
 * No !important overrides - respects editor choices.
 */

/* ==========================================================================
   CSS Custom Properties (supplement theme.json)
   ========================================================================== */
:root {
	--mmazs-transition-fast: 0.2s ease;
	--mmazs-transition-normal: 0.3s ease;
	--mmazs-transition-slow: 0.4s ease;
	--mmazs-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.1);
	--mmazs-shadow-card-hover: 0 20px 40px rgba(0, 0, 0, 0.15);
	--mmazs-shadow-dark: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   BLOCK STYLE: Section Dark (.is-style-section-dark)
   Dark navy background with subtle pattern overlay
   ========================================================================== */
.wp-block-group.is-style-section-dark {
	position: relative;
	overflow: hidden;
}

.wp-block-group.is-style-section-dark::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image:
		linear-gradient(30deg, transparent 48%, rgba(255,255,255,0.015) 50%, transparent 52%),
		linear-gradient(-30deg, transparent 48%, rgba(255,255,255,0.015) 50%, transparent 52%);
	background-size: 60px 100px;
	pointer-events: none;
	z-index: 0;
}

.wp-block-group.is-style-section-dark::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--wp--preset--gradient--red-bar, linear-gradient(90deg, #dc2626, #991b1b));
	z-index: 1;
}

.wp-block-group.is-style-section-dark > * {
	position: relative;
	z-index: 1;
}

/* ==========================================================================
   BLOCK STYLE: Section Accent (.is-style-section-accent)
   Light section with diagonal accent
   ========================================================================== */
.wp-block-group.is-style-section-accent {
	position: relative;
}

.wp-block-group.is-style-section-accent::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 200px;
	height: 100%;
	background: linear-gradient(135deg, var(--wp--preset--color--background-alt, #f1f5f9) 0%, transparent 100%);
	pointer-events: none;
}

/* Hide decorative accent on mobile to prevent overlap */
@media (max-width: 782px) {
	.wp-block-group.is-style-section-accent::before {
		display: none;
	}
}

/* ==========================================================================
   BLOCK STYLE: Stats Bar (.is-style-stats-bar)
   Animated gradient background for stats section
   ========================================================================== */
.wp-block-group.is-style-stats-bar {
	position: relative;
	overflow: hidden;
}

.wp-block-group.is-style-stats-bar::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background:
		radial-gradient(circle at 30% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
		radial-gradient(circle at 70% 50%, rgba(220, 38, 38, 0.1) 0%, transparent 50%);
	animation: mmazs-pulse 8s ease-in-out infinite;
	pointer-events: none;
}

@keyframes mmazs-pulse {
	0%, 100% { transform: scale(1); opacity: 0.5; }
	50% { transform: scale(1.1); opacity: 0.8; }
}

.wp-block-group.is-style-stats-bar > * {
	position: relative;
	z-index: 1;
}

/* ==========================================================================
   BLOCK STYLE: Stats Columns (.is-style-stats-columns)
   Stats layout with dividers
   ========================================================================== */
.wp-block-columns.is-style-stats-columns {
	text-align: center;
}

.wp-block-columns.is-style-stats-columns > .wp-block-column {
	position: relative;
}

.wp-block-columns.is-style-stats-columns > .wp-block-column:not(:last-child)::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 60px;
	background: linear-gradient(to bottom, transparent, var(--wp--preset--color--gray-500, #64748b), transparent);
}

@media (max-width: 781px) {
	.wp-block-columns.is-style-stats-columns > .wp-block-column:not(:last-child)::after {
		display: none;
	}
}

/* ==========================================================================
   BLOCK STYLE: News Card Dark (.is-style-news-card-dark)
   Dark card with hover effects
   ========================================================================== */
.wp-block-group.is-style-news-card-dark {
	transition: transform var(--mmazs-transition-normal), box-shadow var(--mmazs-transition-normal);
	overflow: hidden;
}

.wp-block-group.is-style-news-card-dark:hover {
	transform: translateY(-8px);
	box-shadow: var(--mmazs-shadow-dark);
}

/* Image zoom on hover */
.wp-block-group.is-style-news-card-dark .wp-block-cover__image-background,
.wp-block-group.is-style-news-card-dark .wp-block-post-featured-image img {
	transition: transform var(--mmazs-transition-slow);
}

.wp-block-group.is-style-news-card-dark:hover .wp-block-cover__image-background,
.wp-block-group.is-style-news-card-dark:hover .wp-block-post-featured-image img {
	transform: scale(1.05);
}

/* Red corner accent on hover */
.wp-block-group.is-style-news-card-dark::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 50px 50px 0 0;
	border-color: var(--wp--preset--color--primary, #dc2626) transparent transparent transparent;
	opacity: 0;
	transition: opacity var(--mmazs-transition-normal);
	z-index: 2;
}

.wp-block-group.is-style-news-card-dark:hover::before {
	opacity: 1;
}

/* ==========================================================================
   BLOCK STYLE: Event Card (.is-style-event-card)
   Card with timeline connector and hover effect
   ========================================================================== */
.wp-block-group.is-style-event-card {
	transition: transform var(--mmazs-transition-normal),
	            box-shadow var(--mmazs-transition-normal),
	            border-color var(--mmazs-transition-normal);
	border: 2px solid transparent;
}

.wp-block-group.is-style-event-card:hover {
	border-color: var(--wp--preset--color--secondary, #3b82f6);
	transform: translateX(8px);
	box-shadow: -8px 8px 0 var(--wp--preset--color--navy, #0a0f1a);
}

/* ==========================================================================
   BLOCK STYLE: Timeline (.is-style-timeline)
   Vertical timeline with gradient line
   ========================================================================== */
.wp-block-group.is-style-timeline {
	position: relative;
	padding-left: 80px;
}

.wp-block-group.is-style-timeline::before {
	content: '';
	position: absolute;
	left: 40px;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--wp--preset--gradient--accent-line, linear-gradient(to bottom, #3b82f6, #dc2626));
	border-radius: 2px;
}

/* Timeline dot for each item */
.wp-block-group.is-style-timeline > .wp-block-group {
	position: relative;
}

.wp-block-group.is-style-timeline > .wp-block-group::before {
	content: '';
	position: absolute;
	left: -52px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	background: var(--wp--preset--color--background, #fff);
	border: 3px solid var(--wp--preset--color--secondary, #3b82f6);
	border-radius: 50%;
	z-index: 1;
}

.wp-block-group.is-style-timeline > .wp-block-group:nth-child(even)::before {
	border-color: var(--wp--preset--color--primary, #dc2626);
}

@media (max-width: 600px) {
	.wp-block-group.is-style-timeline {
		padding-left: 40px;
	}

	.wp-block-group.is-style-timeline::before {
		left: 10px;
	}

	.wp-block-group.is-style-timeline > .wp-block-group::before {
		left: -38px;
		width: 12px;
		height: 12px;
	}
}

/* ==========================================================================
   BLOCK STYLE: News Featured Grid (.is-style-news-featured-grid)
   Grid with featured first item larger
   ========================================================================== */
.wp-block-query.is-style-news-featured-grid .wp-block-post-template {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 24px;
}

.wp-block-query.is-style-news-featured-grid .wp-block-post-template > .wp-block-post:first-child {
	grid-row: span 2;
}

@media (max-width: 900px) {
	.wp-block-query.is-style-news-featured-grid .wp-block-post-template {
		grid-template-columns: 1fr;
	}

	.wp-block-query.is-style-news-featured-grid .wp-block-post-template > .wp-block-post:first-child {
		grid-row: auto;
	}
}

/* ==========================================================================
   BLOCK STYLE: Accent Underline (.is-style-accent-underline)
   Heading with gradient underline
   ========================================================================== */
.wp-block-heading.is-style-accent-underline {
	position: relative;
	padding-bottom: 1rem;
	display: inline-block;
}

.wp-block-heading.is-style-accent-underline::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 80px;
	height: 4px;
	background: var(--wp--preset--gradient--accent-line, linear-gradient(90deg, #3b82f6, #dc2626));
	border-radius: 2px;
}

/* Centered version */
.has-text-align-center.is-style-accent-underline::after {
	left: 50%;
	transform: translateX(-50%);
}

/* ==========================================================================
   BLOCK STYLE: Subtitle (.is-style-subtitle)
   Muted paragraph for section subtitles
   ========================================================================== */
.wp-block-paragraph.is-style-subtitle {
	font-size: 1.125rem;
	line-height: 1.6;
	margin-top: 0.5rem;
}

/* ==========================================================================
   BLOCK STYLE: Button Outline White (.is-style-outline-white)
   White outlined button for dark backgrounds
   ========================================================================== */
.wp-block-button.is-style-outline-white .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--background, #fff);
	border: 2px solid var(--wp--preset--color--background, #fff);
	transition: background var(--mmazs-transition-normal), color var(--mmazs-transition-normal);
}

.wp-block-button.is-style-outline-white .wp-block-button__link:hover {
	background: var(--wp--preset--color--background, #fff);
	color: var(--wp--preset--color--navy, #0a0f1a);
}

/* ==========================================================================
   BLOCK STYLE: Button Outline Blue (.is-style-outline-blue)
   Blue outlined button for light backgrounds
   ========================================================================== */
.wp-block-button.is-style-outline-blue .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--secondary, #3b82f6);
	border: 2px solid var(--wp--preset--color--secondary, #3b82f6);
	transition: background var(--mmazs-transition-normal), color var(--mmazs-transition-normal);
}

.wp-block-button.is-style-outline-blue .wp-block-button__link:hover {
	background: var(--wp--preset--color--secondary, #3b82f6);
	color: var(--wp--preset--color--background, #fff);
}

/* ==========================================================================
   GENERAL ENHANCEMENTS
   Subtle improvements that don't override block editor choices
   ========================================================================== */

/* Smooth scroll */
html {
	scroll-behavior: smooth;
}

/* Button hover lift */
.wp-block-button__link {
	transition: transform var(--mmazs-transition-normal), box-shadow var(--mmazs-transition-normal);
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Post/Card hover effects (for query loops) */
.wp-block-post {
	transition: transform var(--mmazs-transition-normal), box-shadow var(--mmazs-transition-normal);
}

/* Link underline animation */
.wp-block-post-title a,
.wp-block-heading a {
	text-decoration: none;
	position: relative;
}

.wp-block-post-title a::after,
.wp-block-heading a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background: currentColor;
	transition: width var(--mmazs-transition-normal);
}

.wp-block-post-title a:hover::after,
.wp-block-heading a:hover::after {
	width: 100%;
}

/* Navigation hover underline */
.wp-block-navigation-item__content {
	position: relative;
}

.wp-block-navigation-item__content::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 50%;
	width: 0;
	height: 3px;
	background: var(--wp--preset--color--secondary, #3b82f6);
	transition: width var(--mmazs-transition-normal);
	transform: translateX(-50%);
}

.wp-block-navigation-item__content:hover::after {
	width: 80%;
}

/* Social links hover */
.wp-block-social-links .wp-social-link {
	transition: transform var(--mmazs-transition-normal);
}

.wp-block-social-links .wp-social-link:hover {
	transform: translateY(-3px);
}

/* Image zoom containers */
.wp-block-cover {
	overflow: hidden;
}

.wp-block-cover__image-background {
	transition: transform var(--mmazs-transition-slow);
}

.wp-block-cover:hover .wp-block-cover__image-background {
	transform: scale(1.03);
}

/* Selection color */
::selection {
	background: var(--wp--preset--color--secondary, #3b82f6);
	color: var(--wp--preset--color--background, #fff);
}

/* Custom scrollbar */
::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	background: var(--wp--preset--color--background-alt, #f1f5f9);
}

::-webkit-scrollbar-thumb {
	background: var(--wp--preset--color--navy-light, #141c2e);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--wp--preset--color--secondary, #3b82f6);
}

/* ==========================================================================
   RED TOP BAR
   Fixed accent bar at top of page
   ========================================================================== */
body::before {
	content: '';
	display: block;
	width: 100%;
	height: 5px;
	background: var(--wp--preset--gradient--red-bar, linear-gradient(90deg, #dc2626, #991b1b));
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
}

body {
	padding-top: 5px;
}

/* Admin bar adjustment */
body.admin-bar::before {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar::before {
		top: 46px;
	}
}

/* ==========================================================================
   HEADER SPACING
   ========================================================================== */
header nav.wp-block-navigation {
	margin-left: 2rem;
}

/* ==========================================================================
   COVER BLOCK TEXT SHADOWS (readability)
   ========================================================================== */
.wp-block-cover h1,
.wp-block-cover h2,
.wp-block-cover .wp-block-heading {
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.wp-block-cover p {
	text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   EMPTY STATE STYLING
   ========================================================================== */
.mmazs-empty-state {
	text-align: center;
	padding: 60px 40px;
	border: 2px dashed var(--wp--preset--color--gray-200, #e2e8f0);
	border-radius: 12px;
}

.mmazs-empty-state-icon {
	width: 80px;
	height: 80px;
	margin: 0 auto 24px;
	background: var(--wp--preset--color--navy, #0a0f1a);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--background, #fff);
}

/* ==========================================================================
   DATE BOX STYLING (for events)
   ========================================================================== */
.mmazs-date-box {
	text-align: center;
	min-width: 80px;
}

.mmazs-date-day {
	font-family: var(--wp--preset--font-family--display, 'Oswald', sans-serif);
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1;
}

.mmazs-date-month {
	font-family: var(--wp--preset--font-family--display, 'Oswald', sans-serif);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 2px;
}

/* ==========================================================================
   FOOTER CONTACT ICONS
   ========================================================================== */
.mmazs-footer-contact .mmazs-contact-item {
	display: flex;
	align-items: center;
	gap: 12px;
}

.mmazs-footer-contact .mmazs-contact-item a {
	color: var(--wp--preset--color--gray-400, #94a3b8);
	text-decoration: none;
	transition: color var(--mmazs-transition-fast);
}

.mmazs-footer-contact .mmazs-contact-item a:hover {
	color: var(--wp--preset--color--background, #fff);
}

.mmazs-icon {
	display: inline-flex;
	width: 20px;
	height: 20px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	flex-shrink: 0;
}

.mmazs-icon-location {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ef4444'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
}

.mmazs-icon-email {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2394a3b8'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}

.mmazs-icon-phone {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2394a3b8'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
}

/* Social links in footer - hover effect */
.mmazs-footer .wp-block-social-links .wp-social-link:hover {
	transform: translateY(-3px);
}

.mmazs-footer .wp-block-social-links .wp-social-link svg {
	transition: fill var(--mmazs-transition-fast);
}

.mmazs-footer .wp-block-social-links .wp-social-link:hover svg {
	fill: var(--wp--preset--color--background, #fff);
}

/* ==========================================================================
   ABOUT PAGE STYLES
   ========================================================================== */

/* About Hero - Red top bar accent */
.about-hero {
	position: relative;
}

.about-hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: var(--wp--preset--gradient--red-bar, linear-gradient(90deg, #dc2626, #991b1b));
}

.about-hero::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:
		radial-gradient(ellipse at 20% 50%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
		radial-gradient(ellipse at 80% 80%, rgba(220, 38, 38, 0.06) 0%, transparent 50%);
	pointer-events: none;
}

.about-hero > * {
	position: relative;
	z-index: 1;
}

/* About Intro - Accent line at top */
.about-intro {
	position: relative;
}

.about-intro::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 80px;
	height: 4px;
	background: var(--wp--preset--gradient--accent-line, linear-gradient(90deg, #3b82f6, #dc2626));
	border-radius: 2px;
}

/* About Stat Boxes */
.about-stat-box {
	position: relative;
	overflow: hidden;
	transition: transform var(--mmazs-transition-normal);
}

.about-stat-box:hover {
	transform: translateY(-4px);
}

.about-stat-box::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--wp--preset--gradient--accent-line, linear-gradient(90deg, #3b82f6, #dc2626));
}

/* About Board Cards */
.board-card {
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
	transition: transform var(--mmazs-transition-normal), box-shadow var(--mmazs-transition-normal);
	position: relative;
	overflow: hidden;
}

.board-card::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--wp--preset--gradient--accent-line, linear-gradient(90deg, #3b82f6, #dc2626));
	transform: scaleX(0);
	transition: transform var(--mmazs-transition-normal);
}

.board-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

.board-card:hover::after {
	transform: scaleX(1);
}

.board-card-president {
	box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
}

.board-card-president::after {
	display: none;
}

/* Member Avatar */
.member-avatar {
	width: 80px;
	height: 80px;
	background: var(--wp--preset--color--background-alt, #f1f5f9);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
}

.member-avatar-large {
	width: 100px;
	height: 100px;
	background: rgba(220, 38, 38, 0.2);
}

.board-card-president .member-avatar {
	background: rgba(220, 38, 38, 0.2);
}

/* Board email links */
.board-card a {
	color: inherit;
	text-decoration: none;
	transition: color var(--mmazs-transition-fast);
}

.board-card a:hover {
	color: var(--wp--preset--color--secondary, #3b82f6);
}

/* About Goals Cards */
.goal-card {
	transition: transform var(--mmazs-transition-normal), box-shadow var(--mmazs-transition-normal);
}

.goal-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

.goal-icon {
	width: 56px;
	height: 56px;
}

/* About IMMAF Section */
.about-immaf {
	position: relative;
	overflow: hidden;
}

.about-immaf::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:
		radial-gradient(ellipse at 30% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
		radial-gradient(ellipse at 70% 50%, rgba(220, 38, 38, 0.08) 0%, transparent 50%);
	pointer-events: none;
}

.about-immaf > * {
	position: relative;
	z-index: 1;
}

.immaf-badge {
	background: rgba(255,255,255,0.1);
}

/* About CTA Section */
.about-cta {
	position: relative;
}

/* ==========================================================================
   MEMBERS PAGE STYLES
   ========================================================================== */

/* Members Hero */
.members-hero {
	position: relative;
}

.members-hero::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:
		radial-gradient(ellipse at 30% 50%, rgba(220, 38, 38, 0.08) 0%, transparent 50%),
		radial-gradient(ellipse at 70% 80%, rgba(59, 130, 246, 0.06) 0%, transparent 50%);
	pointer-events: none;
}

.members-hero > * {
	position: relative;
	z-index: 1;
}

/* Club Cards - Horizontal Layout */
:root :where(.club-card) {
	transition: transform var(--mmazs-transition-normal), box-shadow var(--mmazs-transition-normal);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

:root :where(.club-card:hover) {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

/* Club Logo Container - subtle glow on hover */
:root :where(.club-logo-container) {
	transition: background-color var(--mmazs-transition-normal);
}

/* Club Logo - border brightens on card hover */
:root :where(.club-card:hover .club-logo) {
	border-color: rgba(255, 255, 255, 0.3) !important;
	transition: border-color var(--mmazs-transition-normal);
}

/* Club Tags - primary tag scales slightly on hover */
:root :where(.club-tags .wp-block-paragraph) {
	transition: transform var(--mmazs-transition-fast);
}

:root :where(.club-tags .wp-block-paragraph:hover) {
	transform: scale(1.05);
}

/* Members Join Section */
.members-join {
	position: relative;
}

/* Members Regions - Regional stats hover */
:root :where(.region-item) {
	transition: transform var(--mmazs-transition-normal);
	cursor: default;
}

:root :where(.region-item:hover) {
	transform: translateY(-4px);
}

/* Members CTA */
.members-cta-section {
	position: relative;
}

/* ===========================================================================
   EVENTS PAGE STYLES
   =========================================================================== */

/* Events Hero */
.events-hero {
	position: relative;
}

.events-hero::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:
		radial-gradient(ellipse at 20% 30%, rgba(220, 38, 38, 0.1) 0%, transparent 50%),
		radial-gradient(ellipse at 80% 70%, rgba(220, 38, 38, 0.08) 0%, transparent 50%);
	pointer-events: none;
}

.events-hero > * {
	position: relative;
	z-index: 1;
}

/* Event Cards */
:root :where(.event-card) {
	transition: transform var(--mmazs-transition-normal), box-shadow var(--mmazs-transition-normal);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

:root :where(.event-card:hover) {
	transform: translateY(-6px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

/* Event Date Badge */
.event-date-badge {
	min-width: 80px;
	text-align: center;
}

/* Event Category Tags */
.event-tag-tekmovanje {
	background: rgba(220, 38, 38, 0.1) !important;
	color: #DC2626 !important;
}

.event-tag-seminar {
	background: rgba(37, 99, 235, 0.1) !important;
	color: #2563EB !important;
}

.event-tag-trening {
	background: rgba(16, 185, 129, 0.1) !important;
	color: #10B981 !important;
}

/* Filter Tabs */
:root :where(.filter-tab) {
	transition: all var(--mmazs-transition-normal);
}

:root :where(.filter-tab:hover) {
	border-color: #DC2626;
	color: #DC2626;
}

/* Events CTA Section */
.events-cta {
	position: relative;
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */
@media (max-width: 781px) {
	header nav.wp-block-navigation {
		margin-left: 1rem;
	}

	.mmazs-footer .wp-block-group[class*="justify-content-space-between"] {
		flex-direction: column;
		gap: 32px;
	}

	/* About page responsive */
	.about-hero {
		padding-top: 100px;
		padding-bottom: 80px;
	}

	.about-intro,
	.about-board,
	.about-goals {
		padding-top: 80px;
		padding-bottom: 80px;
	}

	.about-stats-grid {
		flex-direction: column;
	}

	.board-card-president {
		margin-bottom: 24px;
	}
}

/* ===========================================================================
   NEWS PAGE STYLES
   =========================================================================== */

/* News Hero */
.news-hero {
	position: relative;
}

.news-hero::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:
		radial-gradient(ellipse at 30% 50%, rgba(220, 38, 38, 0.08) 0%, transparent 50%),
		radial-gradient(ellipse at 70% 80%, rgba(59, 130, 246, 0.06) 0%, transparent 50%);
	pointer-events: none;
}

/* News Badge */
:root :where(.news-badge) {
	display: inline-block;
	background: #dc2626;
	color: white;
	padding: 0.4rem 1rem;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* Featured News Card */
:root :where(.featured-news-card) {
	display: flex;
	flex-wrap: nowrap;
	background: #1a1f2e;
	border-radius: 8px;
	overflow: hidden;
	transition: transform var(--mmazs-transition-normal), box-shadow var(--mmazs-transition-normal);
	min-height: 400px;
}

:root :where(.featured-news-card:hover) {
	transform: translateY(-4px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

/* Featured News Image Column */
:root :where(.featured-news-image-col) {
	flex: 0 0 50%;
	position: relative;
	min-height: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* Placeholder icon when no featured image */
:root :where(.featured-news-image-col)::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 30% 40%, rgba(220, 38, 38, 0.15) 0%, transparent 50%),
		radial-gradient(ellipse at 70% 60%, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
	z-index: 0;
}

:root :where(.featured-news-image-col)::after {
	content: '';
	position: absolute;
	width: 100px;
	height: 100px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,0.15)'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0.5;
	z-index: 1;
}

/* Hide placeholder when image exists */
:root :where(.featured-news-image-col:has(.wp-post-image))::after {
	display: none;
}

:root :where(.featured-news-image-col .wp-block-post-featured-image) {
	position: absolute;
	inset: 0;
	z-index: 2;
}

:root :where(.featured-news-image-col .wp-block-post-featured-image img) {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Featured News Content Column */
:root :where(.featured-news-content-col) {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2.5rem;
}

/* Featured News Badge */
:root :where(.featured-news-badge) {
	display: inline-flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-bottom: 0.5rem;
}

:root :where(.featured-news-badge a) {
	display: inline-block;
	background: #dc2626;
	color: white !important;
	padding: 0.4rem 1rem;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-decoration: none;
	transition: background var(--mmazs-transition-fast);
}

:root :where(.featured-news-badge a:hover) {
	background: #b91c1c;
}

/* Featured News Button (Read More) */
:root :where(.featured-news-btn),
:root :where(a.wp-block-read-more.featured-news-btn) {
	display: inline-block;
	background: #dc2626 !important;
	color: white !important;
	padding: 0.875rem 2rem !important;
	border-radius: 4px !important;
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	text-decoration: none !important;
	transition: background var(--mmazs-transition-fast), transform var(--mmazs-transition-fast) !important;
}

:root :where(.featured-news-btn:hover),
:root :where(a.wp-block-read-more.featured-news-btn:hover) {
	background: #b91c1c !important;
	transform: translateY(-2px) !important;
}

/* News Grid */
:root :where(.news-grid) {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
	gap: 2rem;
}

/* News Card */
:root :where(.news-card) {
	background: white;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	overflow: hidden;
	transition: transform var(--mmazs-transition-normal), box-shadow var(--mmazs-transition-normal);
}

:root :where(.news-card:hover) {
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

/* News Image Placeholder */
:root :where(.news-image-placeholder) {
	width: 100%;
	height: 220px;
	background: linear-gradient(135deg, #1a1f2e 0%, #374151 100%);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Add subtle pattern overlay to placeholders */
:root :where(.news-image-placeholder)::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 20% 30%, rgba(220, 38, 38, 0.15) 0%, transparent 40%),
		radial-gradient(circle at 80% 70%, rgba(59, 130, 246, 0.1) 0%, transparent 40%);
	pointer-events: none;
}

/* Add news icon to placeholder */
:root :where(.news-image-placeholder)::after {
	content: '';
	width: 64px;
	height: 64px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,0.15)'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0.6;
}

/* Read More Link */
:root :where(.read-more-link) {
	color: #dc2626;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-size: 0.9rem;
}

/* Category Buttons */
:root :where(.category-btn) {
	padding: 0.6rem 1.5rem !important;
	border: 2px solid #1a1f2e !important;
	background: white !important;
	color: #1a1f2e !important;
	border-radius: 4px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	font-size: 0.85rem !important;
}

:root :where(.category-btn:hover),
:root :where(.category-btn.is-active) {
	background: #1a1f2e !important;
	color: white !important;
}

/* Pagination */
:root :where(.news-pagination) {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
}

:root :where(.page-btn) {
	width: 40px !important;
	height: 40px !important;
	padding: 0 !important;
	border: 1px solid #d1d5db !important;
	background: white !important;
	color: #1a1f2e !important;
	border-radius: 4px !important;
}

:root :where(.page-btn:hover),
:root :where(.page-btn.is-active) {
	background: #dc2626 !important;
	color: white !important;
	border-color: #dc2626 !important;
}

/* ===========================================================================
   NEWS GRID CARDS (Light Background with Dark Cards)
   =========================================================================== */

/* News Grid Section - White background */
:root :where(.news-grid-section) {
	background: #ffffff;
}

/* Ensure content is properly constrained */
:root :where(.news-grid-section) > .news-grid-title,
:root :where(.news-grid-section) > .news-grid-query {
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
}

:root :where(.news-grid-title) {
	color: #1a1f2e;
	position: relative;
	display: block;
}

:root :where(.news-grid-title)::after {
	content: '';
	display: block;
	margin-top: 0.5rem;
	width: 60px;
	height: 3px;
	background: #dc2626;
	border-radius: 2px;
}

/* News Grid Layout - 3 columns for 6 cards */
:root :where(.news-grid-query .news-grid) {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

@media (max-width: 1100px) {
	:root :where(.news-grid-query .news-grid) {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 700px) {
	:root :where(.news-grid-query .news-grid) {
		grid-template-columns: 1fr;
	}
}

/* News Grid Card */
:root :where(.news-grid-card) {
	background: #1a1f2e !important;
	border-radius: 8px;
	overflow: hidden;
	transition: transform var(--mmazs-transition-normal), box-shadow var(--mmazs-transition-normal);
	display: flex;
	flex-direction: column;
	height: 100%;
}

:root :where(.news-grid-card:hover) {
	transform: translateY(-6px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

/* Card Image */
:root :where(.news-grid-card-image) {
	position: relative;
	overflow: hidden;
}

:root :where(.news-grid-card-image img) {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--mmazs-transition-slow);
}

:root :where(.news-grid-card:hover .news-grid-card-image img) {
	transform: scale(1.05);
}

/* Card Image Placeholder */
:root :where(.news-grid-card .wp-block-post-featured-image:not(:has(img))) {
	background: linear-gradient(135deg, #1a1f2e 0%, #2d3548 100%);
	min-height: 140px;
	position: relative;
}

:root :where(.news-grid-card .wp-block-post-featured-image:not(:has(img)))::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,0.15)'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

/* Card Badge (Category) */
:root :where(.news-grid-badge) {
	display: inline-flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

:root :where(.news-grid-badge a) {
	display: inline-block;
	background: rgba(220, 38, 38, 0.2);
	color: #dc2626 !important;
	padding: 0.35rem 0.75rem;
	border-radius: 4px;
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05rem;
	text-decoration: none;
	transition: background var(--mmazs-transition-fast), color var(--mmazs-transition-fast);
}

:root :where(.news-grid-badge a:hover) {
	background: #dc2626;
	color: #ffffff !important;
}

/* Card Button */
:root :where(.news-grid-btn),
:root :where(a.wp-block-read-more.news-grid-btn) {
	display: inline-block;
	background: #dc2626 !important;
	color: #ffffff !important;
	padding: 0.5rem 1rem !important;
	border-radius: 4px !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: background var(--mmazs-transition-fast), transform var(--mmazs-transition-fast) !important;
	align-self: flex-start;
}

:root :where(.news-grid-btn:hover),
:root :where(a.wp-block-read-more.news-grid-btn:hover) {
	background: #b91c1c !important;
	transform: translateY(-2px) !important;
}

/* News Grid Pagination - Light background */
:root :where(.news-grid-query .wp-block-query-pagination) {
	margin-top: 2.5rem;
}

:root :where(.news-grid-query .wp-block-query-pagination-previous),
:root :where(.news-grid-query .wp-block-query-pagination-next) {
	background: transparent;
	color: #1a1f2e;
	padding: 0.6rem 1.25rem;
	border: 2px solid #d1d5db;
	border-radius: 6px;
	font-weight: 600;
	font-size: 0.9rem;
	transition: all var(--mmazs-transition-fast);
}

:root :where(.news-grid-query .wp-block-query-pagination-previous:hover),
:root :where(.news-grid-query .wp-block-query-pagination-next:hover) {
	background: #dc2626;
	border-color: #dc2626;
	color: #ffffff;
}

:root :where(.news-grid-query .wp-block-query-pagination-numbers) {
	display: flex;
	gap: 0.5rem;
}

:root :where(.news-grid-query .wp-block-query-pagination-numbers .page-numbers) {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: #1a1f2e;
	border: 2px solid #d1d5db;
	border-radius: 6px;
	font-weight: 600;
	transition: all var(--mmazs-transition-fast);
}

:root :where(.news-grid-query .wp-block-query-pagination-numbers .page-numbers:hover),
:root :where(.news-grid-query .wp-block-query-pagination-numbers .page-numbers.current) {
	background: #dc2626;
	border-color: #dc2626;
	color: #ffffff;
}

/* ===========================================================================
   GALLERY PAGE STYLES - "COMBAT GALLERY" DESIGN
   Athletic, dynamic styling inspired by MMA energy
   =========================================================================== */

/* Gallery Hero - Enhanced with animated elements */
.gallery-hero {
	position: relative;
	overflow: hidden;
}

/* Animated diagonal lines background */
.gallery-hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:
		repeating-linear-gradient(
			-45deg,
			transparent,
			transparent 60px,
			rgba(220, 38, 38, 0.03) 60px,
			rgba(220, 38, 38, 0.03) 61px
		);
	animation: gallery-lines-drift 20s linear infinite;
	pointer-events: none;
	z-index: 0;
}

@keyframes gallery-lines-drift {
	0% { transform: translateX(-60px); }
	100% { transform: translateX(0); }
}

/* Glowing orbs effect */
.gallery-hero::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:
		radial-gradient(ellipse at 20% 30%, rgba(220, 38, 38, 0.15) 0%, transparent 40%),
		radial-gradient(ellipse at 80% 70%, rgba(220, 38, 38, 0.1) 0%, transparent 40%),
		radial-gradient(ellipse at 50% 100%, rgba(30, 41, 59, 0.8) 0%, transparent 60%);
	pointer-events: none;
	z-index: 1;
}

.gallery-hero > * {
	position: relative;
	z-index: 2;
}

/* Hero title with animated underline */
.gallery-hero h1 {
	position: relative;
	text-align: center;
}

.gallery-hero h1::after {
	content: '';
	display: block;
	margin: 8px auto 0;
	width: 120px;
	height: 4px;
	background: linear-gradient(90deg, transparent, #dc2626, transparent);
	animation: gallery-title-pulse 2s ease-in-out infinite;
}

@keyframes gallery-title-pulse {
	0%, 100% { opacity: 0.6; width: 100px; }
	50% { opacity: 1; width: 140px; }
}

/* Featured Gallery - Premium card design */
:root :where(.featured-gallery) {
	position: relative;
	border-radius: 12px !important;
	overflow: hidden;
	transition: all 0.4s ease;
	box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.4);
}

:root :where(.featured-gallery:hover) {
	transform: translateY(-4px);
	box-shadow: 0 30px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Featured Gallery Inner Content - gradient overlay */
:root :where(.featured-gallery .wp-block-cover__inner-container) {
	position: absolute !important;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100% !important;
	max-width: none !important;
	height: 100%;
	background: linear-gradient(
		to top,
		rgba(15, 23, 42, 0.9) 0%,
		rgba(15, 23, 42, 0.6) 15%,
		rgba(15, 23, 42, 0.2) 30%,
		transparent 45%
	);
	padding: 0 !important;
	margin: 0 !important;
}

/* Push content group to bottom of card */
:root :where(.featured-gallery .wp-block-cover__inner-container > .wp-block-group) {
	margin-top: auto;
}

/* Featured gallery title enhancement */
:root :where(.featured-gallery .wp-block-post-title) {
	position: relative;
	padding-left: 1rem;
	margin-bottom: 0.5rem;
}

:root :where(.featured-gallery .wp-block-post-title)::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: #dc2626;
	border-radius: 2px;
}

:root :where(.featured-gallery .wp-block-post-title a) {
	text-decoration: none;
}

/* Gallery Grid - Masonry-inspired with staggered animation */
:root :where(.gallery-grid) {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	gap: 2rem;
}

/* Staggered entrance animation for grid items */
:root :where(.gallery-grid .gallery-item) {
	animation: gallery-item-entrance 0.6s cubic-bezier(0.23, 1, 0.32, 1) backwards;
}

:root :where(.gallery-grid .gallery-item:nth-child(1)) { animation-delay: 0.1s; }
:root :where(.gallery-grid .gallery-item:nth-child(2)) { animation-delay: 0.2s; }
:root :where(.gallery-grid .gallery-item:nth-child(3)) { animation-delay: 0.3s; }
:root :where(.gallery-grid .gallery-item:nth-child(4)) { animation-delay: 0.15s; }
:root :where(.gallery-grid .gallery-item:nth-child(5)) { animation-delay: 0.25s; }
:root :where(.gallery-grid .gallery-item:nth-child(6)) { animation-delay: 0.35s; }
:root :where(.gallery-grid .gallery-item:nth-child(7)) { animation-delay: 0.2s; }
:root :where(.gallery-grid .gallery-item:nth-child(8)) { animation-delay: 0.3s; }
:root :where(.gallery-grid .gallery-item:nth-child(9)) { animation-delay: 0.4s; }

@keyframes gallery-item-entrance {
	from {
		opacity: 0;
		transform: translateY(30px) scale(0.95);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* Gallery Item - Dynamic card with combat aesthetics */
:root :where(.gallery-item) {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	height: 320px;
	cursor: pointer;
	transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
	background: linear-gradient(145deg, #1a1f2e 0%, #0f1318 100%);
	box-shadow:
		0 10px 30px -10px rgba(0, 0, 0, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* Diagonal slash accent on cards */
:root :where(.gallery-item)::before {
	content: '';
	position: absolute;
	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;
	background: linear-gradient(
		135deg,
		#dc2626 0%,
		transparent 30%,
		transparent 70%,
		rgba(220, 38, 38, 0.3) 100%
	);
	border-radius: 14px;
	opacity: 0;
	z-index: -1;
	transition: opacity 0.4s ease;
}

/* Corner accent triangle */
:root :where(.gallery-item)::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 50px 50px 0 0;
	border-color: rgba(220, 38, 38, 0.8) transparent transparent transparent;
	opacity: 0;
	transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
	z-index: 5;
}

:root :where(.gallery-item:hover) {
	transform: translateY(-12px) rotateX(2deg);
	box-shadow:
		0 25px 50px -15px rgba(0, 0, 0, 0.4),
		0 0 30px rgba(220, 38, 38, 0.1);
}

:root :where(.gallery-item:hover)::before {
	opacity: 1;
}

:root :where(.gallery-item:hover)::after {
	opacity: 1;
	border-width: 60px 60px 0 0;
}

/* Gallery Item Image - Enhanced cover */
:root :where(.gallery-item-image) {
	width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

:root :where(.gallery-item:hover .gallery-item-image) {
	transform: scale(1.08);
}

/* Camera icon for empty albums */
:root :where(.gallery-item-image .wp-block-cover__background) {
	transition: opacity 0.4s ease;
}

:root :where(.gallery-item:hover .gallery-item-image .wp-block-cover__background) {
	opacity: 0.7 !important;
}

/* Photo Count Badge - Glassmorphism style */
:root :where(.photo-count) {
	position: absolute;
	top: 1rem;
	right: 1rem;
	background: rgba(10, 13, 18, 0.6);
	color: white;
	padding: 0.5rem 1rem;
	border-radius: 8px;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	z-index: 10;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

/* Camera icon in photo count */
:root :where(.photo-count)::before {
	content: '';
	width: 14px;
	height: 14px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23dc2626'%3E%3Cpath d='M12 10.8c-1.2 0-2.2 1-2.2 2.2s1 2.2 2.2 2.2 2.2-1 2.2-2.2-1-2.2-2.2-2.2zm5-3.8h-2.4c-.4 0-.7-.2-.9-.5l-.6-1c-.2-.3-.5-.5-.9-.5h-2.6c-.4 0-.7.2-.9.5l-.6 1c-.2.3-.5.5-.9.5H4c-1.1 0-2 .9-2 2v9c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2h-3zM12 17c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

:root :where(.gallery-item:hover .photo-count) {
	background: rgba(220, 38, 38, 0.9);
	border-color: rgba(220, 38, 38, 0.5);
	transform: scale(1.05);
}

:root :where(.gallery-item:hover .photo-count)::before {
	filter: brightness(10);
}

/* Gallery Item Overlay - Athletic gradient with reveal animation */
:root :where(.gallery-item-overlay) {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(
		to top,
		rgba(10, 13, 18, 0.98) 0%,
		rgba(10, 13, 18, 0.9) 30%,
		rgba(10, 13, 18, 0.5) 60%,
		transparent 100%
	);
	padding: 1.5rem;
	padding-top: 4rem;
	color: white;
	opacity: 1;
	transform: translateY(0);
	transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Red accent line on overlay */
:root :where(.gallery-item-overlay)::before {
	content: '';
	position: absolute;
	top: 0;
	left: 1.5rem;
	right: 1.5rem;
	height: 2px;
	background: linear-gradient(90deg, transparent, #dc2626, transparent);
	opacity: 0;
	transform: scaleX(0);
	transition: all 0.4s ease 0.1s;
}

:root :where(.gallery-item:hover .gallery-item-overlay) {
	background: linear-gradient(
		to top,
		rgba(10, 13, 18, 1) 0%,
		rgba(10, 13, 18, 0.95) 40%,
		rgba(10, 13, 18, 0.7) 70%,
		transparent 100%
	);
	transform: translateY(-12px);
	padding-bottom: 2rem;
}

:root :where(.gallery-item:hover .gallery-item-overlay)::before {
	opacity: 1;
	transform: scaleX(1);
}

/* Gallery Item Title */
:root :where(.gallery-item-overlay .wp-block-post-title) {
	transition: transform 0.4s ease, color 0.3s ease;
}

:root :where(.gallery-item:hover .gallery-item-overlay .wp-block-post-title) {
	transform: translateX(4px);
}

/* Gallery Meta styling */
:root :where(.gallery-item-overlay .gallery-meta) {
	opacity: 0.7;
	transition: opacity 0.3s ease;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

:root :where(.gallery-item:hover .gallery-item-overlay .gallery-meta) {
	opacity: 1;
}

/* Location icon for meta */
:root :where(.gallery-item-overlay .gallery-meta)::before {
	content: '';
	width: 12px;
	height: 12px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23dc2626'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	flex-shrink: 0;
}

/* Gallery Badge - Bold category tag */
:root :where(.gallery-badge) {
	display: inline-flex;
	align-items: center;
	background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
	color: white;
	padding: 0.4rem 1rem;
	border-radius: 6px;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
	position: relative;
	overflow: hidden;
}

/* Shine effect on badge */
:root :where(.gallery-badge)::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	transition: left 0.5s ease;
}

:root :where(.gallery-item:hover .gallery-badge)::after {
	left: 100%;
}

/* View Album hint on hover */
:root :where(.gallery-item-overlay)::after {
	content: 'OGLEJ ALBUM →';
	position: absolute;
	bottom: 1.5rem;
	right: 1.5rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 1px;
	color: #dc2626;
	opacity: 0;
	transform: translateX(-10px);
	transition: all 0.4s ease 0.2s;
}

:root :where(.gallery-item:hover .gallery-item-overlay)::after {
	opacity: 1;
	transform: translateX(0);
}

/* Load More Button */
:root :where(.load-more-btn) {
	display: block;
	margin: 3rem auto 0;
	padding: 1rem 3rem !important;
	background: #dc2626 !important;
	color: white !important;
	border-radius: 4px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
}

:root :where(.load-more-btn:hover) {
	background: #b91c1c !important;
	transform: scale(1.05);
}

@media (max-width: 781px) {
	:root :where(.featured-news-card) {
		flex-direction: column;
		min-height: auto;
	}

	:root :where(.featured-news-image-col) {
		flex: 0 0 auto;
		min-height: 250px;
		width: 100%;
	}

	:root :where(.featured-news-content-col) {
		padding: 1.5rem;
	}

	:root :where(.news-grid) {
		grid-template-columns: 1fr;
	}

	:root :where(.gallery-grid) {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	:root :where(.gallery-item) {
		height: 280px;
	}

	:root :where(.gallery-item)::after {
		display: none;
	}

	:root :where(.featured-gallery) {
		height: 420px;
		border-radius: 12px;
	}

	:root :where(.featured-gallery)::before {
		width: 120px;
		height: 120px;
	}

	.gallery-hero h1 {
		font-size: 3rem !important;
	}

	/* Reduce motion for mobile */
	:root :where(.gallery-item:hover) {
		transform: translateY(-6px);
	}

	:root :where(.gallery-item:hover .gallery-item-image) {
		transform: scale(1.03);
	}
}

/* ===========================================================================
   CONTACT FORM - FSE COMPATIBLE ATHLETIC STYLE
   Works with block editor - use .contact-form-card wrapper or dark backgrounds
   =========================================================================== */

/* CSS Variables for form theming */
:root {
	--form-accent: #dc2626;
	--form-accent-hover: #b91c1c;
	--form-accent-glow: rgba(220, 38, 38, 0.4);
	--form-text: #ffffff;
	--form-text-muted: rgba(255, 255, 255, 0.6);
	--form-border: rgba(255, 255, 255, 0.15);
	--form-input-bg: rgba(255, 255, 255, 0.05);
}

/* ===========================================
   FSE Block Pattern: .contact-form-card
   Use with Group block + secondary background
   =========================================== */
:root :where(.contact-form-card) {
	position: relative;
	overflow: hidden;
}

/* Animated top accent bar */
:root :where(.contact-form-card)::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--form-accent), #ef4444, var(--form-accent));
	background-size: 200% 100%;
	animation: contact-gradient-shift 3s ease infinite;
	z-index: 10;
}

@keyframes contact-gradient-shift {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

/* Diagonal corner accent */
:root :where(.contact-form-card)::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 100px;
	height: 100px;
	background: linear-gradient(135deg, transparent 50%, var(--form-accent) 50%);
	opacity: 0.12;
	pointer-events: none;
	z-index: 1;
}

/* Form title styling */
:root :where(.contact-form-title) {
	position: relative;
	padding-left: 1rem;
}

:root :where(.contact-form-title)::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--form-accent);
	border-radius: 2px;
}

/* Grid texture overlay */
:root :where(.contact-form-card .wpforms-form) {
	position: relative;
	z-index: 2;
}

/* ===========================================
   WPForms Styling (inside dark containers)
   Works in .contact-form-card or any dark bg
   =========================================== */

/* Reset WPForms container - let parent handle background */
:root :where(.contact-form-card .wpforms-container),
:root :where(.has-secondary-background-color .wpforms-container) {
	background: transparent;
	padding: 0;
	border: none;
	box-shadow: none;
}

/* Field Containers */
:root :where(.contact-form-card .wpforms-field),
:root :where(.has-secondary-background-color .wpforms-field) {
	margin-bottom: 1.5rem;
	position: relative;
}

/* Labels - Bold uppercase style */
:root :where(.contact-form-card .wpforms-field-label),
:root :where(.has-secondary-background-color .wpforms-field-label) {
	color: var(--form-text) !important;
	font-size: 0.7rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	margin-bottom: 0.6rem !important;
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
}

/* Required asterisk styling */
:root :where(.contact-form-card .wpforms-required-label),
:root :where(.has-secondary-background-color .wpforms-required-label) {
	color: var(--form-accent) !important;
	font-size: 0.9rem !important;
}

/* Sublabels (First, Last, etc.) */
:root :where(.contact-form-card .wpforms-field-sublabel),
:root :where(.has-secondary-background-color .wpforms-field-sublabel) {
	color: var(--form-text-muted) !important;
	font-size: 0.65rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	margin-top: 0.4rem !important;
}

/* Input Fields Base - Dark theme (FSE compatible) */
:root :where(.contact-form-card .wpforms-field input[type="text"]),
:root :where(.contact-form-card .wpforms-field input[type="email"]),
:root :where(.contact-form-card .wpforms-field input[type="tel"]),
:root :where(.contact-form-card .wpforms-field input[type="url"]),
:root :where(.contact-form-card .wpforms-field input[type="number"]),
:root :where(.contact-form-card .wpforms-field input[type="password"]),
:root :where(.contact-form-card .wpforms-field select),
:root :where(.contact-form-card .wpforms-field textarea),
:root :where(.has-secondary-background-color .wpforms-field input[type="text"]),
:root :where(.has-secondary-background-color .wpforms-field input[type="email"]),
:root :where(.has-secondary-background-color .wpforms-field input[type="tel"]),
:root :where(.has-secondary-background-color .wpforms-field input[type="url"]),
:root :where(.has-secondary-background-color .wpforms-field input[type="number"]),
:root :where(.has-secondary-background-color .wpforms-field input[type="password"]),
:root :where(.has-secondary-background-color .wpforms-field select),
:root :where(.has-secondary-background-color .wpforms-field textarea) {
	width: 100% !important;
	background: var(--form-input-bg) !important;
	border: 2px solid var(--form-border) !important;
	border-radius: 6px !important;
	padding: 0.875rem 1rem !important;
	color: var(--form-text) !important;
	font-size: 0.95rem !important;
	font-family: inherit !important;
	transition: all 0.25s ease !important;
	outline: none !important;
}

/* Placeholder styling */
:root :where(.contact-form-card .wpforms-field input)::placeholder,
:root :where(.contact-form-card .wpforms-field textarea)::placeholder,
:root :where(.has-secondary-background-color .wpforms-field input)::placeholder,
:root :where(.has-secondary-background-color .wpforms-field textarea)::placeholder {
	color: var(--form-text-muted) !important;
	opacity: 1 !important;
}

/* Focus State - Glowing red accent */
:root :where(.contact-form-card .wpforms-field input:focus),
:root :where(.contact-form-card .wpforms-field select:focus),
:root :where(.contact-form-card .wpforms-field textarea:focus),
:root :where(.has-secondary-background-color .wpforms-field input:focus),
:root :where(.has-secondary-background-color .wpforms-field select:focus),
:root :where(.has-secondary-background-color .wpforms-field textarea:focus) {
	background: rgba(255, 255, 255, 0.08) !important;
	border-color: var(--form-accent) !important;
	box-shadow: 0 0 0 3px var(--form-accent-glow) !important;
}

/* Hover State */
:root :where(.contact-form-card .wpforms-field input:hover:not(:focus)),
:root :where(.contact-form-card .wpforms-field select:hover:not(:focus)),
:root :where(.contact-form-card .wpforms-field textarea:hover:not(:focus)),
:root :where(.has-secondary-background-color .wpforms-field input:hover:not(:focus)),
:root :where(.has-secondary-background-color .wpforms-field select:hover:not(:focus)),
:root :where(.has-secondary-background-color .wpforms-field textarea:hover:not(:focus)) {
	border-color: rgba(255, 255, 255, 0.3) !important;
	background: rgba(255, 255, 255, 0.07) !important;
}

/* Textarea specific */
:root :where(.contact-form-card .wpforms-field textarea),
:root :where(.has-secondary-background-color .wpforms-field textarea) {
	min-height: 130px !important;
	resize: vertical !important;
	line-height: 1.6 !important;
}

/* Name field row layout */
:root :where(.contact-form-card .wpforms-field-name .wpforms-field-row),
:root :where(.has-secondary-background-color .wpforms-field-name .wpforms-field-row) {
	display: flex !important;
	gap: 1rem !important;
}

:root :where(.contact-form-card .wpforms-field-name .wpforms-field-row-block),
:root :where(.has-secondary-background-color .wpforms-field-name .wpforms-field-row-block) {
	flex: 1 !important;
}

/* Submit Button - Powerful CTA (FSE compatible) */
:root :where(.contact-form-card .wpforms-submit-container),
:root :where(.has-secondary-background-color .wpforms-submit-container) {
	margin-top: 1.5rem !important;
	position: relative;
}

:root :where(.contact-form-card .wpforms-submit),
:root :where(.has-secondary-background-color .wpforms-submit) {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.5rem !important;
	background: var(--form-accent) !important;
	color: white !important;
	border: none !important;
	border-radius: 6px !important;
	padding: 1rem 2rem !important;
	font-size: 0.8rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	cursor: pointer !important;
	position: relative !important;
	overflow: hidden !important;
	transition: all 0.25s ease !important;
	box-shadow: 0 4px 12px var(--form-accent-glow) !important;
}

/* Button hover state */
:root :where(.contact-form-card .wpforms-submit:hover),
:root :where(.has-secondary-background-color .wpforms-submit:hover) {
	background: var(--form-accent-hover) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 20px var(--form-accent-glow) !important;
}

/* Button active state */
:root :where(.contact-form-card .wpforms-submit:active),
:root :where(.has-secondary-background-color .wpforms-submit:active) {
	transform: translateY(0) !important;
}

/* Error/Validation States */
:root :where(.contact-form-card .wpforms-field.wpforms-has-error input),
:root :where(.contact-form-card .wpforms-field.wpforms-has-error textarea),
:root :where(.contact-form-card .wpforms-field.wpforms-has-error select),
:root :where(.has-secondary-background-color .wpforms-field.wpforms-has-error input),
:root :where(.has-secondary-background-color .wpforms-field.wpforms-has-error textarea),
:root :where(.has-secondary-background-color .wpforms-field.wpforms-has-error select) {
	border-color: var(--form-accent) !important;
	background: rgba(220, 38, 38, 0.15) !important;
}

:root :where(.contact-form-card .wpforms-error),
:root :where(.has-secondary-background-color .wpforms-error) {
	color: #fca5a5 !important;
	font-size: 0.75rem !important;
	margin-top: 0.4rem !important;
}

/* Success Message */
:root :where(.contact-form-card .wpforms-confirmation-container-full),
:root :where(.has-secondary-background-color .wpforms-confirmation-container-full) {
	text-align: center !important;
	padding: 2rem !important;
}

:root :where(.contact-form-card .wpforms-confirmation-container-full p),
:root :where(.has-secondary-background-color .wpforms-confirmation-container-full p) {
	color: var(--form-text) !important;
	font-size: 1rem !important;
	line-height: 1.6 !important;
}

/* Hide honeypot field */
:root :where(.wpforms-field-hp) {
	display: none !important;
}

/* Mobile Responsive */
@media (max-width: 600px) {
	:root :where(.contact-form-card .wpforms-field-name .wpforms-field-row),
	:root :where(.has-secondary-background-color .wpforms-field-name .wpforms-field-row) {
		flex-direction: column !important;
		gap: 1rem !important;
	}

	:root :where(.contact-form-card .wpforms-submit),
	:root :where(.has-secondary-background-color .wpforms-submit) {
		width: 100% !important;
	}

	:root :where(.contact-form-card)::after {
		width: 60px;
		height: 60px;
	}
}

/* ==========================================================================
   MOBILE EVENT CARDS - Athletic Fight Card Design
   Clean stacked layout with bold visual hierarchy
   ========================================================================== */
@media (max-width: 782px) {

	/* Events section header - stack on mobile */
	.is-style-section-accent > .wp-block-group.is-layout-flex {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 16px !important;
	}

	/* Event card container - vertical stack layout */
	.wp-block-group.is-style-event-card {
		flex-direction: column !important;
		align-items: stretch !important;
		padding: 0 !important;
		border-radius: 0 !important;
		margin-bottom: 0 !important;
		border-left: 4px solid #dc2626 !important;
		border-bottom: 1px solid rgba(10, 15, 26, 0.08) !important;
		background: transparent !important;
		position: relative;
	}

	/* Remove the hover transform on mobile - use subtle feedback instead */
	.wp-block-group.is-style-event-card:hover {
		transform: none !important;
		box-shadow: none !important;
		border-left-color: #0a0f1a !important;
	}

	/* Active/pressed state */
	.wp-block-group.is-style-event-card:active {
		background: rgba(220, 38, 38, 0.03) !important;
	}

	/* Inner flex container - reorganize for mobile */
	.wp-block-group.is-style-event-card > .wp-block-group.is-layout-flex {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: flex-start !important;
		padding: 20px 16px !important;
		gap: 16px !important;
		width: 100% !important;
	}

	/* Date box - compact square design */
	.wp-block-group.is-style-event-card .mmazs-date-box {
		min-width: 64px !important;
		max-width: 64px !important;
		padding: 12px 8px !important;
		margin-right: 0 !important;
		border-radius: 8px !important;
		flex-shrink: 0 !important;
	}

	.wp-block-group.is-style-event-card .mmazs-date-box .mmazs-date-day,
	.wp-block-group.is-style-event-card .mmazs-date-box .wp-block-post-date:first-child {
		font-size: 1.75rem !important;
		line-height: 1 !important;
	}

	.wp-block-group.is-style-event-card .mmazs-date-box .mmazs-date-month,
	.wp-block-group.is-style-event-card .mmazs-date-box .wp-block-post-date:last-child {
		font-size: 0.65rem !important;
		letter-spacing: 1px !important;
		margin-top: 2px !important;
	}

	/* Content area - title and location */
	.wp-block-group.is-style-event-card > .wp-block-group > .wp-block-group:not(.mmazs-date-box) {
		flex: 1 !important;
		min-width: 0 !important; /* Allow text truncation */
	}

	/* Event title - bold, readable size */
	.wp-block-group.is-style-event-card .wp-block-post-title {
		font-size: 1rem !important;
		line-height: 1.3 !important;
		font-weight: 600 !important;
		margin-bottom: 6px !important;
	}

	.wp-block-group.is-style-event-card .wp-block-post-title a {
		display: block !important;
	}

	/* Location row */
	.wp-block-group.is-style-event-card .wp-block-group.is-layout-flex:has(> p:first-child) {
		margin-top: 4px !important;
	}

	.wp-block-group.is-style-event-card .has-gray-500-color {
		font-size: 0.8rem !important;
	}

	/* Category badge (TEKMOVANJE) - repositioned */
	.wp-block-group.is-style-event-card > .wp-block-group.has-navy-background-color {
		position: absolute !important;
		top: 16px !important;
		right: 12px !important;
		padding: 4px 8px !important;
		border-radius: 3px !important;
		margin: 0 !important;
	}

	.wp-block-group.is-style-event-card > .wp-block-group.has-navy-background-color p {
		font-size: 9px !important;
		letter-spacing: 1px !important;
		line-height: 1 !important;
	}

	/* Events timeline container spacing */
	.mmazs-events-timeline {
		margin: 0 -16px !important; /* Bleed to edges on mobile */
	}

	/* Query block post template - remove gaps */
	.mmazs-events-timeline .wp-block-post-template,
	.is-style-section-accent .wp-block-post-template {
		gap: 0 !important;
	}

	/* Section title adjustments */
	.is-style-section-accent h2.wp-block-heading {
		font-size: 1.5rem !important;
		margin-bottom: 8px !important;
	}

	.is-style-section-accent .is-style-subtitle {
		font-size: 0.85rem !important;
	}

	/* "VSI DOGODKI" link styling */
	.is-style-section-accent .has-display-font-family a {
		font-size: 12px !important;
	}

	/* Padding adjustments for the section */
	.wp-block-group.is-style-section-accent {
		padding-left: 16px !important;
		padding-right: 16px !important;
		padding-top: 48px !important;
		padding-bottom: 48px !important;
	}
}

/* Extra small screens - tighter layout */
@media (max-width: 380px) {
	.wp-block-group.is-style-event-card .mmazs-date-box {
		min-width: 56px !important;
		max-width: 56px !important;
		padding: 10px 6px !important;
	}

	.wp-block-group.is-style-event-card .mmazs-date-box .mmazs-date-day,
	.wp-block-group.is-style-event-card .mmazs-date-box .wp-block-post-date:first-child {
		font-size: 1.5rem !important;
	}

	.wp-block-group.is-style-event-card .wp-block-post-title {
		font-size: 0.95rem !important;
	}

	.wp-block-group.is-style-event-card > .wp-block-group.has-navy-background-color {
		top: 12px !important;
		right: 8px !important;
		padding: 3px 6px !important;
	}

	.wp-block-group.is-style-event-card > .wp-block-group.has-navy-background-color p {
		font-size: 8px !important;
	}
}