/* Frontend styles only for Move Up North – Puff Cards */

.mun-puff-cards{
  --mun-accent: var(--ast-global-color-0, #E19508);
  --mun-polygon-color: var(--mun-accent);

  /* Canvas & column geometry (Figma) */
  --mun-canvas-width: 1162px;
  --mun-col-width: 458px;
  --mun-col-gap: 246px;

  /* Stagger + gaps between items in each column */
  --mun-left-stagger: 300px;
  --mun-left-gap-1: 270px;
  --mun-right-gap-1: 220px;
  --mun-col-gap-default: 140px;

  /* Shapes */
  --mun-circle: 458px;
  --mun-rect-w: 458px;
  --mun-rect-h: 593px;
  --mun-rect-r: 160px;

  position:relative;
}

/* Decor layer */
.mun-puff-cards__decor{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.mun-decor{
  position:absolute;
  color: var(--mun-polygon-color);
  pointer-events:none;
}
.mun-decor svg{ display:block; width:100%; height:auto; }

.mun-puff-cards__canvas{
  position:relative;
  z-index:2;
  width: min(100%, var(--mun-canvas-width));
  margin-inline:auto;
  padding-bottom: clamp(80px, 20vh, 220px);
}

.mun-puff-cards__cols{
  display:flex;
  gap: var(--mun-col-gap);
  align-items:flex-start;
}

.mun-col{
  width: var(--mun-col-width);
  display:flex;
  flex-direction:column;
}

.mun-col--left{ margin-top: var(--mun-left-stagger); }

/* Card wrapper spacing rules */
.mun-cardwrap.gap-left-1{ margin-top: var(--mun-left-gap-1); }
.mun-cardwrap.gap-right-1{ margin-top: var(--mun-right-gap-1); }
.mun-cardwrap.gap-default{ margin-top: var(--mun-col-gap-default); }

/* Card */
.mun-card{ margin:0; }
.mun-card__media{
  position:relative;
}

/* Shape sizing is controlled by wrapper */
.mun-cardwrap.is-circle .mun-card__media{
  width: var(--mun-circle);
  height: var(--mun-circle);
}
.mun-cardwrap.is-circle .mun-card__media img {
  border-radius: 9999px;
  overflow:hidden;
}
.mun-cardwrap.is-rect .mun-card__media{
  width: var(--mun-rect-w);
  height: var(--mun-rect-h);
}
.mun-cardwrap.is-rect .mun-card__media img {
  border-radius: var(--mun-rect-r);
  overflow:hidden;
}

/* Image uses srcset from WP and covers */
.mun-card__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* CTA */
body .mun-cardwrap .mun-card__cta {
  position:absolute;
  right: 12px;
  bottom: 12px;
  width: 100px;
  height: 100px;
  border-radius: 9999px;
  background: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#111;
  border: 1px solid var(--mun-polygon-color);
}
.mun-cardwrap.is-circle .mun-card__cta {
  bottom: -10px;
  right: 35px;
}
body .mun-cardwrap .mun-card__cta:hover {
  background: var(--mun-polygon-color);
  color: var(--ast-global-color-5);
}
body .mun-cardwrap .mun-card__cta:focus-visible{
  outline: 3px solid currentColor;
  outline-offset: 3px;
}
.mun-card__cta span {
  display: flex;
}

/* Text */
.mun-card__content{ 
  padding-top: 82px; 
  width: 80%;
  margin: 0 auto;
}
.mun-card__eyebrow{
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(0,0,0,.65);
}
.mun-dot{
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: var(--mun-accent);
  flex:0 0 auto;
}
.mun-card__title{
  margin: 10px 0 0;
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%; /* 52px */
  letter-spacing: -0.6px;
}

/* Decorative polygon placements anchored to canvas */
.mun-puff-cards{ --mun-canvas-half: calc(var(--mun-canvas-width) / 2); }

.mun-decor--tr{
  width: 743px;
  top: -80px;
  right: -360px;
}
.mun-decor--bl{
  width: 743px;
  bottom: 360px;
  left: -360px;
}
.mun-decor--br{
  width: 565px;
  bottom: -250px;
  right: -110px;
}

.mun-puff-cards[data-decor="off"] .mun-puff-cards__decor{ display:none; }
.mun-puff-cards[data-decor="minimal"] .mun-decor--br{ display:none; }

/* Responsive */
@media (max-width: 1240px){
  .mun-puff-cards__canvas{ width: min(100%, 920px); }
  .mun-puff-cards__cols{ gap: 80px; justify-content:space-between; }
  .mun-col--left{ margin-top: 160px; }
  .mun-cardwrap.is-rect .mun-card__media{ width: 420px; height: 540px; border-radius: 140px; }
  .mun-cardwrap.is-circle .mun-card__media{ width: 420px; height: 420px; }
}

@media (max-width: 900px){
  .mun-puff-cards__cols{ flex-direction:column; gap: 48px; }
  .mun-col{ width: 100%; }
  .mun-col--left{ margin-top: 0; }
  .mun-cardwrap.gap-left-1,
  .mun-cardwrap.gap-right-1,
  .mun-cardwrap.gap-default{ margin-top: 48px; }
  .mun-card__media{ width: min(100%, 520px)!important; height: auto!important; aspect-ratio: 458 / 593; border-radius: 160px!important; }
  .mun-cardwrap.is-circle .mun-card__media{ aspect-ratio: 1/1; border-radius: 9999px!important; }
  .mun-decor--tr, .mun-decor--bl, .mun-decor--br{ display:none; }
}