/* ==========================================================
   PetrolPress
   13 – Responsive

   Responsive orchestration layer for the PetrolPress design
   system. Component files own their base styles; this file
   coordinates layout changes across breakpoints.
========================================================== */


/* ==========================================================
   LARGE VIEWPORTS: 1440px+
========================================================== */

@media (min-width: 1440px) {
	.container,
	.site-container {
		width: min(
			calc(100% - (2 * var(--container-padding))),
			var(--pp-container-width, var(--container-width))
		);
	}

	.card-grid-4,
	.grid-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}


/* ==========================================================
   COMPACT DESKTOP: 1200px AND BELOW
========================================================== */

@media (max-width: 1200px) {
	.container,
	.container-wide,
	.container-narrow,
	.site-container {
		padding-inline: clamp(1.25rem, 3vw, 2rem);
	}

	.grid-4,
	.card-grid-4 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.content-sidebar-layout,
	.sidebar-layout,
	.content-layout {
		grid-template-columns:
			minmax(0, 1fr)
			minmax(240px, var(--pp-sidebar-width, var(--sidebar-width)));
		gap: clamp(2rem, 4vw, 3.5rem);
	}

	.petrolpress-layout-left-sidebar .content-sidebar-layout,
	.petrolpress-layout-left-sidebar .sidebar-layout,
	.petrolpress-layout-left-sidebar .content-layout {
		grid-template-columns:
			minmax(240px, var(--pp-sidebar-width, var(--sidebar-width)))
			minmax(0, 1fr);
	}
}


/* ==========================================================
   TABLET / SMALL DESKTOP: 1024px AND BELOW
========================================================== */

@media (max-width: 1024px) {
	.grid-3,
	.card-grid-3,
	.grid-4,
	.card-grid-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.archive-grid,
	.archive-grid--2-columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/*
	 * Sidebar layouts become a single content flow on tablet.
	 * The configured sidebar remains available below the main content.
	 */
	.petrolpress-layout-right-sidebar .content-sidebar-layout,
	.petrolpress-layout-right-sidebar .sidebar-layout,
	.petrolpress-layout-right-sidebar .content-layout,
	.petrolpress-layout-left-sidebar .content-sidebar-layout,
	.petrolpress-layout-left-sidebar .sidebar-layout,
	.petrolpress-layout-left-sidebar .content-layout,
	.content-sidebar-layout,
	.sidebar-layout,
	.content-layout,
	.grid-main-sidebar,
	.grid-sidebar-main {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"main"
			"sidebar";
		gap: clamp(2rem, 6vw, 3.5rem);
	}

	.content-sidebar-layout > .sidebar,
	.content-sidebar-layout > .widget-area,
	.sidebar-layout > .sidebar,
	.sidebar-layout > .widget-area,
	.content-layout > .sidebar,
	.content-layout > .widget-area,
	.sidebar {
		order: 2;
		width: 100%;
		max-width: none;
	}

	.sidebar-sticky {
		position: static;
		top: auto;
	}

	.petrolpress-layout-no-sidebar .content-sidebar-layout,
	.petrolpress-layout-no-sidebar .sidebar-layout,
	.petrolpress-layout-no-sidebar .content-layout,
	.petrolpress-layout-full-width .content-sidebar-layout,
	.petrolpress-layout-full-width .sidebar-layout,
	.petrolpress-layout-full-width .content-layout {
		grid-template-areas: "main";
	}

	.petrolpress-layout-no-sidebar .site-main {
		width: min(100%, var(--pp-content-width, var(--content-width)));
		margin-inline: auto;
	}

	.petrolpress-layout-full-width .site-main {
		width: 100%;
		max-width: none;
	}

	.entry-featured-image {
		margin-top: calc(var(--space-7) * -1);
	}

	.header-actions .btn {
		display: none;
	}
}


/* ==========================================================
   TABLET PORTRAIT: 900px AND BELOW
========================================================== */

