/* ==========================================================================
   Arte kamienie – sekcje strony głównej (inc/home.php i widżety Elementora)
   Hero → kafelki kamieni → kategorie → produkty z zakładkami → kolekcja → poznaj kamienie
   ========================================================================== */

.ak-main--home { padding-block: 0 24px; }

.ak-section { padding-block: 28px; }
.ak-section--band { margin-block: 28px; padding-block: 48px 56px; background: var(--ak-surface); border-block: 1px solid var(--ak-line); }

.ak-media { position: relative; display: block; overflow: hidden; }
.ak-media__img { width: 100%; height: 100%; object-fit: cover; }
.ak-media__fallback { position: absolute; inset: 0; display: grid; place-items: center; }
.ak-beads { display: block; max-width: 100%; height: auto; }

.ak-admin-hint { padding: 12px 16px; border: 1px dashed var(--ak-warn); border-radius: var(--ak-radius); background: var(--ak-warn-soft); color: var(--ak-warn); font-size: var(--ak-text-sm); }

/* Hero */
.ak-hero {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 32px 48px;
	padding-block: 40px 24px;
}
.ak-hero__text { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ak-hero__text .ak-eyebrow { margin: 0; }
.ak-hero__title { margin: 0; font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem); line-height: 1.08; letter-spacing: -0.01em; }
.ak-hero__lede { margin: 0; max-width: 46ch; font-size: var(--ak-text-lg); color: var(--ak-muted); }
.ak-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; }
.ak-hero__actions .ak-button { min-height: 52px; padding-inline: 28px; }
.ak-hero__media {
	flex: 1 1 480px;
	min-width: 0;
	aspect-ratio: 6 / 5;
	max-height: 460px;
	border-radius: var(--ak-radius-lg);
	background: var(--ak-stone);
}
.ak-hero__beads { position: relative; width: 100%; height: 100%; }
.ak-hero__beads .ak-beads { position: absolute; }
.ak-hero__beads .ak-beads:nth-child(1) { left: 6%; top: 12%; width: 50%; }
.ak-hero__beads .ak-beads:nth-child(2) { right: 6%; bottom: 6%; width: 44%; }
.ak-hero__beads .ak-beads:nth-child(3) { left: 38%; top: 4%; width: 32%; }
@media (max-width: 640px) {
	.ak-hero { padding-block: 24px 8px; }
	.ak-hero__actions .ak-button { flex: 1 1 100%; }
	.ak-hero__media { aspect-ratio: 16 / 10; }
}

/* Kafelki kategorii */
.ak-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 960px) { .ak-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ak-cat {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 2px;
	min-height: 260px;
	padding: 20px;
	border-radius: var(--ak-radius-lg);
	background: var(--ak-cat-bg, var(--ak-stone));
	text-decoration: none;
	overflow: hidden;
}
.ak-cat__media { position: absolute; inset: 0 0 64px; }
.ak-cat__media .ak-media__img { position: absolute; inset: 0; }
.ak-cat__media .ak-media__fallback .ak-beads { width: min(62%, 170px); transition: transform 0.4s var(--ak-ease); }
.ak-cat:hover .ak-beads { transform: rotate(18deg); }
.ak-cat__title { position: relative; font-family: var(--ak-font-display); font-size: 24px; line-height: 1.2; }
.ak-cat__sub { position: relative; font-size: var(--ak-text-sm); color: var(--ak-muted); }
.ak-cat:has(.ak-media__img) .ak-cat__media { inset: 0; }
.ak-cat:has(.ak-media__img)::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(to top, var(--ak-cat-bg, #e3e8e5) 30%, transparent); }
.ak-cat:has(.ak-media__img) .ak-cat__title,
.ak-cat:has(.ak-media__img) .ak-cat__sub { z-index: 1; }
@media (max-width: 560px) { .ak-cat { min-height: 200px; padding: 14px; } .ak-cat__title { font-size: 20px; } .ak-cat__media { inset: 0 0 56px; } }

/* Zakładki produktów */
.ak-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.ak-tab {
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--ak-line-strong);
	border-radius: var(--ak-pill);
	background: var(--ak-surface);
	font-size: var(--ak-text-sm);
	font-weight: 600;
}
.ak-tab:hover { border-color: var(--ak-fg); }
.ak-tab[aria-selected="true"] { background: var(--ak-fg); border-color: var(--ak-fg); color: #fff; }
@media (max-width: 640px) {
	.ak-tabs { flex-wrap: nowrap; overflow-x: auto; width: calc(100% + 2 * var(--ak-gutter)); margin-inline: calc(var(--ak-gutter) * -1); padding-inline: var(--ak-gutter); scrollbar-width: none; }
	.ak-tab { flex: none; }
}

/* Baner kolekcji */
.ak-collection {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	border-radius: var(--ak-radius-lg);
	background: var(--ak-collection-bg, var(--ak-sand));
	overflow: hidden;
}
.ak-collection__text { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 14px; padding: clamp(28px, 4vw, 56px); color: #4a4436; }
.ak-collection__text p { margin: 0; max-width: 44ch; }
.ak-collection__title { margin: 0; color: var(--ak-fg); font-size: clamp(2rem, 1.6rem + 1.5vw, 2.75rem); }
.ak-eyebrow--warm { color: #7a5a1c; }
.ak-collection__media { flex: 1 1 420px; min-height: 320px; background: rgba(0, 0, 0, 0.06); }
.ak-collection__media .ak-media__img { position: absolute; inset: 0; }
.ak-collection__media .ak-beads { width: min(70%, 280px); }

/* Poznaj kamienie */
.ak-guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .ak-guides { grid-template-columns: 1fr; } }
.ak-guide {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	padding: 22px;
	border: 1px solid var(--ak-line);
	border-radius: var(--ak-radius-lg);
	background: var(--ak-surface);
	text-decoration: none;
	transition: border-color 0.15s;
}
.ak-guide:hover { border-color: var(--ak-fg); color: inherit; }
.ak-guide__dot { flex: none; width: 56px; }
.ak-guide__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ak-guide__title { font-family: var(--ak-font-display); font-size: 20px; }
.ak-guide__text { font-size: var(--ak-text-sm); color: var(--ak-muted); }
.ak-guide__link { font-size: var(--ak-text-sm); font-weight: 600; color: var(--ak-accent); }

/* Elementor: sekcje motywu mają własny kontener (1280 px + marginesy boczne).
   W Elementorze wstawiaj je do kontenera o szerokości „Pełna szerokość” bez paddingu. */
.e-con > .elementor-widget[class*="elementor-widget-ak-"] { width: 100%; }