/* Centralized mobile styles and utilities
   - Single source of truth for responsive breakpoints and overrides
   - Add new mobile rules here instead of inline <style> or other CSS files
*/

/* Reference breakpoints (documentation only)
   --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px
*/

/* Utilities */
.is-mobile-only { display: none !important; }
.is-desktop-only { display: initial !important; }
@media (max-width: 768px) {
	html, body { overflow-x: hidden !important; }
	.is-mobile-only { display: initial !important; }
	.is-desktop-only { display: none !important; }
	.stack-on-mobile { display: flex; flex-direction: column !important; gap: var(--space-2, 0.5rem); }
	/* Center feature/cover images and images in resource pages on mobile */
	#resourceBody img,
	.subpage-modal-content img,
	#resourceThumb img { display:block !important; margin-left:auto !important; margin-right:auto !important; }
	/* Allow subpage cards to wrap their titles on small screens */
	.resource-subpage-cards .subpage-card { white-space: normal !important; line-height: 1.3 !important; }
	.resource-subpage-cards .subpage-card .subpage-title { white-space: normal !important; }
	/* Prevent Back to Resources text from wrapping by shrinking font on mobile */
	#resourceActionsBar #backToResources { font-size: 0.9rem !important; white-space: nowrap !important; padding: 0.5rem 0.85rem !important; }

	/* ===== Resource page: Center header like composition on mobile ===== */
	body.resource-page main.container { padding: 0.75rem 0.75rem !important; max-width: 100% !important; overflow-x: hidden !important; }
	#resourceHeader { flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0.85rem !important; width: 100% !important; max-width: 560px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; overflow-x: hidden !important; box-sizing: border-box !important; }
	#resourceHeader > div { width: 100% !important; max-width: 100% !important; }
	#resourceThumb { width: 100% !important; max-width: 300px !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; }
	#resourceThumb img { border-radius: 12px !important; display: block !important; }
	#resourceMetaChip { margin-top: 0.4rem !important; align-self: center !important; }
	#resourceTitle { text-align: center !important; margin: 0 auto 0.25rem auto !important; }
	#resourceSubtitle { text-align: center !important; margin: -0.6rem auto 0.2rem auto !important; font-weight: 400 !important; }
	#resourceActions { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; }
	#resourceActions .btn, #resourceActions .btn-primary, #resourceActions a.btn { width: auto !important; min-width: 220px !important; max-width: 92vw !important; justify-content: center !important; }
	/* Related news: center rail below header on mobile */
	#resourceHeaderRight { width: 100% !important; max-width: 560px !important; margin: 0 auto !important; overflow-x: hidden !important; }
	#resourceHeaderRight .resource-related-news-section { display: block !important; }
	#resourceHeaderRight .resource-related-news-rail { align-items: center !important; }

	/* Bottom actions bar: eliminate overflow and center actions */
	#resourceActionsBar { width: 100% !important; max-width: 560px !important; margin-left: auto !important; margin-right: auto !important; justify-content: center !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; }
	#resourceActionsBar .actions-right { margin-left: 0 !important; }
	#resourceMetaChipBottom { display: none !important; }
}

/* Grid helpers (opt-in) */
.stack-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3, .75rem); }
@media (max-width: 768px) { .stack-grid-2 { grid-template-columns: 1fr; } }
.stack-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-3, .75rem); }
@media (max-width: 900px) { .stack-grid-3 { grid-template-columns: 1fr; } }

/* Moved from ui.css: collapse two-column layouts */
@media (max-width: 1024px) {
	.u-two,
	.u-two--50-50,
	.u-two--60-40,
	.u-two--40-60,
	.u-two--67-33,
	.u-two--33-67 { grid-template-columns: 1fr; }
}

/* ===== Global body spacing on mobile (from styles.css) ===== */
@media (max-width: 768px) {
    body:not(.index-page),
    body.non-index-page {
        padding-top: var(--mobile-body-pt, 96px) !important;
    }
    body.index-page { padding-top: 0; }
    /* Media page uses fixed nav already; keep native nav height to avoid overlap/gaps */
    body.page-flow { padding-top: var(72px) !important; }

    /* Mobile vertical spacing shim (opt-in via CSS vars per-page) */
    body::before { content: ""; display: block; height: var(--mobile-vpad-top, 0); width: 100%; }
    body::after  { content: ""; display: block; height: var(--mobile-vpad-bottom, 0); width: 100%; }
}

/* ===== Secondary nav compact mode (from styles.css) ===== */
@media (max-width: 768px) {
	.secondary-nav {
		top: 60px !important;
		padding: 0 var(--space-2) !important;
		justify-content: space-between !important;
		height: 32px !important;
	}
	.secondary-nav-left { flex: 1 !important; justify-content: flex-start !important; }
	.secondary-nav-right { flex-shrink: 0 !important; }
	.secondary-button {
		padding: 4px var(--space-2) !important;
		margin: 0 2px !important;
		font-size: 0.85rem !important;
		height: 24px !important;
	}
	.social-media-links { gap: 4px !important; }
	.social-link { width: 24px !important; height: 24px !important; }
	.social-icon { width: 16px !important; height: 16px !important; }
}

/* ===== Nav tweaks (from styles.css) ===== */
@media (max-width: 800px) {
    .logo { font-size: 24px; max-width: 70%; font-weight: var(--font-black); }
    /* compact spacing when drawer is used */
    .nav-link { padding: 8px; font-size: 14px; }
    .nav-menu { gap: 0; }
}

@media (max-width: 1080px) {
	/* Mobile menu styles */
	nav { padding: 0 0 0 var(--space-4); }
	/* Only show hamburger; hide inline nav + CTA/theme */
	.hamburger { display: flex !important; margin-left: 1rem; margin-right: var(--space-4); }
	.nav-actions .cta-button, .nav-actions #theme-toggle { display: none !important; }
	/* Replace inline main-nav with drawer; show only when .active */
	.main-nav { display: none !important; }
	.main-nav.active { display: flex !important; }
	.nav-menu {
		position: fixed;
		left: 0;
		bottom: 0;
		flex-direction: column-reverse;
		background-color: var(--gray-50);
		width: 100%;
		height: auto;
		max-height: 80vh;
		overflow-y: auto;
		text-align: center;
		transition: transform 0.3s ease-in-out, visibility 0.3s;
		box-shadow: var(--shadow-lg);
		gap: 0;
		z-index: 2000;
		display: flex;
		transform: translateY(100%);
		visibility: hidden;
		padding-bottom: var(--space-4);
	}
	.nav-menu.active { transform: translateY(0); visibility: visible; }
	.nav-item { border-top: 1px solid var(--gray-200); width: 100%; position: relative; }
	.nav-item:first-child { border-top: 1px solid var(--gray-200); }
	/* Guard against overlaid content on various pages */
	.example-1 { z-index: 1200 !important; }
	.nav-link {
		width: 92vw;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: var(--text-lg);
		position: relative;
		line-height: 1.2;
	}
	.nav-link::before { content: ''; width: 1em; display: inline-block; text-align: center; }
	.nav-item.dropdown > .nav-link::before { content: '▾'; margin-right: var(--space-1); }
	.dropdown-menu {
		display: block;
		position: absolute;
		left: -40px;
		width: 200px;
		min-width: 180px;
		max-width: 250px;
		transform: translateX(-100%);
		margin-top: -1rem;
		opacity: 0;
		visibility: hidden;
		z-index: 2100;
		padding: 0;
		box-sizing: border-box;
		overflow: hidden;
		border-radius: var(--radius-lg);
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}
	.nav-item.dropdown:hover { background: var(--gray-200); transition: background 0.3s ease; }
	.nav-item.dropdown:hover .dropdown-menu,
	.nav-item.dropdown.active .dropdown-menu { transform: translateX(0); opacity: 1; visibility: visible; }
	.nav-item.dropdown > .nav-link::before { transition: transform 0.3s ease; }
	.nav-item.dropdown.active > .nav-link::before { transform: rotate(180deg); }
	.dropdown-menu li { border-bottom: 1px solid var(--primary-100); transition: background 0.2s ease; margin: 0; padding: 0; }
	.dropdown-menu li:last-child { border-bottom: none; }
	.dropdown-menu li:hover { background: var(--primary-100); }
	.dropdown-menu a {
		font-size: var(--text-sm);
		color: var(--primary-100);
		background: var(--gray-600);
		display: block;
		text-align: right;
		font-weight: var(--font-medium);
		transition: all 0.2s ease;
		padding: var(--space-1) var(--space-2);
		margin: 0;
		line-height: 1.2;
	}
	.dropdown-menu a:hover { background: var(--primary-200); color: var(--primary-900); transform: translateX(4px); }
	.nav-link::after { display: none; }
	/* Works Grid Mobile Styles */
	.works-grid { gap: var(--space-3); padding: 0 var(--space-3); }
	.work-card { min-width: 280px; max-width: 280px; border-radius: var(--radius-2xl); }
	.works-grid::-webkit-scrollbar { height: 10px; }
	.work-header, .work-content { padding: var(--space-5); }
	.work-title { font-size: var(--text-lg); }
	.work-links { flex-direction: column; }
	.btn-primary, .btn-secondary { justify-content: center; }
	.modal-content { padding: var(--space-8) var(--space-5); margin: var(--space-3); border-radius: var(--radius-2xl); }
	.music-catalog-btn { width: auto; min-width: 0; margin: 0; font-size: clamp(12px, 2.5vw, 16px); padding: 0.5rem 0.75rem; }
	.nav-container { flex-direction: row; align-items: center; padding: 0; }
	.logo { font-size: clamp(16px, 3vw, 24px); font-weight: var(--font-black); }
}