@media (max-width: 900px) {
	html {
		scroll-padding-top: 5.5rem;
	}

	.site-main {
		overflow: clip;
	}

	.grid-2,
	.split,
	.split-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.archive-hero-content,
	.entry-hero-content {
		max-width: min(100%, var(--pp-content-width, 760px));
	}

	.section-header,
	.section-header-centered {
		max-width: min(100%, var(--pp-content-width, 760px));
	}

	.footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}


/* ==========================================================
   WORDPRESS / MOBILE BREAKPOINT: 782px AND BELOW
========================================================== */

@media (max-width: 782px) {
	body.admin-bar .site-header.is-fixed,
	body.admin-bar .site-header.is-sticky {
		top: 46px;
	}

	.container,
	.container-wide,
	.container-narrow,
	.site-container {
		width: 100%;
		padding-inline: clamp(1rem, 4vw, 1.25rem);
	}

	.alignwide,
	.entry-content > .alignwide {
		width: 100%;
		margin-inline: 0;
	}

	.section,
	.site-section,
	.entry-hero,
	.archive-hero {
		padding-block: clamp(3rem, 8vw, 4.5rem);
	}

	.section-lg {
		padding-block: clamp(4rem, 10vw, 6rem);
	}

	.section-header,
	.section-header-centered {
		align-items: flex-start;
		flex-direction: column;
		gap: var(--space-4);
		margin-bottom: var(--space-7);
		text-align: left;
	}

	.section-header-centered .eyebrow,
	.section-header-centered .section-eyebrow {
		justify-content: flex-start;
	}

	.section-actions {
		width: 100%;
	}

	.section-title {
		font-size: clamp(2rem, 8vw, 3rem);
	}

	.entry-content {
		font-size: 1rem;
	}

	.entry-content > * {
		max-width: 100%;
	}

	.entry-content .alignwide,
	.entry-content .alignfull {
		width: 100%;
		margin-inline: 0;
	}

	.post-navigation .nav-links {
		grid-template-columns: minmax(0, 1fr);
	}

	.comment-list .children {
		margin-left: var(--space-4);
	}

	.footer-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* ==========================================================
   MOBILE: 640px AND BELOW
========================================================== */

@media (max-width: 640px) {
	:root {
		--form-control-height: 50px;
	}

	body {
		font-size: 1rem;
	}

	h1 {
		font-size: clamp(2.25rem, 12vw, 3.5rem);
	}

	h2 {
		font-size: clamp(1.8rem, 9vw, 2.6rem);
	}

	h3 {
		font-size: clamp(1.4rem, 7vw, 2rem);
	}

	.container,
	.container-wide,
	.container-narrow,
	.site-container {
		padding-inline: 1rem;
	}

	.grid,
	.grid-2,
	.grid-3,
	.grid-4,
	.grid-5,
	.card-grid,
	.card-grid-2,
	.card-grid-3,
	.card-grid-4,
	.post-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.archive-grid,
	.archive-grid--2-columns {
		grid-template-columns: minmax(0, 1fr);
	}

	.post-card__footer {
		align-items: flex-start;
		flex-direction: column;
		gap: var(--space-2);
	}

	.archive-hero-title,
	.entry-hero-title {
		font-size: clamp(2.3rem, 12vw, 3.5rem);
	}

	.entry-hero-meta {
		align-items: flex-start;
		flex-direction: column;
		gap: var(--space-2);
	}

	.entry-featured-image {
		margin-top: calc(var(--space-5) * -1);
	}

	.card-media,
	.post-card-image {
		aspect-ratio: 16 / 10;
	}

	.card-body,
	.post-card-content {
		padding: var(--space-5);
	}

	.newsletter-box {
		padding: var(--space-5);
	}

	.newsletter-form,
	.search-form {
		align-items: stretch;
		flex-direction: column;
	}

	.newsletter-form .btn,
	.newsletter-form button[type="submit"] {
		width: 100%;
	}

	.search-form .search-submit {
		position: static;
		width: 100%;
		height: var(--form-control-height);
		border-radius: var(--radius-pill);
		transform: none;
	}

	.search-form .search-submit:hover {
		transform: none;
	}

	.footer-main {
		padding-block: 3.5rem;
	}

	.footer-bottom-inner {
		align-items: flex-start;
		flex-direction: column;
		gap: var(--space-4);
	}

	.legal-menu {
		justify-content: flex-start;
	}

	.wp-block-columns {
		flex-wrap: wrap !important;
	}

	.wp-block-column {
		flex-basis: 100% !important;
	}

	.wp-block-buttons {
		align-items: stretch;
		flex-direction: column;
	}

	.wp-block-button,
	.wp-block-button__link {
		width: 100%;
	}
}


/* ==========================================================
   SMALL MOBILE: 420px AND BELOW
========================================================== */

@media (max-width: 420px) {
	.container,
	.container-wide,
	.container-narrow,
	.site-container {
		padding-inline: 0.875rem;
	}

	.site-title {
		font-size: 1.15rem;
	}

	.section-title {
		font-size: clamp(1.9rem, 10vw, 2.65rem);
	}

	.btn {
		min-height: 48px;
		padding-inline: 1rem;
	}

	.card-body,
	.post-card-content,
	.form-card,
	.newsletter-box,
	.footer-newsletter {
		padding: var(--space-4);
	}

	.badge {
		font-size: 0.72rem;
	}

	.pagination .page-numbers {
		min-width: 2.35rem;
		height: 2.35rem;
	}

	.comment-list .children {
		margin-left: var(--space-2);
	}
}


/* ==========================================================
   POINTER / HOVER CAPABILITY
========================================================== */

@media (hover: none) {
	.card:hover,
	.btn:hover,
	.footer-social a:hover,
	.footer-menu a:hover {
		transform: none;
	}

	.card-overlay {
		opacity: 1;
	}

	.card-actions {
		opacity: 1;
		visibility: visible;
	}
}


/* ==========================================================
   PRINT
========================================================== */

@media print {
	.site-header,
	.site-footer,
	.hero__actions,
	.section-actions,
	.sidebar,
	.widget-area,
	.comments-area,
	.post-navigation,
	.pagination,
	.back-to-top,
	.newsletter-box,
	.footer-newsletter {
		display: none !important;
	}

	body {
		color: #000;
		background: #fff;
	}

	.site-main,
	.entry-content,
	.container,
	.site-container,
	.container-narrow,
	.container-wide {
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 0;
	}

	a {
		color: #000;
		text-decoration: underline;
	}

	.entry-content a[href]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
	}

	.card,
	.form-card,
	.entry-featured-image {
		box-shadow: none;
		border: 1px solid #ccc;
	}

	img {
		max-width: 100% !important;
		page-break-inside: avoid;
	}
}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================
   BLOG & ARCHIVE FOUNDATION
========================================================== */

@media (max-width: 1024px) {
	.archive-grid,
	.archive-grid--2-columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.archive-grid,
	.archive-grid--2-columns {
		grid-template-columns: minmax(0, 1fr);
	}

	.archive-toolbar {
		align-items: flex-start;
		flex-direction: column;
	}

	.archive-pagination__list {
		justify-content: flex-start;
	}
}

/* ==========================================================
   PREMIUM ARCHIVE TOOLBAR
========================================================== */

@media (max-width: 1024px) {
	.archive-toolbar {
		align-items: flex-start;
		flex-direction: column;
	}

	.archive-toolbar__controls,
	.archive-toolbar__form {
		width: 100%;
		justify-content: flex-start;
	}
}

@media (max-width: 640px) {
	.archive-toolbar__controls,
	.archive-toolbar__form {
		align-items: stretch;
		flex-direction: column;
	}

	.archive-toolbar__sort,
	.archive-toolbar__layout,
	.archive-toolbar__select,
	.archive-toolbar__submit {
		width: 100%;
		max-width: none;
	}

	.archive-toolbar__layout-options {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}