/*
 * Hexagon Posts Widget Styles
 *
 * This stylesheet defines the responsive hexagon grid used by the
 * Hexagon Posts widget.  CSS custom properties (variables) are used
 * to configure the number of columns for desktop, tablet and mobile
 * breakpoints as well as the hexagon height/width ratio.  Each
 * hexagon spans two columns in the underlying CSS grid and uses a
 * negative top margin to create the honeycomb staggering effect.
 */

.hexagon-posts-grid {
  /* Default responsive column counts; override via inline style. */
  --col-desktop: 3;
  --col-tablet: 3;
  --col-mobile: 3;
  /* Compute total grid columns: each hexagon spans two and an extra
     column is added to offset alternating rows. */
  --columns-desktop: calc(var(--col-desktop) * 2 + 1);
  --columns-tablet: calc(var(--col-tablet) * 2 + 1);
  --columns-mobile: calc(var(--col-mobile) * 2 + 1);
  /* Ratio of height to width; default corresponds to a regular hexagon. */
  --hexagon-height-ratio: 1.1547;
  /* Gap between hexagons; defined via Elementor control.  Defaults to 0. */
  --hexagon-gap: 0px;
  /* Default border settings.  Since border controls are removed from
     the widget, we fix these values in the stylesheet. */
  --hexagon-border-width: 0px;
  --hexagon-border-color: transparent;

  display: grid;
  width: 100%;
  grid-template-columns: repeat(var(--columns-desktop), 1fr);
  opacity: 0;
  transition: opacity 0.2s ease-in-out;

  /* Account for the negative top margin applied to each hexagon item.
     We add equal padding above and below the grid so that the
     hexagons do not overflow the container and overlap surrounding
     content.  The padding is proportional to the element width and
     the hexagon height ratio (height = width * ratio).  When a gap
     value is set, distribute half of it to the top and bottom to
     ensure the overall vertical spacing between rows equals the gap
     rather than double the gap. */
  padding-top: calc(25% * var(--hexagon-height-ratio, 1.1547) + (var(--hexagon-gap) * 0.5));
  padding-bottom: calc(25% * var(--hexagon-height-ratio, 1.1547) + (var(--hexagon-gap) * 0.5));
}

.hexagon-posts-grid.uc-show {
  opacity: 1;
}

/* Each hexagon item spans two grid columns and uses negative top margin
   to create the honeycomb staggering effect.  We no longer apply
   clip-path or border directly on the item; instead, the border and
   shadow are handled inside an SVG. */
.hexagon-posts-grid .hexagon-item {
  position: relative;
  z-index: 1;
  grid-column: span 2;
  /* Stagger rows by shifting each row upward.  Without a gap, we
     offset by a quarter of the hexagon height (25% of width ×
     height‑ratio).  To introduce a vertical gap, we add half of the
     gap value to the margin.  This ensures that the visible space
     between rows grows by the gap amount rather than twice the gap. */
  margin-top: calc(-25% * var(--hexagon-height-ratio, 1.1547) + (var(--hexagon-gap) * 0.5));
  aspect-ratio: calc(1 / var(--hexagon-height-ratio, 1.1547));
  width: 100%;
  overflow: visible;
  transition: transform 0.25s;
}

.hexagon-posts-grid .hexagon-item-wrapper {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.hexagon-posts-grid .hexagon-item-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 1;
}

.hexagon-posts-grid .hexagon-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  z-index: 3;
  width: 80%;
  text-align: center;
  pointer-events: none;
  line-height: 1.2;
}


/* Within the SVG, the image element fills the polygon and scales on hover. */
.hexagon-posts-grid .hexagon-svg image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms linear;
  /* Use blend mode to allow background colours to affect the image. */
  mix-blend-mode: multiply;
  /* Ensure the scaling originates from the centre of the image rather than
     the top-left corner.  The `transform-box` ensures the origin is
     relative to the element’s own bounding box. */
  transform-origin: 50% 50%;
  transform-box: fill-box;
}

/* Scale the image when an item has the "active" class.
   We removed the hover animation to avoid unintended zoom effects. */
.hexagon-posts-grid .hexagon-item.active .hexagon-svg image {
  transform: scale(1.1);
}

.hexagon-posts-grid .hexagon-overlay-link {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
}

/* SVG styling: ensures the SVG fills its container and applies
   drop-shadow and border via CSS variables.  The stroke on the
   polygon defines the border. */
.hexagon-posts-grid .hexagon-svg {
  width: 100%;
  height: 100%;
  display: block;
  /* Allow the outer half of the border stroke to render outside the SVG
     bounding box.  Without this, the stroke may be clipped at the
     edges of the viewBox. */
  overflow: visible;
  filter: drop-shadow(0 0 var(--hexagon-shadow-blur, 0px) var(--hexagon-shadow-color, transparent));
}

/* Apply border stroke to the polygon in the SVG.  Border colour and
   width come from CSS variables defined by Elementor controls. */
/* The basic hexagon polygon used for clipping or sizing has no stroke.  The
   border stroke is drawn on a separate polygon with the class
   `.hexagon-border` and masked to show only the outer portion of the
   stroke.  We use a double-width stroke here so the outer half becomes
   the visible border.  The `mask` attribute on the element itself
   determines the shape of the visible area. */
