@use "variables" as *;

// ---------------------------------------------------------------------------
// .inner — gutter layer. Full width with a minimum side gutter so content
//          never touches the screen edge. PC 50px / SP 20px.
// ---------------------------------------------------------------------------
.inner {
	width: 100%;
	padding-inline: $inner-pad-pc; // PC 50

	@include tab {
		padding-inline: rem(30); // tablet (<=1024) 30
	}

	@include sp {
		padding-inline: $inner-pad-sp; // SP (<=768) 20
	}
}

// ---------------------------------------------------------------------------
// .inner-box — content cap. Centered, max-width capped. Several patterns.
//   .inner-box           default 1240
//   .inner-box--narrow   1024 (article / text column — 208 inset @1440)
//   .inner-box--wide     1440 (full design-frame width)
// Place inside .inner:  <div class="inner"><div class="inner-box"> … </div></div>
// ---------------------------------------------------------------------------
.inner-box {
	width: 100%;
	max-width: $box-width;
	margin-inline: auto;
}

.inner-box--narrow {
	max-width: $box-width-narrow;
}

.inner-box--wide {
	max-width: $box-width-wide;
}

// Full-bleed background band that breaks out to the viewport edges while its
// child keeps the .inner / .inner-box column. Apply to a section wrapper.
.bleed {
	width: 100%;
}

// ---------------------------------------------------------------------------
// Grid common classes
//   .grid + .grid--3 / --4 / --2  with design gaps. Collapses to 1 col on SP.
// ---------------------------------------------------------------------------
.grid {
	display: grid;
	gap: $grid-gap-pc;

	@include sp {
		gap: $grid-gap-sp;
	}
}

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

.grid--3 {
	grid-template-columns: repeat(3, 1fr);
	gap: $grid-gap-pc; // 40px (design)
}

.grid--4 {
	grid-template-columns: repeat(4, 1fr);
	gap: $grid-gap-pc-sm; // 20px (design)
}

// All multi-column grids drop to a single column on SP by default.
.grid--2,
.grid--3,
.grid--4 {
	@include sp {
		grid-template-columns: 1fr;
		gap: $grid-gap-sp;
	}
}

// Opt-in: keep 2 columns on SP (e.g. compact card lists).
.grid--sp-2 {
	@include sp {
		grid-template-columns: repeat(2, 1fr);
	}
}

// Simple flex row helper (centered items, wraps).
.flex {
	display: flex;
	gap: $grid-gap-pc;

	@include sp {
		gap: $grid-gap-sp;
	}
}

.flex--center {
	align-items: center;
	justify-content: center;
}

.flex--between {
	align-items: center;
	justify-content: space-between;
}

.flex--wrap {
	flex-wrap: wrap;
}