/* Malta 360 — hero. Figma 228:4072 (1440×800 under the 80px header). */

.m360-hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

/* Figma "Label": Inter Tight Bold 12, 2.16px tracking. */
.m360-hero__eyebrow {
  font-family: var(--m360-font-label);
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--m360-orange);
}

.m360-hero__heading { --accent: var(--m360-green); max-width: 6.4em; color: var(--m360-text); }

.m360-hero__lede {
  max-width: 557.68px;
  margin-top: 3px;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.625;
  color: var(--m360-text-2);
}

.m360-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.m360-hero__media {
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.m360-hero__img {
  display: block;
  width: 100%;
  object-fit: cover;
}

.m360-hero__circle-sm,
.m360-hero__triangle,
.m360-hero__circle-lg { position: absolute; z-index: 1; }

@media (min-width: 1025px) {
  /* 800 in the design; grows when the copy is longer than the mock-up's, with the
     photo and the big circle pinned to the bottom edge. */
  .m360-hero {
    min-height: 800px;
    padding-block: 0 62px;
  }

  .m360-hero__inner { padding-top: 158px; }
  .m360-hero__text { position: relative; z-index: 2; }

  /* Photo: box 913.961×863 at (546, 19), clipped by "Rectangle 6"
     (M289.095 0 H913.961 V863 H0 L232.896 394.351 Z), image box 1463.099×975.4 at (-3.14, -93.4). */
  .m360-hero__media {
    position: absolute;
    top: calc(19 * var(--u));
    bottom: calc(-82 * var(--u));
    right: calc(-19.961 * var(--u));
    width: calc(913.961 * var(--u));
    clip-path: polygon(31.631% 0, 100% 0, 100% 100%, 0 100%, 25.482% 45.695%);
  }

  .m360-hero__img {
    position: absolute;
    left: -60.083%;
    top: -13.024%;
    width: 160.083%;
    max-width: none;
    height: 113.024%;
  }

  /* Ellipse 2: 312 at (1328, 73). */
  .m360-hero__circle-sm {
    top: calc(73 * var(--u));
    right: calc(-200 * var(--u));
    width: calc(312 * var(--u));
    height: calc(312 * var(--u));
  }

  /* Vector: 432.494×405.859 rotated 42.33°, bbox 593.039×591.285 at (1143, 283.31). */
  .m360-hero__triangle {
    top: calc(376.02 * var(--u));
    right: calc(-215.77 * var(--u));
    width: calc(432.494 * var(--u));
    height: calc(405.859 * var(--u));
  }

  /* Ellipse 3: 562 at (809, 698), cut by the hero's bottom edge (anchored there). */
  .m360-hero__circle-lg {
    bottom: calc(-460 * var(--u));
    right: calc(69 * var(--u));
    width: calc(562 * var(--u));
    height: calc(562 * var(--u));
  }
}

/* Below desktop — Figma mobile 228:4242: 800 tall incl. the header, copy at
   x 24 / y 120, full-bleed art-directed image (shapes baked in) behind it. */
@media (max-width: 1024px) {
  .m360-hero {
    min-height: 720px;
    padding: 40px 0 300px;
  }
  .m360-hero__eyebrow { display: none; }
  .m360-hero__text { position: relative; z-index: 2; gap: 24px; }
  .m360-hero__heading {
    font-family: var(--m360-font-display);
    font-size: 50px;
    line-height: 54px;
    letter-spacing: -3px;
    --accent: #438952;
  }
  .m360-hero__lede { margin-top: 0; font-size: 20px; line-height: 32.5px; }
  .m360-hero__actions { flex-direction: column; align-self: stretch; gap: 16px; margin-top: 8px; }
  .m360-hero__actions .m360-btn { width: 100%; }

  /* Image box: full width, 101.28% of the 800 frame, overhanging the bottom edge by 56.7px
     (anchored to the bottom so longer copy never lands on the photo). */
  .m360-hero__media {
    position: absolute;
    bottom: -56.7px;
    right: 0;
    width: 100%;
    max-width: 560px;
  }
  .m360-hero__img { width: 100%; height: auto; }
  .m360-hero:not(.m360-hero--art) .m360-hero__media { bottom: 0; }

  /* Shapes are baked into the mobile art. */
  .m360-hero--art .m360-hero__circle-sm,
  .m360-hero--art .m360-hero__triangle,
  .m360-hero--art .m360-hero__circle-lg { display: none; }
  .m360-hero__circle-sm { right: -25vw; bottom: 20%; width: 42vw; height: 42vw; }
  .m360-hero__triangle { display: none; }
  .m360-hero__circle-lg { right: 8vw; bottom: -40vw; width: 60vw; height: 60vw; }
}

/* Tablet: the portrait art sits right; fade its hard left edge. */
@media (min-width: 561px) and (max-width: 1024px) {
  .m360-hero__media {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%);
    mask-image: linear-gradient(90deg, transparent, #000 35%);
  }
}