/* Main entrances — circular page links with a rotating gradient arc. */

.main-entrances {
  --main-entrances-size: 18.125rem; /* Figma: 290px */
  --main-entrances-arc-width: 38px;
  --main-entrances-gap: clamp(1.5rem, 3.5vw, 5rem); /* Figma: 80px at full width */
  --main-entrances-label-overlap: 1.375rem;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--main-entrances-gap);
}

/* Four across, and the circles shrink to stay that way. The Figma 290px is a
   maximum, not a fixed size: with a fixed one the row needs 1400px and a laptop
   is just short of that, so the fourth entrance dropped to a line of its own.
   The basis is a quarter of the row, so shrinking happens before wrapping. */
.main-entrances-link {
  flex: 1 1 calc((100% - 3 * var(--main-entrances-gap)) / 4);
  min-inline-size: min(10rem, 100%);
  max-inline-size: var(--main-entrances-size);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;

  .btn {
    position: relative;
    z-index: 1;
    margin: calc(var(--main-entrances-label-overlap) * -1) 0 0;
    /* The circle is now narrower than 290px on smaller screens, so a long label
       has to wrap inside it instead of running into the next entrance. */
    max-inline-size: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Counter-clockwise, and only 90° from a start angle that never points down:
     turning the other way swung the arc through the bottom of the circle, where
     it crossed the label. */
  &:hover .main-entrances-arc,
  &:focus-visible .main-entrances-arc {
    transform: rotate(calc(var(--arc-rotation, -10deg) - 90deg));
  }

  &:hover .main-entrances-image,
  &:focus-visible .main-entrances-image {
    transform: scale(1.06);
  }
}

/* Two up below Salient's own header breakpoint, one on a phone: any further and
   the labels start to dominate the circles they belong to. Only the basis moves;
   max-inline-size still holds the circles at the Figma 290px. A phone is
   anything under a tablet's portrait width: two up on a wide phone left the arcs
   of neighbouring circles running into each other. */
@media (max-width: 999px) {
  .main-entrances-link {
    flex-basis: calc((100% - var(--main-entrances-gap)) / 2);
  }
}

@media (max-width: 767px) {
  .main-entrances-link {
    flex-basis: 100%;
  }
}

.main-entrances-media {
  position: relative;
  display: block;
  inline-size: 100%;
  aspect-ratio: 1 / 1;
}

.main-entrances-frame {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: 50%;
}

/* Same zoom-on-hover as the page tiles (.tile-image in tiles.css). */
.main-entrances-image {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  max-inline-size: none;
  transition: transform 0.7s ease;
}

@media (prefers-reduced-motion: reduce) {
  .main-entrances-image {
    transition: none;
  }

  .main-entrances-link:hover .main-entrances-image,
  .main-entrances-link:focus-visible .main-entrances-image {
    transform: none;
  }
}

.main-entrances-image-placeholder {
  background: color-mix(in srgb, var(--color-primary) 20%, var(--color-surface));
}

/* 90° arc (top-right), 38px thick. border-image + border-radius don't combine. */
.main-entrances-arc {
  position: absolute;
  /* Center the 38px stroke on the circle edge: half in, half out */
  inset: calc(var(--main-entrances-arc-width) / -2);
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(
    from 0deg,
    var(--color-gradient-green-start),
    var(--color-gradient-green-end) 90deg,
    transparent 90deg
  );
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--main-entrances-arc-width)),
    #000 calc(100% - var(--main-entrances-arc-width) + 0.5px)
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--main-entrances-arc-width)),
    #000 calc(100% - var(--main-entrances-arc-width) + 0.5px)
  );
  transform: rotate(var(--arc-rotation, -10deg));
  transition: transform 0.4s ease;
}