/* m4 · components.css — buttons + slide text (Mark4 project heroes, scoped under .m4) */

/* ============================================================
   1. BUTTONS + SLIDE TEXT
   ============================================================ */
.m4 .m4-btn {
  position: relative;
  display: inline-block;
  font-family: var(--font-ui);
  border: 1px solid transparent;
  border-radius: 100px;
  padding: calc(1.7 * var(--m4r)) calc(3 * var(--m4r));
  font-size: calc(1.8 * var(--m4r));
  font-weight: 500;
  line-height: 1.5;
  transition: transform 0.3s, background-color 0.3s, color 0.3s, border-color 0.3s;
}

@media (min-width: 768px) {
  .m4 .m4-btn {
    font-size: calc(2.2 * var(--m4r));
    line-height: 1.4;
    padding: calc(1.9 * var(--m4r)) calc(3.8 * var(--m4r));
  }
}

.m4 .m4-btn--primary {
  background: var(--ink);
  color: var(--bg);
}

.m4 .m4-btn--light {
  background: var(--bg);
  color: var(--ink);
}

.m4 .m4-btn--block {
  width: 100%;
}

.m4 .m4-btn__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(1.4 * var(--m4r));
  overflow: hidden;
}

.m4 .m4-btn__text {
  overflow: hidden;
}

.m4 .m4-btn__text span,


.m4 .m4-slide-text {
  position: relative;
  display: block;
  transition: transform 0.4s var(--ease);
}

.m4 .m4-btn__text span::after,


.m4 .m4-slide-text::after {
  content: attr(data-text);
  display: block;
  position: absolute;
  top: 105%;
  left: 0;
  right: 0;
}

.m4 .m4-btn__icon {
  --s: calc(2.8 * var(--m4r));
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--s);
  min-width: var(--s);
  height: var(--s);
}

.m4 .m4-btn__icon svg {
  width: 100%;
  height: 100%;
}

@media (pointer: fine) {
  .m4 .m4-btn:hover {
    transform: scaleX(1.02);
  }

  .m4 .m4-btn:hover .m4-btn__text span {
    transform: translateY(-105%);
  }
}

.m4 {
  --osmo-ease: cubic-bezier(0.625, 0.05, 0, 1);
}

/* compact button used inside the "Why" details (360° tour / amenities) */
.m4 .m4-btn--sm {
  padding: calc(1.5 * var(--m4r)) calc(2.6 * var(--m4r));
  font-size: calc(1.7 * var(--m4r));
  line-height: 1.4;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .m4 .m4-btn--sm {
    padding: calc(1.6 * var(--m4r)) calc(3.2 * var(--m4r));
    font-size: calc(1.9 * var(--m4r));
  }
}
.m4 .m4-btn--sm .m4-btn__icon { --s: calc(2.2 * var(--m4r)); }
.m4 .m4-btn--sm .m4-btn__content { gap: calc(1.2 * var(--m4r)); }

/* outlined twin of the primary pill (the amenities button) */
.m4 .m4-btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: rgba(26, 35, 50, 0.35);
}
@media (pointer: fine) {
  .m4 .m4-btn--outline:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
}

/* ============================================================
   STROKE + FLAIR BUTTON (GSAP-style): transparent pill with a 2px stroke;
   on hover a disc of the stroke colour grows from the cursor point and the
   label flips to the hover colour. components/button.js moves the disc origin.
   ============================================================ */
.m4 .m4-btn--stroke {
  --button-stroke: var(--ink);
  --button-hoverColor: var(--bg);
  background: transparent;
  border: 0;
  color: var(--button-stroke);
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow: hidden;
  isolation: isolate;
}
.m4 .m4-hero--light .m4-btn--stroke {            /* dark sky (Ekaiva): ivory stroke, ink on hover */
  --button-stroke: var(--bg);
  --button-hoverColor: var(--ink);
}
.m4 .m4-btn--stroke::after {
  content: "";
  position: absolute; inset: 0;
  border: 2px solid var(--button-stroke);
  border-radius: 100px;
  pointer-events: none;
  z-index: 3;
}
.m4 .m4-btn--stroke .m4-btn__content {
  position: relative;
  z-index: 2;
  overflow: visible;
  transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.m4 .m4-btn--stroke .m4-btn__flair {
  position: absolute;
  top: 50%; left: 50%;
  width: 220%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--button-stroke);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1);
  pointer-events: none;
  z-index: 1;
}
.m4 .m4-btn--stroke.is-hovered .m4-btn__flair { transform: translate(-50%, -50%) scale(1); }
.m4 .m4-btn--stroke.is-hovered .m4-btn__content { color: var(--button-hoverColor); }
/* the flair replaces the old slide-up label and scale hover */
@media (pointer: fine) {
  .m4 .m4-btn--stroke:hover { transform: none; }
  .m4 .m4-btn--stroke:hover .m4-btn__text span { transform: none; }
}
.m4 .m4-btn--stroke .m4-btn__text span::after { display: none; }

/* the 360° pictogram is a filled glyph: give it a little more room than the stroke arrows */
.m4 .m4-btn__icon--360 { --s: calc(3 * var(--m4r)); }
.m4 .m4-btn--sm .m4-btn__icon--360 { --s: calc(2.6 * var(--m4r)); }