/* KUGUART GOLD — 03 Layout
 *
 * Siatka: sekcja / hero daje gutter (tło na full bleed).
 * kg-container wypełnia już wsunięty obszar — bez drugiego paddingu.
 *
 * Elementor Atomic: .e-con { width: var(--width, 100%) } i
 * .e-div-block-base { padding: 10px }. Nasze reguły muszą przebić
 * obie, inaczej treść leci na krawędź ekranu.
 */

.elementor {
  --kg-page-pad: max(
    var(--kg-gutter),
    calc((100% - var(--kg-container)) / 2)
  );
}

/* -------------------------------------------------------------------------- */
/* CONTAINER                                                                  */
/* -------------------------------------------------------------------------- */

.kg-container {
  width: 100%;
  max-width: var(--kg-container);
  margin-inline: auto;
  container-type: inline-size;
}

.kg-container > * + * {
  margin-block-start: clamp(2.5rem, 4vw, 4rem);
}

/* -------------------------------------------------------------------------- */
/* HERO + SECTION — jedna oś z kg-page-pad                                    */
/* -------------------------------------------------------------------------- */

.kg-hero {
  padding-block-start: clamp(4rem, 8vw, 8rem);
  padding-block-end: clamp(3rem, 5vw, 4.5rem);
  padding-inline: var(--kg-page-pad);
}

.kg-section {
  padding-block: var(--kg-space-section);
  padding-inline: var(--kg-page-pad);
}

.kg-hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: var(--kg-content);
}

.kg-hero-content > * + * {
  margin-block-start: clamp(1.25rem, 2vw, 2rem);
}

.kg-hero-content > .kg-section-label + * {
  margin-block-start: 0.75rem;
}

.kg-hero-content > .kg-lead + * {
  margin-block-start: clamp(1.75rem, 3vw, 3rem);
}

.kg-copy {
  max-width: var(--kg-content);
}

/* -------------------------------------------------------------------------- */
/* STACKS / GRIDS / ACTIONS                                                   */
/* -------------------------------------------------------------------------- */

.kg-stack > * + * {
  margin-block-start: clamp(1.25rem, 2vw, 2rem);
}

.kg-stack > .kg-section-label + *,
.kg-stack > .kg-meta + * {
  margin-block-start: 0.75rem;
}

.kg-stack > .kg-lead + *,
.kg-stack > .kg-actions,
.kg-stack-lg > .kg-actions {
  margin-block-start: clamp(2.5rem, 4vw, 4rem);
}

.kg-stack-lg > * + * {
  margin-block-start: clamp(2.5rem, 4vw, 4rem);
}

.kg-gap,
.kg-gap-lg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.kg-gap {
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
}

.kg-gap-lg {
  gap: clamp(1.75rem, 3.5vw, 4rem);
}

.kg-shop-layout {
  display: grid;
  grid-template-columns: minmax(11rem, 14.5rem) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
}

.kg-pdp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(18rem, 0.88fr);
  gap: clamp(1.75rem, 3.5vw, 4rem);
  align-items: start;
}

.kg-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.25rem, 2vw, 2rem);
}

.kg-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: clamp(1.25rem, 2vw, 2rem);
  min-height: clamp(16rem, 32vw, 22rem);
  padding: clamp(1.5rem, 3vw, 3rem);
}

.kg-card > .kg-stack > .kg-product-card-title + * {
  margin-block-start: clamp(0.75rem, 1.5vw, 1.25rem);
}

.kg-frame {
  display: block;
  width: 100%;
  min-height: clamp(10rem, 28vw, 14rem);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--kg-color-surface);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--kg-color-line);
}

.kg-card > .kg-frame {
  flex: 0 0 auto;
  width: 100%;
  min-height: 10rem;
  aspect-ratio: 16 / 10;
}

.kg-mosaic {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
}

@container (min-width: 40rem) {
  .kg-mosaic {
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: 1fr 1fr;
    min-height: clamp(22rem, 40vw, 32rem);
  }

  .kg-mosaic > :first-child {
    grid-row: 1 / span 2;
  }

  .kg-mosaic > :first-child .kg-frame {
    height: 100%;
    min-height: 100%;
    aspect-ratio: auto;
  }
}

.kg-bg-secondary {
  background-color: var(--kg-color-bg-secondary);
}

.kg-surface {
  background-color: var(--kg-color-surface);
}

.kg-accent {
  color: var(--kg-color-accent);
}

.kg-accent-soft {
  color: var(--kg-color-accent-soft);
}

.kg-nature {
  color: var(--kg-color-nature);
}

/* -------------------------------------------------------------------------- */
/* Beat Atomic / e-con. Selector includes .e-con + .e-div-block-base.         */
/* -------------------------------------------------------------------------- */

