/*
 * responsive.css – Mobile-first responsive breakpoints.
 *
 * @package Hello_Movie Engine
 */

/* --------------------------------------------------------
   Small (≥576px)
   -------------------------------------------------------- */
@media (min-width: 576px) {
	.hello-movieengine-post-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.hello-movieengine-search-results .hello-movieengine-article .post-thumbnail {
		width: 240px;
	}
}

/* --------------------------------------------------------
   Medium (≥768px)
   -------------------------------------------------------- */
@media (min-width: 768px) {
	:root {
		--hello-movieengine-gap: 24px;
	}

	h1 { font-size: 2.5rem; }
	h2 { font-size: 2rem; }
	h3 { font-size: 1.5rem; }

	.hello-movieengine-single-content .entry-title {
		font-size: 2.5rem;
	}

	.hello-movieengine-page-header .page-title {
		font-size: 2.25rem;
	}
}

/* --------------------------------------------------------
   Large (≥1025px)
   -------------------------------------------------------- */
@media (min-width: 1025px) {
	:root {
		--hello-movieengine-gap: 30px;
	}

	.hello-movieengine-post-grid {
		grid-template-columns: repeat( var(--hello-movieengine-blog-columns), 1fr );
	}

	.hello-movieengine-content-area .hello-movieengine-sidebar {
		width: var(--hello-movieengine-sidebar-width);
	}
}

/* --------------------------------------------------------
   Small screens (≤767px)
   -------------------------------------------------------- */
@media (max-width: 767px) {
	.hello-movieengine-post-grid {
		grid-template-columns: 1fr;
	}

	.hello-movieengine-content-area,
	.hello-movieengine-sidebar-left .hello-movieengine-content-area {
		flex-direction: column;
		gap: 30px;
	}

	.hello-movieengine-content-area .hello-movieengine-sidebar {
		width: 100%;
	}

	.alignwide {
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
	}

	.hello-movieengine-single-content .entry-title {
		font-size: 1.5rem;
	}

	.hello-movieengine-page-title-section {
		min-height: auto;
	}

	.hello-movieengine-page-title-section__title {
		font-size: 1.75rem;
	}

	.hello-movieengine-page-title-section__label {
		font-size: 0.65rem;
	}

	.hello-movieengine-page-header {
		padding: 30px 0 20px;
	}

	.hello-movieengine-page-header .page-title {
		font-size: 1.5rem;
	}

	.hello-movieengine-search-results .hello-movieengine-article {
		flex-direction: column;
	}

	.hello-movieengine-search-results .hello-movieengine-article .post-thumbnail {
		width: 100%;
	}
}

/* --------------------------------------------------------
   Very small (≤575px)
   -------------------------------------------------------- */
@media (max-width: 575px) {
	.hello-movieengine-header__inner {
		height: 60px;
	}

	:root {
		--hello-movieengine-header-height: 60px;
	}

	.hello-movieengine-header.is-search-open .hello-movieengine-header__logo,
	.hello-movieengine-header:has(.hello-movieengine-header__search.is-open) .hello-movieengine-header__logo,
	.hello-movieengine-header.is-search-open .hello-movieengine-header__mobile-toggle,
	.hello-movieengine-header:has(.hello-movieengine-header__search.is-open) .hello-movieengine-header__mobile-toggle {
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}

	.hello-movieengine-header__search.is-open {
		position: static !important;
	}

	.hello-movieengine-header__search.is-open .hello-movieengine-header__search-box {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		height: 100% !important;
		transform: none !important;
		z-index: 100 !important;
		background: var(--hello-movieengine-bg-color, #141414) !important;
		padding: 8px 16px !important;
		display: flex !important;
		align-items: center !important;
		gap: 10px !important;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8) !important;
	}

	.hello-movieengine-container-fluid,
	.hello-movieengine-header .hello-movieengine-container {
		padding-left: 16px;
		padding-right: 16px;
	}

	.hello-movieengine-404__code {
		font-size: 4rem;
	}
}

/* --------------------------------------------------------
   Ultra small (≤475px)
   -------------------------------------------------------- */
@media (max-width: 475px) {
	.hello-movieengine-header__search {
		display: flex !important;
	}
}