/* ==========================================================================
   Раскладка: контейнер, сетка, секции, шапка, подвал
   ========================================================================== */

@layer layout {

	.al-container {
		width: 100%;
		max-width: var(--al-container);
		margin-inline: auto;
		padding-inline: var(--al-gutter);
	}

	.al-main { display: block; }

	.al-section { padding-block: var(--al-section) 0; }
	/* Если у раздела нет описания, между h1 и первой секцией был провал
	   почти в полтора заголовка. */
	.al-product-hero:not(:has(.al-prose)) + .al-section,
	.al-product-hero:not(:has(.al-prose)) ~ * .al-section:first-child { padding-top: var(--al-s-6); }
	.al-section__title {
		font-size: var(--al-fs-h2);
		margin-bottom: var(--al-s-6);
		text-align: center;
	}

	/* --- Сетка вместо Bootstrap: он приходил из чужого 506-килобайтного файла --- */
	/* auto-fit, а не auto-fill: при двух подрубриках («Сетки на двери» и
	   «Сетки на окна») auto-fill создавал четыре колонки и две оставались
	   пустыми — половина экрана была белой. auto-fit схлопывает пустые
	   дорожки, и карточки заполняют строку. */
	.al-grid {
		display: grid;
		gap: var(--al-s-5);
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	}
	.al-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
	.al-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
	.al-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

	/* На телефоне карточки шли в одну колонку: девять плиток каталога
	   растягивали главную до одиннадцати тысяч пикселей, и до формы заявки
	   никто не доскроллил бы. Две колонки — вдвое короче. */
	@media (max-width: 599px) {
		.al-grid, .al-grid--2, .al-grid--3, .al-grid--4 {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: var(--al-s-3);
		}
	}

	/* --- Верхняя полоса --- */
	.al-topbar {
		background: var(--al-ink);
		color: rgba(255,255,255,.92);
		font-size: var(--al-fs-sm);
	}
	.al-topbar__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--al-s-4);
		min-height: 44px;
		flex-wrap: wrap;
	}
	.al-topbar__contacts { display: flex; align-items: center; gap: var(--al-s-5); flex-wrap: wrap; }
	.al-topbar__link {
		display: inline-flex; align-items: center; gap: var(--al-s-2);
		color: rgba(255,255,255,.92); text-decoration: none; min-height: 44px;
	}
	.al-topbar__link:hover { color: #fff; }
	.al-topbar__link img { filter: brightness(0) invert(1); opacity: .85; }
	.al-topbar__hours { color: rgba(255,255,255,.65); }

	/* --- Шапка -------------------------------------------------------------
	   Раньше шапка была трёхэтажной: строка «логотип + поиск» с пустотой
	   посередине и под ней две одинаковые полосы меню. Теперь верхняя строка
	   заполнена (логотип — разделы — поиск — кнопка заявки), а каталог идёт
	   отдельной светлой полосой: это главный ряд ссылок, его видно сразу.
	   Шапка липкая ВСЕГДА. Раньше position:sticky включался классом при
	   прокрутке — в этот момент шапка выпрыгивала наверх и накрывала текст. */
	.al-header {
		position: sticky;
		top: 0;
		z-index: 100;
		background: var(--al-surface);
		border-bottom: 1px solid var(--al-line);
		transition: box-shadow var(--al-t), background-color var(--al-t);
	}
	body.al-scrolled .al-header {
		box-shadow: var(--al-shadow-sm);
		background: rgba(255,255,255,.97);
		backdrop-filter: saturate(1.1) blur(8px);
	}

	.al-header__inner {
		display: flex;
		align-items: center;
		gap: var(--al-s-5);
		padding-block: var(--al-s-3);
		min-height: 76px;
	}
	.al-logo { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; }
	/* У логотипа SVG нет собственных размеров: при width:auto он схлопывается в ноль */
	.al-logo__img { height: 46px; width: auto; max-width: min(200px, 100%); object-fit: contain; display: block; }

	.al-header__search { flex: 0 0 clamp(180px, 20vw, 260px); min-width: 0; }
	.al-header__cta { flex: 0 0 auto; white-space: nowrap; }

	/* --- Навигация --- */
	.al-menu {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--al-s-1);
		margin: 0;
	}
	.al-menu__item { position: relative; }
	.al-menu__link {
		display: inline-flex; align-items: center; gap: var(--al-s-2);
		padding: var(--al-s-2) var(--al-s-3);
		min-height: 40px;
		font-size: var(--al-fs-sm);
		font-weight: 600;
		line-height: 1.25;
		/* Раньше здесь был text-transform:uppercase. Эстонские составные слова
		   («Horisontaalsed ribakardinad») в верхнем регистре не помещались
		   в строку и рвали полосу меню на два этажа. */
		text-decoration: none;
		color: var(--al-ink);
		border-radius: var(--al-r-sm);
		transition: background-color var(--al-t), color var(--al-t);
	}
	.al-menu__link:hover { background: var(--al-surface-alt); color: var(--al-brand); }
	.al-menu__item.is-current > .al-menu__link { color: var(--al-brand); }
	.al-menu__icon { width: 20px; height: 20px; object-fit: contain; flex: 0 0 auto; }

	/* Разделы сайта — второстепенные ссылки, прижаты к поиску */
	.al-nav--primary {
		flex: 1 1 auto;
		min-width: 0;
	}
	.al-nav--primary .al-menu {
		flex-wrap: nowrap;
		justify-content: flex-end;
		gap: 2px;
	}
	.al-nav--primary .al-menu__link {
		font-size: 14px;
		font-weight: 500;
		color: var(--al-ink-500);
		white-space: nowrap;
	}
	.al-nav--primary .al-menu__link:hover,
	.al-nav--primary .al-menu__item.is-current > .al-menu__link { color: var(--al-brand); }

	/* Каталог — главный ряд: отдельная полоса под шапкой */
	.al-nav--catalog { background: var(--al-surface-alt); border-top: 1px solid var(--al-line); }
	.al-nav--catalog .al-menu { gap: var(--al-s-1); padding-block: 2px; }
	.al-nav--catalog .al-menu__link {
		font-size: 14px;
		font-weight: 600;
		min-height: 46px;
		position: relative;
		border-radius: 0;
	}
	.al-nav--catalog .al-menu__link:hover { background: transparent; }
	/* Подчёркивание вместо заливки: полоса остаётся ровной, ничего не «прыгает» */
	.al-nav--catalog .al-menu__link::after {
		content: "";
		position: absolute; left: var(--al-s-3); right: var(--al-s-3); bottom: 0;
		height: 2px; background: var(--al-brand);
		transform: scaleX(0); transform-origin: left;
		transition: transform var(--al-t);
	}
	.al-nav--catalog .al-menu__link:hover::after,
	.al-nav--catalog .al-menu__item.is-current > .al-menu__link::after { transform: scaleX(1); }

	/* Подменю на десктопе */
	.al-menu__sub {
		position: absolute;
		top: 100%; left: 0;
		z-index: 60;
		min-width: 240px;
		padding: var(--al-s-2);
		background: var(--al-surface);
		border: 1px solid var(--al-line);
		border-radius: var(--al-r);
		box-shadow: var(--al-shadow-lg);
		display: none;
	}
	.al-menu__item--parent:hover > .al-menu__sub,
	.al-menu__item--parent:focus-within > .al-menu__sub { display: block; }
	.al-menu__sub .al-menu__link { width: 100%; font-weight: 500; }

	/* --- Подвал --- */
	.al-footer {
		margin-top: var(--al-section);
		background: var(--al-ink);
		color: rgba(255,255,255,.78);
	}
	.al-footer a { color: rgba(255,255,255,.78); text-decoration: none; }
	.al-footer a:hover { color: #fff; }
	.al-footer__grid {
		display: grid;
		gap: var(--al-s-7);
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
		padding-block: var(--al-s-8);
	}
	.al-footer__heading {
		font-size: var(--al-fs-sm);
		text-transform: uppercase;
		letter-spacing: .08em;
		color: #fff;
		margin-bottom: var(--al-s-4);
	}
	.al-footer .al-menu { flex-direction: column; align-items: flex-start; gap: 0; }
	.al-footer .al-menu__link {
		text-transform: none; letter-spacing: 0; font-weight: 400;
		color: rgba(255,255,255,.78); padding-inline: 0;
	}
	.al-footer .al-menu__link:hover { background: none; color: #fff; }
	.al-footer__logo { height: 42px; width: auto; max-width: 200px; object-fit: contain; margin-bottom: var(--al-s-4); filter: brightness(0) invert(1); }
	.al-footer__legal { font-size: var(--al-fs-sm); line-height: 1.5; margin-bottom: var(--al-s-3); }
	/* Телефон и почта стояли встык в одну строку: обе ссылки inline-flex,
	   между ними был только перенос строки в разметке. */
	.al-footer__phone, .al-footer__mail {
		display: flex; align-items: center; gap: var(--al-s-2);
		width: fit-content;
		min-height: 44px; font-weight: 600; color: #fff;
	}
	.al-footer__col--brand { display: flex; flex-direction: column; align-items: flex-start; }
	.al-footer__phone img { filter: brightness(0) invert(1); }
	.al-footer__bottom {
		border-top: 1px solid rgba(255,255,255,.12);
		font-size: var(--al-fs-sm);
	}
	.al-footer__bottom .al-container {
		display: flex; align-items: center; justify-content: space-between;
		gap: var(--al-s-4); flex-wrap: wrap; padding-block: var(--al-s-4);
	}
	/* Пункты «Условия» и «Политика» слипались в одну строку без пробела */
	.al-footer__bottom .al-menu { flex-direction: row; gap: var(--al-s-4); flex-wrap: wrap; }
	.al-footer__bottom .al-menu__link { padding: var(--al-s-2) 0; min-height: 36px; }

	/* --- Ноутбук: поиск уступает место разделам --- */
	@media (max-width: 1199px) {
		.al-header__inner { gap: var(--al-s-4); }
		.al-header__search { display: none; }
		/* Полоса каталога вместо переноса на два этажа — прокрутка вбок */
		.al-nav--catalog .al-menu {
			flex-wrap: nowrap;
			overflow-x: auto;
			scrollbar-width: none;
			-webkit-overflow-scrolling: touch;
		}
		.al-nav--catalog .al-menu::-webkit-scrollbar { display: none; }
		.al-nav--catalog .al-menu__link { white-space: nowrap; }
	}

	/* --- Планшет: разделы уходят в бургер, поиск возвращается --- */
	@media (max-width: 1023px) {
		.al-burger { display: block; }
		.al-nav--primary { display: none; }
		.al-header__search { display: block; flex: 1 1 auto; max-width: 320px; margin-left: auto; }
		.al-menu__link { padding-inline: var(--al-s-3); }
	}

	/* --- Телефон --- */
	@media (max-width: 767px) {
		.al-nav { display: none; }
		.al-header__search { display: none; }
		.al-header__inner { gap: var(--al-s-3); padding-block: var(--al-s-3); min-height: 60px; }
		.al-logo { margin-inline: auto; }
		.al-logo__img { height: 38px; }
		.al-header__cta { min-height: 40px; padding-inline: var(--al-s-4); font-size: 14px; }

		/* Верхняя полоса переносилась на две строки: телефон с запросом
		   сверху, переключатель языка снизу. Ставим в один ряд. */
		.al-topbar { font-size: 14px; }
		.al-topbar__inner { flex-wrap: nowrap; gap: var(--al-s-2); min-height: 40px; }
		.al-topbar__contacts { gap: var(--al-s-3); flex-wrap: nowrap; min-width: 0; }
		.al-topbar__hours { display: none; }
		.al-topbar__link { min-height: 40px; white-space: nowrap; }
		/* «Отправить запрос» оставляем иконкой: текст не влезает рядом с телефоном */
		.al-topbar__contacts .al-topbar__link:nth-child(2) span { display: none; }
		.al-topbar__lang { flex: 0 0 auto; }
		.al-topbar__lang a span { display: none; }

		/* На телефоне подвал — одна колонка во всю высоту экрана, и текст,
		   прижатый к левому краю, выглядел обрывком. Выравниваем по центру:
		   блок читается как подпись, а не как незакрытая колонка. */
		.al-footer__grid { padding-block: var(--al-s-7); gap: var(--al-s-6); text-align: center; }
		.al-footer__col--brand { align-items: center; }
		.al-footer__logo { margin-inline: auto; }
		.al-footer__phone, .al-footer__mail { margin-inline: auto; }
		.al-footer .al-menu { align-items: center; }
		.al-footer .al-socials { justify-content: center; }
		.al-footer__bottom .al-container { justify-content: center; text-align: center; }
		.al-footer__bottom .al-menu { justify-content: center; }
	}
}