@media (max-width: 480px) {
	.works-grid { padding: 0 var(--space-3); }
	.work-card { min-width: 260px; max-width: 260px; }
	.work-meta { flex-direction: column; gap: var(--space-2); }
	.modal-content { padding: var(--space-6) var(--space-4); }
	.logo { font-size: clamp(16px, 3vw, 24px); }
}

/* ===== Media page responsive fragments ===== */
/* CRITICAL: Override all sticky positioning from media.html on mobile */
@media (max-width: 900px) {
	/* Kill sticky on all featured elements with maximum specificity */
	body.page-flow .featured-split,
	body.page-flow .featured-split > div:first-child,
	body.page-flow .featured-split > div:last-child,
	body.page-flow .featured-primary,
	body.page-flow .featured-hero,
	body.page-flow .hero-aside,
	.featured .featured-split,
	.featured .featured-split > div:first-child,
	.featured .featured-split > div:last-child,
	.featured .featured-primary,
	.featured .featured-hero,
	.featured .hero-aside {
		position: static !important;
		top: auto !important;
		z-index: auto !important;
		transform: none !important;
		will-change: auto !important;
	}
}

@media (max-width: 900px){
	.featured-split { 
		display: flex !important; 
		flex-direction: column !important;
		gap: 0.5rem !important; /* Reduced gap */
		max-width: 100%;
		width: 100%;
		padding: 0;
		margin: 1.5rem 0 0 0 !important; /* Add top margin for nav spacing */
		box-sizing: border-box;
		overflow: visible;
		position: static !important;
	}
	.featured-split > div:first-child { 
		/* CRITICAL: Override sticky from media.html line 102 */
		position: static !important; 
		top: auto !important; 
		flex: none !important; /* Fixed sizing for mobile */
		order: 1 !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 0 0.75rem 0 !important; /* Reduced bottom margin */
		padding: 0 !important;
		z-index: auto !important;
		background: transparent !important;
		border-bottom: none !important;
		box-shadow: none !important;
		overflow: visible !important;
		box-sizing: border-box !important;
		height: auto !important;
		max-height: none !important;
		align-self: auto !important;
		contain: none !important;
	}
	.featured-split > div:last-child { 
		order: 2 !important;
		padding: 1rem 1rem 3rem 1rem; /* Reduced top padding */
		margin-top: 0 !important; /* Reduced top margin */
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		background: transparent;
		overflow: visible;
		max-height: none;
		display: block !important;
		position: relative !important;
	}
	
	/* ✨ FIXED: Video player container constraints */
	.featured-split .featured-primary {
		position: static !important; /* No sticky */
		width: 100% !important;
		max-width: 100% !important;
		overflow: hidden !important;
		box-sizing: border-box !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	
	.featured-split .featured-hero {
		position: static !important; /* Override sticky */
		width: 100% !important;
		max-width: 100% !important;
		padding: 0.3rem 0.6rem 0.6rem 0.6rem !important; /* Slightly reduced padding */
		box-sizing: border-box !important;
		margin: 0 !important; /* Remove extra margin */
		z-index: auto !important;
		display: block !important;
		float: none !important;
		clear: both !important;
	}
	
	.featured-split .featured-player {
		width: 100% !important;
		max-width: 100% !important;
		overflow: hidden !important;
		box-sizing: border-box !important;
		margin: 0 !important;
		/* Ensure proper 16:9 aspect ratio on mobile */
		aspect-ratio: 16/9 !important;
		height: auto !important;
		position: relative !important;
	}
	
	.featured-split .featured-player iframe,
	.featured-split .featured-player video {
		/* Ensure the embed fully fills the 16:9 container on mobile */
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: 100% !important;
		border: 0 !important;
		/* Remove border-radius from iframes as they don't support it */
		border-radius: 0 !important;
		/* Only apply object-fit to video elements, not iframes */
	}

	/* Separate rule for video elements only */
	.featured-split .featured-player video {
		object-fit: cover !important;
		border-radius: 14px !important;
	}

	/* Make sure the aside header is never hidden under the hero */
	.featured-split .hero-aside { 
		position: static !important; /* No sticky on mobile */
		top: auto !important;
		z-index: auto !important; 
	}
	.featured-split .hero-aside .panel-header { 
		color: var(--gray-900) !important; 
		visibility: visible !important;
		opacity: 1 !important;
	}
	
	/* ✨ FIXED: Hero-aside panel background and spacing issues */
	.featured-split .hero-aside {
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	
	.featured-split .hero-aside .panel-header {
		background: transparent !important;
		padding: 0 0 1rem 0 !important;
		margin: 0 !important;
		border-bottom: 1px solid var(--gray-200) !important;
	}
	
	.featured-split .hero-aside .panel-body {
		background: transparent !important;
		padding: 1rem 0 0 0 !important;
		margin: 0 !important;
	}
	
	/* ✨ FIXED: Achievement cards mobile layout */
	.featured-split .achievements {
		grid-template-columns: 1fr !important;
		gap: 0.5rem !important;
		margin-top: 1rem !important;
	}
	
	.featured-split .ach-card {
		padding: 0.5rem 0.75rem !important;
		text-align: center !important;
	}
}
@media (max-width: 900px){ 
	.featured-hero { position: static !important; top: auto !important; } 
	.hero-aside { position: static !important; top: auto !important; margin-left: 0; } 
	/* Also remove sticky from the left column wrapper */
	.featured-split > div:first-child { position: static !important; top: auto !important; }
}
@media (max-width: 900px){ 
  .featured-subgrid { 
    grid-template-columns: 1fr !important; 
    gap: 1rem !important;
  }
  
  /* Mobile: Move Spotify above audio section */
  .featured-subgrid #spotifyReleasesSection {
    order: -1;
    position: static !important; /* Override sticky from media.html line 224 */
    top: auto !important;
  }
  
  /* Remove background from panel-body u-stack StackNarrow */
  .panel-body.u-stack.StackNarrow {
    background: transparent !important;
  }
  
  /* Ensure single column layout for audio section */
  .left-rail {
    display: block !important;
  }
  
  /* Typography: slightly smaller hero-aside copy */
  .featured-split .hero-aside .narrow-text { font-size: 0.88rem !important; }
  .featured-split .vh-list { font-size: 0.82rem !important; }
  
  /* Featured Audio: slightly smaller text and tighter controls */
  .audio-item .item-title { font-size: .95rem !important; }
  .audio-item .item-sub { font-size: .78rem !important; }
  .audio-toggle { padding: .6rem .75rem !important; gap: .5rem !important; }
  .audio-caret { width: 22px !important; height: 22px !important; }
  .thumb { width: 50px !important; height: 50px !important; }
  .audio-details.open { padding: .65rem .8rem .85rem !important; }
  .audio-meta-left .btn { font-size: .88rem !important; padding: .5rem .8rem !important; }
  
  .audio-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.55rem;
  }
  
  /* ✨ FIXED: Reduce video rail thumbnail sizes for mobile */
  .video-carousel .video-thumb {
    min-width: 130px !important;
    max-width: 150px !important;
  }
  
  .video-carousel .video-thumb img {
    height: 230px !important;
    width: 100% !important;
    object-fit: cover !important;
    aspect-ratio: 16/9 !important;
  }
  
  .video-carousel .video-thumb .vt-title {
    font-size: 0.8rem !important;
    padding: 0.4rem 0.55rem !important;
  }
}