.elementor .e-con.e-div-block-base.kg-section,
.elementor .e-con.e-div-block-base.kg-hero {
  --width: 100%;
  --padding-left: var(--kg-page-pad);
  --padding-right: var(--kg-page-pad);
  width: 100%;
  max-width: none;
  padding-inline: var(--kg-page-pad);
}

.elementor .e-con.e-div-block-base.kg-section {
  --padding-top: var(--kg-space-section);
  --padding-bottom: var(--kg-space-section);
  padding-block: var(--kg-space-section);
}

.elementor .e-con.e-div-block-base.kg-hero {
  --padding-top: clamp(4rem, 8vw, 8rem);
  --padding-bottom: clamp(3rem, 5vw, 4.5rem);
  padding-block-start: clamp(4rem, 8vw, 8rem);
  padding-block-end: clamp(3rem, 5vw, 4.5rem);
}

.elementor .e-con.e-div-block-base.kg-hero + .e-con.e-div-block-base.kg-section {
  --padding-top: clamp(3rem, 5vw, 4.5rem);
  padding-block-start: clamp(3rem, 5vw, 4.5rem);
}

.elementor .e-con.e-div-block-base.kg-container {
  --width: 100%;
  --padding-left: 0px;
  --padding-right: 0px;
  --padding-top: 0px;
  --padding-bottom: 0px;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding: 0;
}

.elementor .e-con.e-div-block-base.kg-stack,
.elementor .e-con.e-div-block-base.kg-stack-lg,
.elementor .e-con.e-div-block-base.kg-gap,
.elementor .e-con.e-div-block-base.kg-gap-lg,
.elementor .e-con.e-div-block-base.kg-mosaic,
.elementor .e-con.e-div-block-base.kg-actions,
.elementor .e-con.e-div-block-base.kg-copy,
.elementor .e-con.e-div-block-base.kg-hero-content,
.elementor .e-con.e-div-block-base.kg-frame,
.elementor .e-con.e-div-block-base.kg-shop-layout,
.elementor .e-con.e-div-block-base.kg-shop-rail,
.elementor .e-con.e-div-block-base.kg-pdp-layout,
.elementor .e-con.e-div-block-base.kg-pdp-gallery,
.elementor .e-con.e-div-block-base.kg-pdp-specs,
.elementor .e-con.e-div-block-base.kg-pdp-spec,
.elementor .e-con.e-div-block-base.kg-pdp-card,
.elementor .e-con.e-div-block-base.kg-gallery,
.elementor .e-con.e-div-block-base.kg-config,
.elementor .e-con.e-div-block-base.kg-rhythms,
.elementor .e-con.e-div-block-base.kg-footer-grid,
.elementor .e-con.e-div-block-base.kg-footer-brand,
.elementor .e-con.e-div-block-base.kg-footer-col,
.elementor .e-con.e-div-block-base.kg-footer-bar-row,
.elementor .e-con.e-div-block-base.kg-form-field,
.elementor .e-con.e-div-block-base.kg-form-grid,
.elementor .e-con.e-div-block-base.kg-form-check,
.elementor .e-con.e-div-block-base.kg-contact-rail {
  --padding-left: 0px;
  --padding-right: 0px;
  --padding-top: 0px;
  --padding-bottom: 0px;
  padding: 0;
}

.elementor .e-con.e-div-block-base.kg-hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: var(--kg-content);
}

.elementor .e-con.e-div-block-base.kg-hero-content > * + * {
  margin-block-start: clamp(1.25rem, 2vw, 2rem);
}

.elementor .e-con.e-div-block-base.kg-hero-content > .kg-section-label + * {
  margin-block-start: 0.75rem;
}

.elementor .e-con.e-div-block-base.kg-hero-content > .kg-lead + * {
  margin-block-start: clamp(1.75rem, 3vw, 3rem);
}

.elementor .e-con.e-div-block-base.kg-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: clamp(1.25rem, 2vw, 2rem);
  padding: clamp(1.5rem, 3vw, 3rem);
}

.elementor .e-con.e-div-block-base.kg-gap,
.elementor .e-con.e-div-block-base.kg-gap-lg,
.elementor .e-con.e-div-block-base.kg-mosaic,
.elementor .e-con.e-div-block-base.kg-shop-layout,
.elementor .e-con.e-div-block-base.kg-pdp-layout,
.elementor .e-con.e-div-block-base.kg-footer-grid,
.elementor .e-con.e-div-block-base.kg-form-grid {
  --display: grid;
  display: grid;
}

.elementor .e-con.e-div-block-base.kg-actions {
  display: flex;
}

.elementor .e-con.e-div-block-base.kg-container {
  container-type: inline-size;
}