.hexagon-posts-grid .hexagon-svg .hexagon-border {
  stroke: var(--hexagon-border-color, transparent);
  /* Double the border width to account for the inner part that will be
     masked out. */
  stroke-width: calc(2 * var(--hexagon-border-width, 0px));
  vector-effect: non-scaling-stroke;
  fill: none;
}

/* Offset every sixth item to start the next row one column later. */
/* Pattern for staggering the grid.  We offset the first item of each
   group of 2 * N items by one column to create the honeycomb effect.
   The number N corresponds to the number of columns chosen for the
   desktop, tablet or mobile breakpoint.  These rules use data
   attributes set on the wrapper element to target the appropriate
   column count.  For example, when N = 3, 2*N = 6, so we offset
   every 6n+1 element. */

/* Desktop patterns */
.hexagon-posts-grid[data-col-desktop='1'] .hexagon-item:nth-child(2n + 1) {
  grid-column: 2 / span 2;
}
.hexagon-posts-grid[data-col-desktop='2'] .hexagon-item:nth-child(4n + 1) {
  grid-column: 2 / span 2;
}
.hexagon-posts-grid[data-col-desktop='3'] .hexagon-item:nth-child(6n + 1) {
  grid-column: 2 / span 2;
}
.hexagon-posts-grid[data-col-desktop='4'] .hexagon-item:nth-child(8n + 1) {
  grid-column: 2 / span 2;
}
.hexagon-posts-grid[data-col-desktop='5'] .hexagon-item:nth-child(10n + 1) {
  grid-column: 2 / span 2;
}
.hexagon-posts-grid[data-col-desktop='6'] .hexagon-item:nth-child(12n + 1) {
  grid-column: 2 / span 2;
}
.hexagon-posts-grid[data-col-desktop='7'] .hexagon-item:nth-child(14n + 1) {
  grid-column: 2 / span 2;
}
.hexagon-posts-grid[data-col-desktop='8'] .hexagon-item:nth-child(16n + 1) {
  grid-column: 2 / span 2;
}

/* Tablet patterns */
@media (max-width: 1024px) {
  .hexagon-posts-grid[data-col-tablet='1'] .hexagon-item:nth-child(2n + 1) {
    grid-column: 2 / span 2;
  }
  .hexagon-posts-grid[data-col-tablet='2'] .hexagon-item:nth-child(4n + 1) {
    grid-column: 2 / span 2;
  }
  .hexagon-posts-grid[data-col-tablet='3'] .hexagon-item:nth-child(6n + 1) {
    grid-column: 2 / span 2;
  }
  .hexagon-posts-grid[data-col-tablet='4'] .hexagon-item:nth-child(8n + 1) {
    grid-column: 2 / span 2;
  }
  .hexagon-posts-grid[data-col-tablet='5'] .hexagon-item:nth-child(10n + 1) {
    grid-column: 2 / span 2;
  }
  .hexagon-posts-grid[data-col-tablet='6'] .hexagon-item:nth-child(12n + 1) {
    grid-column: 2 / span 2;
  }
  .hexagon-posts-grid[data-col-tablet='7'] .hexagon-item:nth-child(14n + 1) {
    grid-column: 2 / span 2;
  }
  .hexagon-posts-grid[data-col-tablet='8'] .hexagon-item:nth-child(16n + 1) {
    grid-column: 2 / span 2;
  }
}

/* Mobile patterns */
@media (max-width: 767px) {
  .hexagon-posts-grid[data-col-mobile='1'] .hexagon-item:nth-child(2n + 1) {
    grid-column: 2 / span 2;
  }
  .hexagon-posts-grid[data-col-mobile='2'] .hexagon-item:nth-child(4n + 1) {
    grid-column: 2 / span 2;
  }
  .hexagon-posts-grid[data-col-mobile='3'] .hexagon-item:nth-child(6n + 1) {
    grid-column: 2 / span 2;
  }
  .hexagon-posts-grid[data-col-mobile='4'] .hexagon-item:nth-child(8n + 1) {
    grid-column: 2 / span 2;
  }
  .hexagon-posts-grid[data-col-mobile='5'] .hexagon-item:nth-child(10n + 1) {
    grid-column: 2 / span 2;
  }
  .hexagon-posts-grid[data-col-mobile='6'] .hexagon-item:nth-child(12n + 1) {
    grid-column: 2 / span 2;
  }
  .hexagon-posts-grid[data-col-mobile='7'] .hexagon-item:nth-child(14n + 1) {
    grid-column: 2 / span 2;
  }
  .hexagon-posts-grid[data-col-mobile='8'] .hexagon-item:nth-child(16n + 1) {
    grid-column: 2 / span 2;
  }
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .hexagon-posts-grid {
    grid-template-columns: repeat(var(--columns-tablet), 1fr);
  }
}

@media (max-width: 767px) {
  .hexagon-posts-grid {
    grid-template-columns: repeat(var(--columns-mobile), 1fr);
  }
}