/* ✨ MOBILE: Filter panel sticky fixes */
@media (max-width: 768px) {
	.filter-panel { 
		top: 2px !important; 
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	
	/* ✨ FIXED: Search media results layout for mobile */
	.results {
		max-width: 100% !important;
		margin: 0 !important;
		padding: 1rem !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}
	
	.results .grid {
		grid-template-columns: 1fr !important;
		gap: 1rem !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	
	.results .card {
		width: 100% !important;
		max-width: 100% !important;
		overflow: visible !important;
	}
	
	.results .card-body {
		padding: 0.75rem !important;
	}
	
	.results .title {
		font-size: 0.95rem !important;
		line-height: 1.3 !important;
	}
	
	.results .muted {
		font-size: 0.85rem !important;
		line-height: 1.4 !important;
	}
	
	/* ✨ FIXED: Type buttons carousel for mobile overflow */
	.btn-group {
		display: flex !important;
		gap: 0.35rem !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scroll-snap-type: x mandatory !important;
		scrollbar-width: thin !important;
		scrollbar-color: var(--gray-400) transparent !important;
		padding: 0.25rem 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	
	.btn-group::-webkit-scrollbar {
		height: 4px !important;
	}
	
	.btn-group::-webkit-scrollbar-track {
		background: transparent !important;
	}
	
	.btn-group::-webkit-scrollbar-thumb {
		background: var(--gray-300) !important;
		border-radius: 2px !important;
	}
	
	.btn-group::-webkit-scrollbar-thumb:hover {
		background: var(--gray-400) !important;
	}
	
	.btn-group button {
		flex-shrink: 0 !important;
		scroll-snap-align: start !important;
		white-space: nowrap !important;
	}
	
	/* ✨ FIXED: Search compact container full width and sort alignment */
	.search-compact {
		display: flex !important;
		align-items: center !important;
		gap: 0.5rem !important;
		width: 100% !important;
		max-width: 100% !important;
		justify-content: space-between !important;
	}
	
	.search-compact input {
		flex: 1 !important;
		min-width: 0 !important;
	}
	
	/* ✨ FIXED: Sort dropdown alignment to flex-end */
	.filters-r2 .r {
		display: flex !important;
		gap: 0.5rem !important;
		align-items: center !important;
		width: 100% !important;
		justify-content: space-between !important;
	}
	
	#sortDropdown {
		margin-left: auto !important;
	}
	
	/* ✨ FIXED: Reduce text sizes for mobile filter elements */
	.btn-group button {
		font-size: 0.85rem !important;
		padding: 0.45rem 0.75rem !important;
	}
	
	.dropdown-btn {
		font-size: 0.85rem !important;
		padding: 0.45rem 0.75rem !important;
	}
	
	/* ✨ FIXED: Remove gap between dot row for mobile */
	.divider {
		margin: 0 !important;
		display: none !important;
	}
	
	/* ✨ FIXED: Dropdown z-index for mobile overlay */
	.dropdown-menu {
		z-index: 9999 !important;
		position: absolute !important;
	}
	
	.dropdown {
		position: relative !important;
		z-index: 9999 !important;
	}
	
	.filter-content {
		max-width: 100%;
		width: 100%;
		padding: 1rem 1rem;
		margin: 0;
		box-sizing: border-box;
	}
	
	.results {
		max-width: 100%;
		width: 100%;
		padding: 1.25rem 1rem 2rem;
		margin: 0;
		box-sizing: border-box;
	}
}
@media (max-width: 640px){
    .modal {
        align-items: flex-start !important;
        padding: 0.5rem !important;
    }

    /* ✨ FIXED: Mobile text sizing for all modal containers to prevent cutoff */
    .modal-title h3 {
        font-size: 1rem !important;
        line-height: 1.3 !important;
    }

    .modal-subtitle {
        font-size: 0.8rem !important;
        margin-top: 0.2rem !important;
    }

    .modal-media h4 {
        font-size: 0.85rem !important;
        margin: 0.05rem 0 0.08rem !important;
    }

    .modal-media .meta {
        font-size: 0.8rem !important;
    }

    .modal-desc {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }

    /* Ensure modal card doesn't overflow screen */
    .modal-card {
        width: calc(100vw - 1rem) !important;
        max-width: calc(100vw - 1rem) !important;
        max-height: calc(100vh - 1rem) !important;
        margin: 0 !important;
        border-radius: 12px !important;
    }

    /* Ensure modal backdrop doesn't interfere with scrolling */
    .modal {
        position: fixed !important;
        inset: 0 !important;
        background: rgba(2,6,23,.8) !important;
        z-index: 7000 !important;
        overflow: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Prevent body scroll when modal is open */
    body.modal-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }

    /* Hide video poster overlay on mobile to prevent interference */
    .featured-player .video-poster {
        display: none !important;
    }

    /* Ensure video iframe is directly clickable on mobile */
    .featured-player iframe {
        pointer-events: auto !important;
        z-index: 10 !important;
    }

    /* Fix modal body scrolling on mobile */
    .modal-body {
        overflow-y: auto !important;
        max-height: calc(100vh - 120px) !important;
        padding: 1rem !important;
    }
    
    .mv-counter { 
        font-size: 0.8rem !important;
    }
    
    .rel-item { 
        padding: 0.5rem 0.6rem !important;
        font-size: 0.85rem !important;
    }
    
    .modal-body { 
        padding: 0.8rem !important;
    }
    
    .modal-head { 
        padding: 0.6rem 0.8rem !important;
    }
    
    .modal-close {
        width: 40px !important;
        height: 40px !important;
        top: 0.5rem !important;
        right: 0.5rem !important;
        font-size: 1.4rem !important;
        background: rgba(255,255,255,0.9) !important;
        border: 1px solid rgba(0,0,0,0.1) !important;
        z-index: 7010 !important;
    }
}

/* ===== Footer (from styles.css) ===== */
@media (max-width: 768px) {
	.main-footer { padding: 2rem 1rem 1rem; }
	.footer-nav-section { display: flex; flex-direction: column; gap: 2rem; align-items: center; }
	.footer-nav-columns { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; justify-items: start; }
	/* Allow auto-fit to accommodate extra columns when present */
	@media (max-width: 768px) {
		.footer-nav-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}
	.newsletter-content { flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
	.newsletter-input-group { width: 100%; }
	.newsletter-input { flex: 1; min-width: unset; }
	.footer-bottom-content { flex-direction: column; align-items: flex-start; gap: 1rem; }
	.footer-social { gap: 0.75rem; }
}
@media (max-width: 480px) {
	.footer-nav-columns { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
	/* Keep email and button inline on small screens */
	.main-footer .newsletter-input-group { flex-direction: row !important; align-items: center; width: 100%; }
	.main-footer .newsletter-input { flex: 1 1 auto; min-width: 0; width: auto; }
	.main-footer .newsletter-btn { width: auto; flex: 0 0 auto; }
	
	/* ✨ EXTRA SMALL: Media page sticky optimizations */
	.featured-split > div:first-child { 
		position: static !important;
		top: auto !important; 
	}
	
	.filter-panel { 
		top: 0 !important; 
	}
	
	/* ✨ EXTRA SMALL: Contact page mobile optimizations */
	.contact-container {
		max-width: 100%;
		width: 100%;
		padding: 0 1rem;
		margin: 0;
		box-sizing: border-box;
	}
	
	.contact-grid {
		grid-template-columns: 1fr !important;
		gap: 1rem !important;
		margin-top: 0.5rem !important;
	}
	
	.contact-copy-card,
	.contact-form-card {
		padding: 1rem !important;
		border-radius: 12px !important;
	}
	
	.support-actions {
		grid-template-columns: 1fr !important;
		gap: 0.75rem !important;
		margin-top: 1rem !important;
	}
	
	.support-card {
		padding: 0.75rem 1rem !important;
		border-radius: 12px !important;
	}
	
	.newsletter-cta {
		margin-top: 1.5rem !important;
		padding: 1rem !important;
		border-radius: 12px !important;
	}
	
	.newsletter-form {
		flex-direction: column !important;
		gap: 0.5rem !important;
	}
	
	.newsletter-input {
		min-width: auto !important;
		width: 100% !important;
	}
}

/* ===== Navigation example container tweaks (from styles.css) — unify ≤768 */
@media (max-width: 768px) {
	.example-1 { top: 0; left: 0; right: 0; }
	body { padding-top: 120px; }
	.primary-nav { padding: 12px 14px; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
	.left-section { gap: 14px; width: auto; justify-content: flex-start; }
	.brand h1 { font-size: 20px; }
	.brand p { font-size: 11px; }
	.nav-actions { flex-direction: row; gap: 8px; width: auto; margin-left: auto; }
	.main-nav { gap: 0; margin: 0; }
	.main-nav a { font-size: 14px; padding: 6px 10px; }
}
@media (max-width: 480px) {
	.primary-nav { padding: 12px 16px; }
	.left-section { gap: 16px; }
	.brand h1 { font-size: 18px; }
	.main-nav { gap: 16px; }
	.main-nav a { font-size: 13px; }
	.secondary-nav { padding: 8px 16px; gap: 16px; }
	.secondary-nav a { font-size: 10px; }
}

/* ===== Navigation component (includes/navigation.html) mobile + tablet ===== */
@media (max-width: 768px) {
	/* Force hamburger visible; hide inline menu */
	.header-base .hamburger, .hamburger { display: flex !important; margin-left: 8px; width: 40px; height: 40px; padding: 0; border-radius: 10px; justify-content: center; align-items: center; background: transparent; border: none; z-index: 1501; position: relative; }
	.hamburger span { width: 22px; height: 2px; background: var(--gray-700); margin: 5px 0; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
	.hamburger:hover { background: var(--gray-100); }
	.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
	.hamburger.active span:nth-child(2) { opacity: 0 !important; }
	.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }

	.nav-actions > #theme-toggle, .nav-actions > .cta-button { display: none !important; }
	.header-base .main-nav, .main-nav { display: none !important; }
	.header-base .main-nav.active, .main-nav.active { display: flex !important; }

	/* Header spacing and brand scale */
	.primary-nav { padding: 8px 10px !important; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
	.left-section { gap: 12px; }
	.brand h1 { font-size: 18px; }
	.brand p { font-size: 10px; }

	/* Bottom-sheet drawer (unified for ≤768) */
	.header-base .main-nav.nav-menu, .main-nav.nav-menu { position: fixed; top: auto; right: auto; left: 0; bottom: 0; width: 100%; height: auto; max-height: 80vh; transform: translateY(100%); transition: transform .3s ease; z-index: 6000 !important; background: var(--surface, #fff); box-shadow: 0 -12px 30px rgba(0,0,0,.18); display: flex; flex-direction: column; gap: 0; padding: 4px 8px 12px !important; overscroll-behavior: contain; box-sizing: border-box; overflow-x: hidden; }
	.header-base .main-nav.nav-menu.active, .main-nav.nav-menu.active { transform: translateY(0); }
	.main-nav.nav-menu .nav-item { border-top: 1px solid var(--gray-200); width: 100%; }
	.main-nav.nav-menu .nav-item:first-child { border-top: 0; }
	.main-nav.nav-menu a { padding: 14px 16px; font-size: 16px; justify-content: space-between; }

	/* Accordion: dropdown content flush under title */
	.main-nav .nav-item > a { width: 100%; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; }
	.main-nav .nav-item.open > a { background: var(--gray-100); }
	.header-base .dropdown-menu { position: static !important; left: auto !important; top: auto !important; width: 100% !important; box-shadow: none !important; background: transparent !important; padding: 0 0 6px 0 !important; margin: 0 !important; overflow: hidden; max-height: 0; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: max-height .28s cubic-bezier(.2,.7,.2,1), opacity .2s ease, transform .24s ease; }
	.header-base .nav-item.open > .dropdown-menu { max-height: 480px; opacity: 1; transform: translateY(0); pointer-events: auto; visibility: visible !important; background: transparent !important; border-radius: 0 !important; padding: 0 !important; margin-top: 6px !important; }

    /* Ensure backdrop never blocks taps when drawer closed */
	.header-base .menu-backdrop, .menu-backdrop { pointer-events: none; z-index: 5999 !important; }
    .header-base .nav-menu.active ~ .menu-backdrop, .nav-menu.active ~ .menu-backdrop { pointer-events: auto; }
	.header-base .dropdown-menu a { padding: 12px 16px; background: transparent; display: block; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .example-1 .hamburger { display: flex; }
    .example-1 .nav-actions > #theme-toggle, .example-1 .nav-actions > .cta-button { display: none; }
    .example-1 .primary-nav { flex-wrap: nowrap; row-gap: 0; padding: 14px 20px; }
    .example-1 .left-section { flex: 0 1 auto; }
    .example-1 .main-nav { flex: 0 1 auto; }
	/* Hide inline menu and use bottom drawer like mobile */
	.main-nav { display: none !important; }
	.main-nav.active { display: flex !important; }
	/* Bottom-sheet drawer behavior for tablet */
	.main-nav.nav-menu { position: fixed; top: auto; right: auto; left: 0; bottom: 0; width: 100%; height: auto; max-height: 80vh; transform: translateY(100%); transition: transform .3s ease; z-index: 6000 !important; background: var(--surface, #fff); box-shadow: 0 -12px 30px rgba(0,0,0,.18); display: flex; flex-direction: column; gap: 0; padding: 6px 12px 12px !important; overscroll-behavior: contain; box-sizing: border-box; overflow-x: hidden; }
	.main-nav.nav-menu.active { transform: translateY(0); }
	.main-nav.nav-menu .nav-item { border-top: 1px solid var(--gray-200); width: 100%; }
	.main-nav.nav-menu .nav-item:first-child { border-top: 0; }
	.main-nav.nav-menu a { padding: 16px 18px; font-size: 16px; justify-content: space-between; color: var(--gray-700); }
	.main-nav.nav-menu a.active {
		color: var(--gray-900) !important;
		font-weight: 600 !important;
		background: rgba(0,0,0,0.05) !important;
		border-radius: 4px !important;
	}

	/* Accordion submenu styling */
	.main-nav .nav-item > a { width: 100%; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; }
	.main-nav .nav-item.open > a { background: var(--gray-100); }
	.header-base .dropdown-menu { position: static !important; left: auto !important; top: auto !important; width: 100% !important; box-shadow: none !important; background: transparent !important; padding: 0 0 6px 0 !important; margin: 0 !important; overflow: hidden; max-height: 0; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: max-height .28s cubic-bezier(.2,.7,.2,1), opacity .2s ease, transform .24s ease; }
	.header-base .nav-item.open > .dropdown-menu { max-height: 480px; opacity: 1; transform: translateY(0); pointer-events: auto; background: transparent !important; border-radius: 0 !important; padding: 0 !important; margin-top: 6px !important; }
	.header-base .dropdown-menu a { padding: 12px 16px; background: transparent; display: block; color: var(--gray-700); }
}

/* ===== News page responsive fragments consolidated ===== */
@media (max-width: 980px){ 
	.featured-layout { 
		grid-template-columns: 1fr !important; 
		gap: 1rem !important;
	}
}

@media (max-width: 900px){
	/* ✨ NEWS: Force single column layout for all news components */
	.featured-layout { 
		grid-template-columns: 1fr !important; 
		gap: 1rem !important;
	}

	/* ✨ NEWS: Prevent title squish between 769px–900px by stacking top area */
	.feat-top {
		flex-direction: column !important;
	}
	.feat-main { padding-right: 0 !important; }
	
	.feat-overlay .fo-top { 
		grid-template-columns: 1fr !important; 
		gap: 1rem !important;
	}
	
	.feat-row { 
		flex-direction: column !important; 
		gap: 1rem !important;
	}
	
	.feat-thumb { 
		width: 100% !important; 
		max-width: 100% !important; 
		align-self: center !important;
		flex: none !important;
	}
	
	/* ✨ NEWS: Featured cards and grids to single column */
	.featured-cards {
		grid-template-columns: 1fr !important;
		gap: 1rem !important;
	}
	
	.featured-grid {
		grid-template-columns: 1fr !important;
		gap: 1rem !important;
	}
	
	/* ✨ NEWS: Featured variants to single column */
	.featured-variants {
		display: flex !important;
		flex-direction: column !important;
		gap: 1rem !important;
	}
	
	/* ✨ NEWS: Featured list to single column */
	.featured-list {
		display: flex !important;
		flex-direction: column !important;
		gap: 1rem !important;
	}

	/* ✨ NEWS: Global overflow guard and container bounds */
	html, body, body.page-flow { overflow-x: visible !important; }
	body.page-flow .container,
	body.page-flow .featured-wrap,
	body.page-flow .ledger,
	body.page-flow .grid,
	body.page-flow #newsCalendar,
	body.page-flow #newsCurated,
	body.page-flow .filter-panel,
	body.page-flow .filter-content { max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; }

	/* ✨ NEWS: Ensure results grid stays single column and within bounds */
	#newsGrid { grid-template-columns: 1fr !important; }

	/* ✨ NEWS: Curated rows stack vertically; remove min-widths to prevent side-scroll */
	.news-curated .row-hscroll { display:flex !important; flex-direction: column !important; gap: 0.75rem !important; overflow-x: visible !important; overflow-y: visible !important; }
	.news-card--updates, .news-card--events, .news-card--blog, .feat-card { min-width: 0 !important; width: 100% !important; }

	/* ✨ NEWS: Featured rail should not reserve gutter that causes overflow */
	.feat-rail { scrollbar-gutter: auto !important; }

	/* ✨ NEWS: Ledger — enforce single-column up to 900px */
	.ledger-head { grid-template-columns: 1fr !important; gap: 0.6rem !important; }
	.ledger-head .ledger-thumb,
	.ledger-head .ledger-summary,
	.ledger-head .ledger-date { grid-column: 1 / -1 !important; }
	.ledger-date { justify-self: start !important; }
	.ledger-thumb { width: 100% !important; height: auto !important; aspect-ratio: 16/9 !important; }
}
/* ===== Media page: tablet range (769–900px) full padding + wide copy ===== */
@media (min-width: 769px) and (max-width: 900px){
	/* Ensure the right column uses consistent container padding (matches ≤900 rule) */
	.featured-split > div:last-child { padding-left: 1rem !important; padding-right: 1rem !important; }
	/* Remove narrow text cap so paragraphs span the full media padding */
	.StackNarrow,
	.StackNarrow p,
	.hero-aside .panel-body,
	.aside-large .panel-body { max-width: 100% !important; }
	/* Keep body text aligned with section header (no extra indent) */
	#heroAsideBody,
	#audioAsideBody { padding-left: 0 !important; padding-right: 0 !important; }
}
/* ===== Resource Content page: tablet+ padding and slightly wider container ===== */
@media (min-width: 769px){
	body.resource-page main.container {
		padding-left: 1.25rem !important;
		padding-right: 1.25rem !important;
		max-width: 1650px !important; /* slight expansion over inline 1600px */
		box-sizing: border-box !important;
	}
}
/* ===== Contact page: tablet+ padding and slightly wider container ===== */
@media (min-width: 769px){
    body.contact-blue .contact-container {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
        max-width: 1650px !important; /* tiny expansion to match resource content */
        box-sizing: border-box !important;
    }
}
/* Keep two-column layout ≥961px, but add breathing room on the form side */
@media (min-width: 961px) and (max-width: 1200px){
    body.contact-blue .contact-grid { grid-template-columns: minmax(260px, 1fr) 2fr !important; }
    body.contact-blue .contact-form-card { padding-right: 1.5rem !important; }
}
/* 769–900px: remove any visual indent on the cards/grid */
@media (min-width: 769px) and (max-width: 900px){
    body.contact-blue .contact-grid { gap: 1.25rem !important; }
    body.contact-blue .contact-copy-card,
    body.contact-blue .contact-form-card {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}
@media (max-width: 900px){ .cal-day { min-height:68px; } }
@media (max-width: 768px){ 
	.container, .news-curated { padding: 0 1rem; }

	/* News Article page: mobile padding + title scale */
	body.news-article-page .container { padding-left: 1.25rem !important; padding-right: 1.25rem !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow-x: visible !important; }
	body.news-article-page { overflow-x: visible !important; }
	body.news-article-page main.container, 
	body.news-article-page .head, 
	body.news-article-page .cover, 
	body.news-article-page .content, 
	body.news-article-page .actions { margin-left: 0 !important; margin-right: 0 !important; }
	body.news-article-page .head { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
	body.news-article-page .title { font-size: 1.1rem !important; }
	body.news-article-page .meta { font-size: 0.9rem !important; }
	body.news-article-page .content { padding-left: 1.1rem !important; padding-right: 1.1rem !important; font-size: 0.98rem !important; }
	
	/* ✨ CONTACT: Mobile responsive layout */
	.contact-container {
		max-width: 100%;
		width: 100%;
		padding: 0 1rem;
		margin: 0;
		box-sizing: border-box;
	}
	
	.contact-grid {
		grid-template-columns: 1fr !important;
		gap: 1rem !important;
		margin-top: 0.75rem !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	
	.contact-copy-card,
	.contact-form-card {
		padding: 1.1rem !important;
		border-radius: 12px !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
	
	.contact-form {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
	
	.form-row {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
	
	.form-group {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
	
	.input,
	.textarea {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
	
	.support-actions {
		grid-template-columns: 1fr !important;
		gap: 1rem !important;
		margin-top: 1.5rem !important;
	}
	
	.support-card {
		padding: 0.9rem 1rem !important;
		border-radius: 12px !important;
	}
	
	.newsletter-cta {
		margin-top: 2rem !important;
		padding: 1.1rem !important;
		border-radius: 12px !important;
	}
	
	.newsletter-form {
		flex-direction: column !important;
		gap: 0.75rem !important;
	}
	
	.newsletter-input {
		min-width: auto !important;
		width: 100% !important;
	}
	
	/* ✨ NEWS: Additional mobile optimizations for single column */
	.featured-layout { 
		grid-template-columns: 1fr !important; 
		gap: 0.75rem !important;
	}
	
	.feat-overlay .fo-top { 
		grid-template-columns: 1fr !important; 
		gap: 0.75rem !important;
	}
	
	.feat-row { 
		flex-direction: column !important; 
		gap: 0.75rem !important;
		padding: 1rem !important;
	}
	
	.feat-thumb { 
		width: 100% !important; 
		max-width: 100% !important; 
		align-self: center !important;
		flex: none !important;
	}
	
	.featured-cards {
		grid-template-columns: 1fr !important;
		gap: 0.75rem !important;
	}
	
	.featured-grid {
		grid-template-columns: 1fr !important;
		gap: 0.75rem !important;
	}
	
	/* ✨ NEWS: Scale reduction for better mobile fit */
	.featured-title {
		font-size: 0.95rem !important;
	}
	
	.feat-headline .t {
		font-size: 1rem !important;
	}
	
	.feat-main .m {
		font-size: 0.85rem !important;
	}
	
	.ledger-summary .title {
		font-size: 0.9rem !important;
	}
	
	.ledger-summary .excerpt {
		font-size: 0.8rem !important;
	}
	
	.card .title {
		font-size: 0.9rem !important;
	}
	
	.card .summary {
		font-size: 0.8rem !important;
	}
	
	.news-card--updates .title {
		font-size: 0.85rem !important;
	}
	
	.news-card--events .evt .title {
		font-size: 0.85rem !important;
	}
	
	.news-card--blog .title {
		font-size: 0.85rem !important;
	}
	
	.calendar-title {
		font-size: 0.95rem !important;
	}
	
	.curated-header h2 {
		font-size: 0.9rem !important;
	}
	
	.curated-header .sub {
		font-size: 0.75rem !important;
	}
	
	/* ✨ NEWS: Additional text scaling for better mobile fit */
	.feat-headline .d {
		font-size: 0.8rem !important;
		font-weight: 600 !important;
	}
	
	.feat-bottom .feat-meta {
		font-size: 0.8rem !important;
		font-weight: 600 !important;
	}
	
	.feat-bottom .feat-actions .btn {
		font-size: 0.8rem !important;
		font-weight: 600 !important;
		padding: 0.35rem 0.7rem !important;
	}
	
	.ledger-date {
		font-size: 0.8rem !important;
		font-weight: 600 !important;
	}
	
	.ledger-toggle {
		font-size: 0.8rem !important;
		font-weight: 500 !important;
	}
	
	.card .meta {
		font-size: 0.75rem !important;
		font-weight: 500 !important;
	}
	
	.news-card--updates .meta {
		font-size: 0.75rem !important;
		font-weight: 500 !important;
	}
	
	.news-card--events .evt .meta {
		font-size: 0.75rem !important;
		font-weight: 500 !important;
	}
	
	.news-card--blog .meta {
		font-size: 0.75rem !important;
		font-weight: 500 !important;
	}
	
	.calendar-controls .cal-btn {
		font-size: 0.8rem !important;
		font-weight: 600 !important;
		padding: 0.25rem 0.5rem !important;
	}
	
	.cal-wd {
		font-size: 0.75rem !important;
		font-weight: 700 !important;
	}
	
	.cal-day .date {
		font-size: 0.85rem !important;
		font-weight: 700 !important;
	}
	
	.legend {
		font-size: 0.75rem !important;
		font-weight: 500 !important;
	}
	
	/* ✨ NEWS: Ensure all news cards stack vertically */
	.news-curated .curated-section {
		display: flex !important;
		flex-direction: column !important;
		gap: 0.75rem !important;
	}
	
	.news-curated .row-hscroll {
		display: flex !important;
		flex-direction: column !important;
		gap: 0.75rem !important;
		overflow-x: visible !important;
		overflow-y: visible !important;
	}
	
	/* ✨ NEWS: Image and container constraints to prevent overflow */
	/* Place featured image under title on mobile */
	.feat-top { 
		flex-direction: column !important; 
	}
	.feat-main { order: 1 !important; }
	.feat-thumb { order: 2 !important; }
	/* ✨ NEWS: Stack ledger layout and constrain thumbs */
	.ledger-head { 
		grid-template-columns: 1fr !important; 
		gap: 0.6rem !important; 
	}
	.ledger-head .ledger-thumb,
	.ledger-head .ledger-summary,
	.ledger-head .ledger-date {
		grid-column: 1 / -1 !important;
	}
	.ledger-date { justify-self: start !important; }
	.ledger-thumb { 
		width: 100% !important; 
		height: auto !important; 
		aspect-ratio: 16/9 !important; 
	}

	/* Constrain featured image on mobile */
	.feat-thumb { 
		aspect-ratio: 16/9 !important; 
		height: auto !important; 
	}
	.feat-thumb img {
		max-width: 100% !important;
		width: 100% !important;
		height: auto !important;
		object-fit: contain !important;
	}
	
	.ledger-thumb img {
		max-width: 100% !important;
		width: 100% !important;
		height: auto !important;
		object-fit: contain !important;
	}
	
	.card .cover img {
		max-width: 100% !important;
		width: 100% !important;
		height: auto !important;
		object-fit: contain !important;
	}

	/* Ensure media card images fill their containers properly */
	.card .media-cover img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
	}

	/* Constrain images inside quick-read content and modal */
	.ledger-details .long img,
	.modal-body img {
		max-width: 100% !important;
		height: auto !important;
		object-fit: contain !important;
		display: block !important;
	}
	
	.news-card--blog .cv img {
		max-width: 100% !important;
		width: 100% !important;
		height: auto !important;
		object-fit: cover !important;
	}
	
	.feat-card .cv img {
		max-width: 100% !important;
		width: 100% !important;
		height: auto !important;
		object-fit: cover !important;
	}
	
	/* ✨ NEWS: Container width constraints */
	.featured-wrap {
		max-width: 100% !important;
		width: 100% !important;
		box-sizing: border-box !important;
		overflow: hidden !important;
	}
	
	.ledger {
		max-width: 100% !important;
		width: 100% !important;
		box-sizing: border-box !important;
		overflow: hidden !important;
		margin-bottom: 1rem !important;
	}
	
	.grid {
		max-width: 100% !important;
		width: 100% !important;
		box-sizing: border-box !important;
		overflow: hidden !important;
		margin-bottom: 1rem !important;
	}
	
	.calendar-wrap {
		max-width: 100% !important;
		width: 100% !important;
		box-sizing: border-box !important;
		overflow: hidden !important;
	}
	
	/* ✨ NEWS: Additional container constraints */
	.news-curated {
		max-width: 100% !important;
		width: 100% !important;
		box-sizing: border-box !important;
		overflow: hidden !important;
	}
	
	.filter-panel {
		max-width: 100% !important;
		width: 100% !important;
		box-sizing: border-box !important;
		overflow: hidden !important;
	}
	
	.filter-content {
		max-width: 100% !important;
		width: 100% !important;
		box-sizing: border-box !important;
		overflow: hidden !important;
	}
	
	/* ✨ NEWS: Ensure all content stays within bounds */
	.feat-row,
	.ledger-row,
	.card,
	.news-card--updates,
	.news-card--events,
	.news-card--blog,
	.feat-card {
		max-width: 100% !important;
		width: 100% !important;
		box-sizing: border-box !important;
		overflow: hidden !important;
	}
	
	/* ✨ NEWS: Reduce padding and spacing for better mobile fit */
	.feat-row {
		padding: 0.75rem !important;
	}
	
	.ledger-head {
		padding: 0.6rem 0.75rem !important;
	}
	
	.ledger-details {
		padding: 0.6rem 0.75rem 0.75rem !important;
	}
	
	.card .body {
		padding: 0.7rem 0.8rem !important;
	}
	
	.news-card--updates {
		padding: 0.6rem 0.7rem !important;
	}
	
	.news-card--events {
		padding: 0.6rem 0.7rem !important;
	}
	
	.news-card--blog .bd {
		padding: 0.5rem 0.6rem !important;
	}
	
	.feat-card .bd {
		padding: 0.5rem 0.6rem !important;
	}
}
@media (max-width: 900px){ .news-curated { padding: 0 1rem; } }
@media (max-width: 900px){ 
    .modal-subgrid { grid-template-columns: 1fr; } 
    
    /* ✨ FIXED: Tablet text sizing for modal containers */
    .modal-title h3 { 
        font-size: 1.1rem !important; 
        line-height: 1.3 !important;
    }
    
    .modal-subtitle { 
        font-size: 0.85rem !important; 
        margin-top: 0.2rem !important;
    }
    
    .modal-media h4 { 
        font-size: 0.9rem !important; 
        margin: 0.05rem 0 0.1rem !important;
    }
    
    .modal-media .meta { 
        font-size: 0.85rem !important;
    }
    
    .modal-desc { 
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
    }
}

/* ===== Music Catalog overlay + collections responsive fragments ===== */
@media (max-width: 768px) {
	.score-overlay-content { max-width: 98vw; margin: 20px auto; }
	.score-overlay-header { padding: 1rem 1.5rem; }
	.score-overlay-body { padding: 1rem; }
	.score-layout-container { flex-direction: column; gap: 1rem; }
	.score-video-column, .score-pdf-column { flex: 1 1 auto; min-width: 0; }
	.score-iframe-container { height: 420px; }
}

/* ===== Popular Section Mobile Layout (carousel, 8.5x11, max-height 500) ===== */
@media (max-width: 768px) {
	/* Keep horizontal carousel behavior */
	#popular-compositions .related-works-carousel {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scroll-snap-type: x mandatory !important;
		gap: 0.75rem !important;
		padding: 0.75rem 0.9rem !important;
		justify-content: flex-start !important;
		align-items: stretch !important;
	}

	/* Cards: maintain 8.5x11, cap height at 500px */
	#popular-compositions .related-composition-card {
		flex: 0 0 auto !important;
		/* Height drives width via aspect-ratio */
		height: min(500px, 80vh) !important;
		max-height: 500px !important;
		aspect-ratio: 8.5 / 11 !important;
		width: auto !important; /* computed by aspect-ratio */
		scroll-snap-align: start !important;
		border-radius: 8px !important;
		overflow: hidden !important;
		position: relative !important;
		transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
		will-change: transform, box-shadow !important;
	}

	#popular-compositions .related-composition-image {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		border-radius: 6px !important;
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
	}

	/* Ensure container bounds */
	#popular-compositions .related-works-carousel { margin: 0 !important; width: 100% !important; max-width: 100% !important; }
}




/* ===== Extra Small Screen Adjustments ===== */
@media (max-width: 480px) {
	/* Slightly tighter gutter; keep carousel + 8.5/11 with lower cap */
	#popular-compositions .related-works-carousel { gap: 0.5rem !important; padding: 0.5rem 0.6rem !important; }
	#popular-compositions .related-composition-card { height: min(420px, 70vh) !important; max-height: 420px !important; }

	/* ✨ FIXED: Extra small screen media page adjustments */
	.featured-split > div:first-child { 
		position: static !important;
		top: auto !important; 
		padding: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		overflow: visible !important;
		height: auto !important;
		max-height: none !important;
		align-self: auto !important;
		flex: 1 1 auto !important;
	}
	
	/* ✨ FIXED: Search media results layout for mobile */
	.results {
		max-width: 100% !important;
		margin: 0 !important;
		padding: 1rem !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}
	
	.results .grid {
		grid-template-columns: 1fr !important;
		gap: 1rem !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	
	.results .card {
		width: 100% !important;
		max-width: 100% !important;
		overflow: visible !important;
	}
	
	.results .card-body {
		padding: 0.75rem !important;
	}
	
	.results .title {
		font-size: 0.95rem !important;
		line-height: 1.3 !important;
	}
	
	.results .muted {
		font-size: 0.85rem !important;
		line-height: 1.4 !important;
	}
	
	/* ✨ FIXED: Type buttons carousel for mobile overflow */
	.btn-group {
		display: flex !important;
		gap: 0.35rem !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scroll-snap-type: x mandatory !important;
		scrollbar-width: thin !important;
		scrollbar-color: var(--gray-400) transparent !important;
		padding: 0.25rem 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	
	.btn-group::-webkit-scrollbar {
		height: 4px !important;
	}
	
	.btn-group::-webkit-scrollbar-track {
		background: transparent !important;
	}
	
	.btn-group::-webkit-scrollbar-thumb {
		background: var(--gray-300) !important;
		border-radius: 2px !important;
	}
	
	.btn-group::-webkit-scrollbar-thumb:hover {
		background: var(--gray-400) !important;
	}
	
	.btn-group button {
		flex-shrink: 0 !important;
		scroll-snap-align: start !important;
		white-space: nowrap !important;
	}
	
	/* ✨ FIXED: Search compact container full width and sort alignment */
	.search-compact {
		display: flex !important;
		align-items: center !important;
		gap: 0.5rem !important;
		width: 100% !important;
		max-width: 100% !important;
		justify-content: space-between !important;
	}
	
	.search-compact input {
		flex: 1 !important;
		min-width: 0 !important;
	}
	
	/* ✨ FIXED: Sort dropdown alignment to flex-end */
	.filters-r2 .r {
		display: flex !important;
		gap: 0.5rem !important;
		align-items: center !important;
		width: 100% !important;
		justify-content: space-between !important;
	}
	
	#sortDropdown {
		margin-left: auto !important;
	}
	
	/* ✨ FIXED: Reduce text sizes for mobile filter elements */
	.btn-group button {
		font-size: 0.85rem !important;
		padding: 0.45rem 0.75rem !important;
	}
	
	.dropdown-btn {
		font-size: 0.85rem !important;
		padding: 0.45rem 0.75rem !important;
	}
	
	/* ✨ FIXED: Remove gap between dot row for mobile */
	.divider {
		margin: 0 !important;
		display: none !important;
	}
	
	/* ✨ FIXED: Dropdown z-index for mobile overlay */
	.dropdown-menu {
		z-index: 9999 !important;
		position: absolute !important;
	}
	
	.dropdown {
		position: relative !important;
		z-index: 9999 !important;
	}
	
	.featured-split .featured-hero {
		padding: 0.5rem !important;
		margin-top: 1rem !important; /* Extra spacing from nav on very small screens */
	}
	
	.featured-split > div:last-child { 
		padding: 1.5rem 0.75rem 2rem 0.75rem !important; 
	}
	
	.featured-split .hero-aside .panel-header {
		font-size: 1.7rem !important;
		padding: 0 0 0.75rem 0 !important;
	}
	
	.featured-split .hero-aside .panel-body {
		padding: 0.75rem 0 0 0 !important;
	}
	
	.featured-split .hero-aside .narrow-text {
		font-size: 0.9rem !important;
		line-height: 1.5 !important;
		margin-bottom: 1rem !important;
	}
	
	.featured-split .vh-list {
		font-size: 0.85rem !important;
		line-height: 1.4 !important;
	}
	
	.featured-split .achievements {
		margin-top: 0.75rem !important;
	}
	
	.featured-split .ach-card {
		padding: 0.4rem 0.6rem !important;
	}
	
	.featured-split .ach-card > div:first-child {
		font-size: 1.1rem !important;
	}
	
	.featured-split .ach-card .muted {
		font-size: 0.8rem !important;
	}
	
	/* ✨ FIXED: Reduce video rail thumbnail sizes for mobile */
	.video-carousel .video-thumb {
		min-width: 120px !important;
		max-width: 140px !important;
	}
	
	.video-carousel .video-thumb img {
		height: 130px !important;
		width: 100% !important;
		object-fit: cover !important;
		aspect-ratio: 16/9 !important;
	}
	
	.video-carousel .video-thumb .vt-title {
		font-size: 0.75rem !important;
		padding: 0.35rem 0.5rem !important;
	}
}
@media (max-width: 900px) { #catalog-collections-section .collections-container { grid-template-columns: 1fr; } }
@media (max-width: 768px) { #catalog-collections-section .collections-section-title { font-size: 1.08rem; margin-bottom: .6rem; }
}

/* Collections Card component */
@media (max-width: 768px) {
	.collections-card-header { padding: 1rem; }
	.collections-card { flex-basis: 100%; }
	.collection-info,
	.collection-compositions,
	.collection-actions { padding-left: 1rem; padding-right: 1rem; }
	.collection-actions-flex { flex-direction: column; gap: 0.75rem; }
	.composition-item { padding: 0.625rem 0.875rem; }
	.collections-card-title { gap: 0.25rem; }
	.collection-name,
	.collection-price-header { margin-left: 0; }
}

/* Waveform Audio Player component */
@media (max-width: 768px) {
	.waveform-audio-player { padding: 1rem; }
	.waveform { height: 80px; }
	.waveform-controls { flex-direction: column; align-items: stretch; gap: 0.75rem; }
	.volume-control { margin-left: 0; justify-content: space-between; }
	.volume-slider { width: 100%; }
}

/* ===== Drawer submenu toggle button (mobile/tablet) ===== */
@media (max-width: 1024px) {
	.nav-item.has-dropdown { position: relative; }
	/* Inline chevron button after the link */
	.submenu-toggle {
		appearance: none;
		background: transparent;
		border: 0;
		margin-left: auto;
		width: 36px;
		height: 36px;
		display: inline-grid;
		place-items: center;
		border-radius: 8px;
		color: var(--gray-600);
		cursor: pointer;
	}
	.submenu-toggle:hover { background: var(--gray-100); color: var(--gray-800); }
	.submenu-toggle::before { content: '▾'; transition: transform .25s ease; font-size: 0.9rem; }
	.nav-item.open > .submenu-toggle::before { transform: rotate(180deg); }
	/* Ensure link and toggle sit on one row */
	.main-nav .nav-item > a { display: inline-flex; align-items: center; flex: 1 1 auto; }
}

@media (max-width: 480px) {
	/* Bottom-sheet drawer for extra-small screens */
	.main-nav { display: none !important; }
	.main-nav.active { display: flex !important; }
	.main-nav.nav-menu {
		top: auto !important;
		right: auto !important;
		left: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		height: auto !important;
		max-height: 80vh !important;
		transform: translateY(100%) !important;
		box-shadow: 0 -12px 30px rgba(0,0,0,.18) !important;
		padding: 6px 8px 12px !important;
		box-sizing: border-box !important;
		overflow-x: visible !important;
	}
	.main-nav.nav-menu.active { transform: translateY(0) !important; }
	/* Keep accordion behavior */
	.header-base .dropdown-menu { position: static !important; width: 100% !important; box-shadow: none !important; }
	
	/* ✨ FIXED: Extra small screen hero overlay text sizing */
	.hero-role-title { 
		font-size: 1.2rem !important; 
		line-height: 1.2 !important;
		margin-bottom: 0.6rem !important;
	}
	
	.hero-role-description { 
		font-size: 0.8rem !important; 
		line-height: 1.3 !important;
		margin-bottom: 1.2rem !important;
		padding: 0 0.3rem !important;
	}
	
	.hero-content-container { 
		padding: 1rem 0.8rem !important;
	}
	
	.hero-rotating-content { 
		min-height: 80px !important; 
		height: 80px !important;
	}
	
	.hero-role { 
		min-height: 80px !important; 
		height: 80px !important;
		padding: 0.3rem !important;
	}
	
	.hero-nav-dots { 
		margin-top: 1rem !important;
		gap: 0.75rem !important;
	}
	
	.dot { 
		width: 30px !important; 
		height: 3px !important;
		border-radius: 2px !important;
		background: rgba(255, 255, 255, 0.3) !important;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	}
	
	.dot.active {
		background: rgba(255, 255, 255, 0.9) !important;
		box-shadow: 0 0 12px rgba(255, 255, 255, 0.6) !important;
		transform: scaleX(1.1) !important;
	}
	
	.dot:hover {
		background: rgba(255, 255, 255, 0.7) !important;
		transform: scaleX(1.3) scaleY(1.2) !important;
		box-shadow: 0 0 15px rgba(255, 255, 255, 0.5) !important;
	}
}

@media (max-width: 768px) {
	/* Sub-nav visual styling */
	.header-base .dropdown-menu a {
		position: relative;
		padding-left: 28px; /* indent */
		color: var(--gray-700);
		display: flex; /* left-align text and icon */
		align-items: center;
		justify-content: flex-start; /* ensure flex-start for subitems */
		text-align: left;
		width: 100%;
	}
	.header-base .dropdown-menu a::before {
		content: '';
		position: absolute;
		left: 14px;
		top: 50%;
		width: 6px;
		height: 6px;
		border-radius: 999px;
		background: var(--gray-400);
		transform: translateY(-50%);
	}
	.header-base .dropdown-menu a:hover { background: var(--gray-50); color: var(--gray-900); }
	/* subtle container for submenu list */
	.header-base .nav-item.open > .dropdown-menu { background: #f7f9fc !important; border-radius: 8px; margin-top: 6px !important; padding: 6px 0 !important; }
}

@media (max-width: 768px) {
	/* Column layout for nav items */
	.main-nav.nav-menu .nav-item { display: flex; flex-direction: column; align-items: stretch; }
	/* Links align left (no space-between row layout) */
	.main-nav.nav-menu a { justify-content: flex-start; }
	/* Submenu container uses column layout and aligns to flex-start */
	.header-base .dropdown-menu { display: flex !important; flex-direction: column; align-items: flex-start; gap: 2px; }
	/* Slight indentation to read as sub-task */
	.header-base .dropdown-menu a { padding-left: 24px; }
}

@media (max-width: 768px) {
	/* Final override: submenu container appears inline without panel */
	.header-base .nav-item.open > .dropdown-menu {
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
	}
	
	/* ✨ FIXED: Hero overlay text sizing to prevent cutoff on mobile */
	.hero-role-title { 
		font-size: 1.4rem !important; 
		line-height: 1.3 !important;
		margin-bottom: 0.8rem !important;
	}
	
	.hero-role-description { 
		font-size: 0.9rem !important; 
		line-height: 1.4 !important;
		margin-bottom: 1.5rem !important;
		padding: 0 0.5rem !important;
	}
	
	.hero-content-container { 
		padding: 1.2rem 1rem !important;
	}
	
	.hero-rotating-content { 
		min-height: 100px !important; 
		height: 100px !important;
	}
	
	.hero-role { 
		min-height: 100px !important; 
		height: 100px !important;
		padding: 0.5rem !important;
	}
	
	.hero-nav-dots { 
		margin-top: 1rem !important;
		gap: 0.75rem !important;
	}
	
	.dot { 
		width: 30px !important; 
		height: 3px !important;
		border-radius: 2px !important;
		background: rgba(255, 255, 255, 0.3) !important;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	}
	
	.dot.active {
		background: rgba(255, 255, 255, 0.9) !important;
		box-shadow: 0 0 12px rgba(255, 255, 255, 0.6) !important;
		transform: scaleX(1.1) !important;
	}
	
	.dot:hover {
		background: rgba(255, 255, 255, 0.7) !important;
		transform: scaleX(1.3) scaleY(1.2) !important;
		box-shadow: 0 0 15px rgba(255, 255, 255, 0.5) !important;
	}
}