/**
 * Pencl — responsive styles.
 *
 * style.css is written for desktop. This file narrows it down, largest
 * breakpoint first. Breakpoints line up with the Bootstrap grid
 * (md 768px, lg 992px) plus the design's own 1050px collapse point.
 *
 *   1. Small desktop / tablet landscape  ≤ 1049px
 *   2. Tablet portrait                   ≤ 991px
 *   3. WordPress admin bar               (→ assets/css/global.css)
 *   4. Large phone / small tablet        ≤ 767px
 *   5. Phone                             ≤ 575px
 */


/* ==========================================================================
   1. Small desktop / tablet landscape (≤ 1049px)
   Page gutters tighten. (The header's own breakpoints are in assets/css/global.css.)
   ========================================================================== */
@media (max-width: 1049.98px) {

	/* ---- Global ---- */
	:root {
		--pc-pad: 22px;
	}

	.band,
	.band--tint,
	.band--dark,
	.cta-band {
		padding: 64px 0;
	}

	/* ---- Homepage V3 ---- */
	.hero {
		padding-bottom: 0;
	}

	.loop-band {
		padding: 30px 0 36px;
	}

	.card-grid {
		margin-top: calc(32px - var(--bs-gutter-y));
	}

	.columns-grid {
		margin-top: calc(40px - var(--bs-gutter-y));
	}

	/* ---- Quick Verdict: inputs above the verdict ---- */
	.qv {
		padding: calc(var(--site-header-h) + 48px) 0 72px;
	}

	.qv-card {
		grid-template-columns: 1fr;
	}

	/* ---- Blog Listing ---- */
	.blog-head {
		padding-bottom: 48px;
	}

	/* ---- Blog Detail ---- */
	.article-head {
		padding: 40px 0 44px;
	}

	.single-post .article-head {
		padding-top: calc(var(--site-header-h) + 40px);
	}

	.article-head.has-hero {
		padding-bottom: 128px;
	}

	.article-hero {
		margin-top: -96px;
	}

	/* ---- Legal & default pages ---- */
	.doc-head {
		padding-bottom: 44px;
	}

	.doc-band {
		padding-top: 48px;
	}
}

/* ==========================================================================
   2. Tablet portrait (≤ 991px) — Bootstrap grids stack to 1–2 columns
   ========================================================================== */
@media (max-width: 991.98px) {

	/* ---- Blogs filter panel (stacked above the posts): categories in two columns ---- */
	.cat-filter__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 28px;
	}

	/* ---- Homepage V3 ---- */
	.verdict__head {
		gap: 28px 40px;
	}

	.founding__copy {
		flex-basis: 100%;
	}
}


/* ==========================================================================
   3. WordPress admin bar offsets for the sticky header: assets/css/global.css
   ========================================================================== */


/* ==========================================================================
   4. Large phone / small tablet (≤ 767px)
   ========================================================================== */
@media (max-width: 767.98px) {

	/* ---- Homepage V3 ---- */
	.verdict__ring,
	.verdict__ring svg {
		width: 168px;
		height: 168px;
	}

	.verdict__num {
		font-size: 44px;
	}

	.verdict__copy {
		text-align: center;
	}

	.article-hero {
		margin-bottom: 36px;
	}

	.prose--article {
		font-size: 18.5px;
		line-height: 1.68;
	}

	/* ---- Legal & default pages ---- */
	.doc-body {
		padding: 36px 32px 40px;
	}

	/* ---- Import ---- */
	.imp-intro__inner {
		padding-block: 36px 32px;
	}

	.imp-intro__title {
		font-size: 34px;
	}

	.imp-intro__lead {
		font-size: 18px;
	}

	.imp-recon__title {
		font-size: 28px;
	}

	.imp-h2--lg {
		font-size: 26px;
	}

	.imp-h2--apply {
		font-size: 23px;
	}
}


/* ==========================================================================
   5. Phone (≤ 575px)
   ========================================================================== */
@media (max-width: 575.98px) {

	/* ---- Blogs filter panel: one category per row ---- */
	.cat-filter__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.blog-filter {
		gap: 22px;
		padding: 20px;
	}

	/* ---- Global ---- */
	.band,
	.band--tint,
	.band--dark,
	.cta-band {
		padding: 56px 0;
	}

	.btn-row {
		gap: 16px 22px;
	}

	.section-intro {
		font-size: 19px;
	}

	/* ---- Homepage V3 ---- */
	.hero {
		padding-bottom: 0;
	}

	.hero__text {
		font-size: 16px;
	}

	.napkin {
		margin-top: 40px;
	}

	.loop-band {
		padding: 24px 0 30px;
	}

	.pc-card,
	.pc-card--tint {
		padding: 24px 22px;
	}

	.pc-card--list {
		padding: 26px 22px;
	}

	.founding {
		padding: 24px 22px;
	}

	.plan {
		padding: 30px 24px;
	}

	.plan__amount {
		font-size: 42px;
	}

	/* ---- Quick Verdict ---- */
	.qv-form {
		padding: 28px 22px 32px;
	}

	.qv-result {
		padding: 36px 22px 28px;
	}

	.qv-field__input {
		font-size: 18px;
	}

	/* ---- Blog Listing ---- */
	.blog-head {
		padding-bottom: 40px;
	}

	/* ---- Blog Detail ---- */
	.article-head {
		padding: 32px 0 36px;
	}

	.single-post .article-head {
		padding-top: calc(var(--site-header-h) + 32px);
	}

	.article-head.has-hero {
		padding-bottom: 88px;
	}

	.article-hero {
		margin-top: -64px;
	}

	.article-hero img {
		border-radius: 14px;
	}

	.article-meta {
		gap: 16px 0;
	}

	.article-meta > li {
		padding: 0 18px;
	}

	.article-meta > .article-meta__author {
		flex-basis: 100%;
		padding-left: 0;
	}

	.article-meta > .article-meta__author + li {
		padding-left: 0;
		border-left: 0;
	}

	.article-foot {
		padding-bottom: 56px;
	}


	/* ---- Blog cards (listing, archives, related posts) ---- */
	.post-card__body {
		padding: 22px 22px 24px;
	}

	.post-card__title {
		font-size: 20px;
	}

	/* ---- Legal & default pages ---- */
	.doc-head {
		padding-bottom: 36px;
	}

	.doc-band {
		padding-top: 32px;
	}

	.doc-body {
		padding: 28px 22px 32px;
		border-radius: 16px;
	}

	.doc-body {
		--doc-gap: 16px;
		font-size: 17px;
	}

	.doc-body h2 {
		font-size: 21px;
	}

	.doc-body h2:not(:first-child) {
		margin-top: 36px;
		padding-top: 28px;
	}

	/* ---- 404 ---- */
	.error-404 {
		padding: calc(var(--site-header-h) + 56px) 0 56px;
	}

	.error-404__text {
		font-size: 18px;
	}

	/* ---- Import ---- */
	.imp-drop {
		padding: 26px 18px;
	}

	.imp-card,
	.imp-box,
	.imp-box--green {
		padding: 18px;
	}

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

	.imp-ai__copy,
	.imp-toggle__hint {
		min-width: 0;
	}
}