/* Styles for mobile phones */
@media (max-width: 600px)  {
	.mobile { display: block; }
	.mobilehide { display: none; }
	.wrapper {padding: 0;}
	.main {border-radius: 0; margin: 0}
	* {transition: none !important; transform: none !important; animation: none !important; box-shadow: none !important;}
	*:hover {transform: none !important; box-shadow: none !important; filter: none !important; opacity: 1 !important}
	.content {padding: 20px}
	.single h1 {font-size: 40px; line-height: 48px;}
	h2 {font-size: 25px; line-height: 33px}
	.page-contact h1 {margin-bottom: 20px}
	.latest-news ul {grid-template-columns: repeat(1, 1fr)}
	.news-layout {display: flex; flex-direction: column; width: 100%; margin-bottom: 30px; border-radius: 8px; overflow: hidden;}
	.news-item-large {position: relative; margin-bottom: -8px;}
	.news-item-large img {width: 100%; height: auto;}
	.news-item-large .overlay {position: absolute; bottom: 10px; left: 0; right: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.70) 50%, rgba(0, 0, 0, 0) 100%); color: white; padding: 10px;}
	.news-grid {display: flex; flex-wrap: wrap; gap: 2px;}
	.news-item-small {width: calc(50% - 1px); position: relative; margin-bottom: -10px;}
	.news-item-small img {width: 100%; height: auto;}
	.news-item-small .overlay {position: absolute; bottom: 10px; left: 0; right: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.70) 50%, rgba(0, 0, 0, 0) 100%); color: white; padding: 10px;}
	.news-layout h3 {margin: 0; padding: 0; font-size: 15px; font-weight: bold; line-height: 20px;}
	.news-layout .post-date {color: #fff; font-size: 12px; line-height: 20px;}
	.news-item-small p, .news-item-large p {margin: 0;}
	.featured-image img {margin-top: 0}
	.single .post-date {margin-bottom: 15px; margin-top: 5px}
	.single .latest-news {padding-top: 20px; margin-top: 20px}
	.single .latest-news ul {grid-template-columns: repeat(2, 1fr); gap: 16px}
	.latest-news .date {margin-top: 5px}
	.mobilefooter {text-align: center; padding: 20px; font-size: 13px; line-height: 20px}
	.splat {width: 100%}
	.splat img {width: 50px}
	.mobilenav button {float: right; position: absolute; top: 5px; right: 0; padding: 20px 30px}
	.collapsible {cursor: pointer; border: none; background: none; outline: none; float: right}
	.collapsible img {width: 24px; height: auto}
	.navcontent {max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out;}
	nav ul {display: block; margin-top: 20px; font-weight: bold; padding: 0; font-size: 17px; margin-bottom: 25px; border-bottom: 1px solid var(--gray04); padding-bottom: 30px}
	nav ul li {padding: 0}
	nav ul a {padding: 0}
	nav ul a img {margin-right: 16px; width: 20px; height: auto}
	nav .menu img {display: block}
	header {padding: 20px; margin: 0; padding-bottom: 10px}
	header .logo {margin-bottom: 0}
	nav ul a:hover .icon-black {display: block}
	nav .selected {color: var(--brand01)}
	nav .selected .icon-black {display: none}
	nav .selected .icon-blue {display: block}
	nav li {margin-bottom: 28px}
	nav li:last-child {margin-bottom: 0}
	.social {margin-top: 20px}
	.social ul {gap: 20px}
	.header-mobile {display: flex; justify-content: space-between;}
	.header-mobile .logo {max-width: 350px;}
	.header-mobile .collapsible {background: none; border: none; cursor: pointer;}
	.header-mobile .collapsible picture img {max-height: 30px;}
	.est {display: none}
	.tracks, .albums {grid-template-columns: repeat(2, 1fr); gap: 20px}
	.left {width: 100%; max-width: none; flex: 100%; padding: 0; border-bottom: 1px solid var(--gray04); background: none; border-radius: 0; padding-bottom: 20px}
	.right {padding-left: 0; margin-top: 10px}
	.tracks {line-height: 20px}
	.tracks img {margin-bottom: 5px}
	.entry-title.mobile {margin-bottom: 20px; text-align: center}
	.pictures ul {grid-template-columns: repeat(2, 1fr); gap: 20px}
	.parent-pageid-13548 .gallery {grid-template-columns: repeat(3, 1fr); gap: 20px}
	.fan-club img {width: 100%; height: auto}
	figure {width: 100% !important}
	.wpcf7 input, .wpcf7 textarea {width: 100%}
	.banner {padding: 0 20px; margin-top: 20px; margin-bottom: -5px}
	.songoftheweek {display: none}
	.songoftheweek.mobile {display: block}
	.featured-grid { grid-template-columns: 1fr; }
	.secondary-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
	.latest-news .secondary-grid h3, .side-mini__title {font-size: 17px; line-height: 24px; font-weight: 500}
	.secondary-post__excerpt {display: none}
	.featured-grid__right { display: grid; grid-template-columns: 1fr 1fr; gap: 12px}
	.side-mini__link { grid-template-rows: auto auto; flex: unset; }
	.side-mini__thumb { height: auto; aspect-ratio: 16/9; }
	.lead-post__excerpt {display: none}
	.lead-post__title {font-size: 24px; line-height: 30px}
	.lead-post__overlay {padding: 8px}
	.lead-post__link:hover { transform: scale(1); box-shadow: none}
    .lead-post__overlay {position: static;background: none;	padding: 0;}
	.lead-post__overlay::before { display: none; }
	.lead-post__media { border-radius: 12px; overflow: hidden; }
	.lead-post__img { border-radius: 12px; }
	.lead-post__title, .lead-post__excerpt, .featured-grid__left .date {color: var(--black);}
	.featured-grid, .featured-grid__left {gap: 12px}
	.search-item input {width: 240px}
	
	  /* Each card becomes a normal block */
	  .side-mini__link { display: block; flex: none !important; min-height: 0 !important; }
	  .side-mini { display: block; }
	
	  /* Media wrapper + image: let height be intrinsic */
	  .side-mini__media { height: auto !important; }
	  .side-mini__thumb { width: 100%; height: auto !important; aspect-ratio: auto !important; object-fit: cover; }
	
	  /* If you previously used grid rows, neutralize them */
	  .side-mini__link { grid-template-rows: none !important; }
	
	/**** DARK MODE ****/
	@media (prefers-color-scheme: dark) {
		nav .selected .icon-white {display: none}
		nav .selected:hover .icon-blue {display: block}
		nav .icon-black {display: none !important}
		.lead-post__title, .lead-post__excerpt, .featured-grid__left .date {color: var(--white)}
	}
}


@media (min-width: 1600px) {
	.latest-news ul {grid-template-columns: repeat(3, 1fr);}
}