/**
 * Styles for arctic-trucks/shop-menu-categories (v2).
 *
 * This file holds only the wrapper concerns: the column grid, the "Alle
 * produkter" CTA footer, the is-style-landing overrides, and responsive
 * columns. The shared section styles (heading, list, link, images, see-all)
 * live in assets/menu-section.css (handle: arctic-trucks-menu-section) so
 * category-section / category-links can render them stand-alone too.
 *
 * Two block styles:
 *   - default («Mega-meny»): compact uppercase headings, dense link lists.
 *   - is-style-landing: larger typography; with "Vis kategoribilder" on,
 *     list items become image cards.
 *
 * Tokens from at-theme theme.json (with fallbacks for other contexts).
 *
 * @package Arctic_Trucks_Blocks
 */

.at-shop-menu-categories {
	display: grid;
	grid-template-columns: repeat(var(--at-menu-columns, 4), 1fr);
	gap: 2rem;
}

/* ---------- Column ---------- */

.at-shop-menu-categories__column {
	min-width: 0;
}

/* ---------- CTA (Alle produkter) — full-width footer row ---------- */

.at-shop-menu-categories__cta {
	grid-column: 1 / -1;
	margin-top: 0.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--light-grey, #e5e5e5);
}

.at-shop-menu-categories__cta-link {
	color: var(--wp--preset--color--original-blue, #0071ce);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color var(--wp--custom--transition--default, 150ms ease-in-out);
}

.at-shop-menu-categories__cta-link:hover,
.at-shop-menu-categories__cta-link:focus {
	color: var(--wp--preset--color--medium-blue, #004e8c);
}

/* ==========================================================================
   Landing style (is-style-landing) — larger typography; with images on,
   items read as cards. Scoped to the outer wrapper, so it only applies
   inside the menu/landing block (not to a stand-alone section).
   ========================================================================== */

.at-shop-menu-categories.is-style-landing {
	gap: 2.5rem;
}

.at-shop-menu-categories.is-style-landing .at-shop-menu-categories__heading {
	font-size: var(--wp--preset--font-size--body, 1rem);
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--wp--preset--color--black, #101012);
	margin-bottom: 1rem;
}

.at-shop-menu-categories.is-style-landing .at-shop-menu-categories__list {
	font-size: 1rem;
	line-height: 2.4;
}

.at-shop-menu-categories.is-style-landing .at-shop-menu-categories__list--images {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	line-height: 1.4;
}

.at-shop-menu-categories.is-style-landing .at-shop-menu-categories__list--images .at-shop-menu-categories__link {
	gap: 1rem;
	padding: 0.5rem;
	margin: -0.5rem;
	border-radius: var(--wp--custom--border-radius--default, 12px);
	transition: background-color var(--wp--custom--transition--default, 150ms ease-in-out);
}

.at-shop-menu-categories.is-style-landing .at-shop-menu-categories__list--images .at-shop-menu-categories__link:hover,
.at-shop-menu-categories.is-style-landing .at-shop-menu-categories__list--images .at-shop-menu-categories__link:focus {
	background-color: var(--wp--preset--color--lightest-grey, #fafafa);
}

.at-shop-menu-categories.is-style-landing .at-shop-menu-categories__image {
	width: 64px;
	height: 64px;
	border-radius: var(--wp--custom--border-radius--default, 12px);
}

.at-shop-menu-categories.is-style-landing .at-shop-menu-categories__see-all,
.at-shop-menu-categories.is-style-landing .at-shop-menu-categories__cta-link {
	font-size: 0.875rem;
}

/* ---------- Responsive ---------- */

@media (max-width: 781px) {
	.at-shop-menu-categories {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.at-shop-menu-categories {
		grid-template-columns: 1fr;
	}
}