/**
 * Seyleniya Cinnamon - responsive refinements (blueprint §35).
 *
 * Everything above this file is the mobile layout. These are min-width
 * queries only, so a narrow viewport never has to undo a desktop rule.
 *
 *   640px   large phone / small tablet - two-column grids appear
 *   900px   tablet landscape - desktop navigation replaces the drawer
 *   1200px  desktop - full editorial scale
 */

/* ==================================================================
 * 640px - two columns
 * ============================================================== */

@media (min-width: 40em) {

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

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

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

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

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

/* ==================================================================
 * 900px - desktop navigation and editorial splits
 * ============================================================== */

@media (min-width: 56.25em) {

	/* The drawer is a mobile affordance only; from here the real nav shows. */
	.sy-nav {
		display: block;
	}

	/* Room for the CTA at last. Matching specificity, and this file loads
	 * after components.css, so it wins on order. */
	.sy-header .sy-header__cta {
		display: inline-flex;
	}

	.sy-header__inner {
		gap: var(--sy-space-md);
	}

	.sy-menu-toggle {
		display: none;
	}

	.sy-mobile-nav {
		display: none;
	}

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

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

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

	/* Editorial split: image and copy side by side. */
	.sy-split {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(2rem, 1rem + 4vw, 5rem);
	}

	/* Media leads on the left by default; --reverse puts copy first while
	 * keeping the image first in the DOM for a sensible reading order. */
	.sy-split--reverse .sy-split__media {
		order: 2;
	}

	.sy-split--wide-media {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	}

	.sy-split--wide-copy {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	}

	.sy-hero__inner {
		max-width: 34rem;
	}

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

	.sy-footer__grid {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--sy-space-lg);
	}

	.sy-page-hero {
		padding-block: var(--sy-space-3xl) var(--sy-space-2xl);
	}
}

/* ==================================================================
 * 1200px - full editorial scale
 * ============================================================== */

@media (min-width: 75em) {

	.sy-hero {
		min-height: min(52rem, 90svh);
	}

	.sy-hero__inner {
		max-width: 38rem;
	}

	/*
	 * The journal's lead article spans two columns and gets a wider crop.
	 *
	 * Only from four posts up. The 2x2 hero needs cards beside and beneath it
	 * to sit against; with one or two posts it produces a single enormous card
	 * marooned in empty space. :nth-last-child(n+4) on the first card is true
	 * only when at least three siblings follow it.
	 */
	.sy-journal__grid--featured:has(> .sy-card:nth-child(4)) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.sy-journal__grid--featured > .sy-card:first-child:nth-last-child(n + 4) {
		grid-column: span 2;
		grid-row: span 2;
	}

	.sy-journal__grid--featured > .sy-card:first-child:nth-last-child(n + 4) .sy-card__media {
		aspect-ratio: 16 / 10;
	}

	.sy-journal__grid--featured > .sy-card:first-child:nth-last-child(n + 4) .sy-card__title {
		font-size: var(--sy-display-sm);
	}
}

/* ==================================================================
 * Coarse pointers - touch comfort (blueprint §35)
 * ============================================================== */

@media (pointer: coarse) {

	/* Hover lifts are meaningless on touch and cause sticky-hover artefacts. */
	.sy-card:hover {
		transform: none;
		box-shadow: none;
	}

	.sy-card:hover .sy-card__media img {
		transform: none;
	}

	/* Every tappable target clears 44px. */
	.sy-nav a,
	.sy-footer a,
	.sy-journal__filter {
		min-height: 2.75rem;
		display: inline-flex;
		align-items: center;
	}
}

/* ==================================================================
 * Very narrow viewports - the hero must still read (blueprint §35)
 * ============================================================== */

@media (max-width: 22.5em) {

	.sy-hero__title {
		font-size: var(--sy-display-md);
	}

	/*
	 * The wordmark is uppercase with wide tracking, so it is the widest thing
	 * in the header after the CTA. Tightening it here keeps the menu toggle on
	 * screen at 320px.
	 */
	.sy-brand__name {
		font-size: var(--sy-text-base);
		letter-spacing: 0.1em;
	}

	.sy-brand__mark {
		width: 1.65rem;
	}

	/*
	 * A submit button is a CTA like any other, so it goes full width on a
	 * narrow screen with the rest of them rather than sitting half-width and
	 * looking like an afterthought.
	 */
	.sy-btn,
	input[type="submit"],
	button[type="submit"],
	.forminator-button-submit {
		width: 100%;
	}

	.sy-btn-group {
		flex-direction: column;
		align-items: stretch;
	}
}

/* ==================================================================
 * Narrow phones - the placeholder chip has to fit
 *
 * "PLACEHOLDER - BUSINESS TO PROVIDE" is 33 uppercase characters with wide
 * tracking, and `white-space: nowrap` makes it the widest unbreakable thing in
 * a section. At 320px the frame it sits in is about 232px wide, and the tag
 * alone wants roughly 238px - so it is tightened here, and allowed to wrap on
 * the very narrowest screens where nothing else will do.
 * ============================================================== */

@media (max-width: 30em) {

	.sy-placeholder__tag {
		font-size: 0.5625rem;
		letter-spacing: 0.08em;
	}
}

@media (max-width: 22.5em) {

	.sy-placeholder__tag {
		white-space: normal;
	}
}