/* ==========================================================================
   CraftsBo — Elementor compatibility.

   Elementor's own container styling (.e-con) sets position, overflow,
   min-height, display, gap and padding via CSS custom properties on the
   very same selector specificity as the site's original classes, and
   loads after them — so on the handful of elements that are now also
   Elementor containers (hero, hero__media, the collection grid, each
   collection tile, the split/editorial sections, and the new media-slot
   wrapper), Elementor's defaults would otherwise silently win. Elementor
   also always wraps a container's children in an extra ".e-con-inner"
   div, so any original rule that expected its grid/flex children to be
   direct children needs to target that wrapper instead. Every value below
   is copied unchanged from the site's own stylesheets — nothing here is a
   new design decision, it only makes sure the original values still win
   on the elements Elementor also touches.
   ========================================================================== */

/* Elementor gives every widget's own wrapper "position: relative", which
   becomes the (wrong) containing block for the placeholder's absolutely
   positioned icon/caption — they'd end up positioned against that empty
   0-height wrapper instead of the image slot itself. Only the HTML widgets
   inside an image slot need this reset; nothing else on the page relies on
   their wrapper being a positioning context. */
.hero__media .elementor-widget-html,
.collection-tile .elementor-widget-html,
.media-slot .elementor-widget-html {
  position: static !important;
}

.hero {
  position: relative !important;
  overflow: hidden !important;
  min-height: calc(100dvh - var(--header-h) - 38px) !important;
  display: grid !important;
  align-items: center !important;
}
.hero__media {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}

.container {
  width: 100% !important;
  max-width: var(--container-max) !important;
  margin-inline: auto !important;
  padding-inline: var(--container-pad) !important;
}

.section {
  padding-block: var(--space-16) !important;
}
.section--tight {
  padding-block: var(--space-10) !important;
}
.section--dark {
  background: var(--color-ink) !important;
  color: #fff !important;
}
@media (max-width: 767px) {
  .section { padding-block: var(--space-10) !important; }
}

.grid.grid-4 > .e-con-inner {
  display: grid !important;
  gap: var(--space-6) !important;
  grid-template-columns: repeat(4, 1fr) !important;
}
@media (max-width: 900px) {
  .grid.grid-4 > .e-con-inner { grid-template-columns: repeat(2, 1fr) !important; }
}

.collection-tile {
  position: relative !important;
  border-radius: var(--radius-sm) !important;
  overflow: hidden !important;
  display: flex !important;
  min-height: 420px !important;
}
@media (max-width: 767px) {
  .collection-tile { min-height: 320px !important; }
}
.collection-tile .media {
  position: absolute;
  inset: 0;
  height: 100%;
}
/* Elementor nests the tile's children one level deeper than the original
   markup, so the flex-based "push to bottom" no longer reaches
   .collection-tile__content directly — pin it the same way .collection-tile__media
   already is, which gives the same flush-bottom, full-width result. */
.collection-tile__content {
  position: absolute !important;
  left: 0;
  bottom: 0;
  width: 100%;
}

.split > .e-con-inner {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: center !important;
  gap: var(--space-12) !important;
}
@media (max-width: 900px) {
  .split > .e-con-inner { grid-template-columns: 1fr !important; gap: var(--space-8) !important; }
}

.media-slot {
  position: relative !important;
  overflow: hidden !important;
}
.media-slot .media {
  position: absolute;
  inset: 0;
  height: 100%;
}