/**
 * Block: actionworld/hero  (+ inner block actionworld/attraction)
 * Becomes blocks/hero/style.css – only enqueued on pages that use the block.
 */
.aw-hero {
  position: relative;
  padding-top: clamp(4rem, 2rem + 6vw, 9rem);
  padding-bottom: clamp(2rem, 1rem + 3vw, 4rem);
  overflow: hidden;
}

/* Headline, entry text and buttons stacked, left aligned with the tiles */
.aw-hero__intro {
  position: relative;
  margin-bottom: clamp(3.5rem, 2rem + 5vw, 7rem);
}

.aw-hero__title {
  max-width: 14ch;
  margin: 0 0 clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  font-size: clamp(3rem, 1.9rem + 4.6vw, 6.25rem);
  line-height: .84;
  letter-spacing: -.005em;
}

.aw-hero__lead {
  max-width: 52ch;
  margin-bottom: 2rem;
  color: #d5d9e0;
  font-size: var(--aw-step-1);
  line-height: 1.6;
}

.aw-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Attractions: four panels; the hovered one widens ----------------------
   The list is the size container, so text sizes never change while a
   panel grows or shrinks. */
.aw-attractions {
  --gap: 8px;
  --grow: 1.5;          /* hovered panel */
  --shrink: .85;        /* the others */
  container-type: inline-size;
  display: flex;
  gap: var(--gap);
  height: clamp(460px, 70vh, 760px);
  margin-block: 0;
  padding: 0;
  list-style: none;
}

.aw-attractions > li { flex: 1 1 0; min-width: 0; display: flex; transition: flex-grow .7s var(--aw-ease-out); }
.aw-attractions:hover > li,
.aw-attractions:focus-within > li { flex-grow: var(--shrink); }
.aw-attractions > li:hover,
.aw-attractions > li:focus-within { flex-grow: var(--grow); }

.aw-panel {
  --c: var(--aw-red);
  position: relative;
  isolation: isolate;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: clamp(1.25rem, 2vw, 2rem) 1rem clamp(1.5rem, 2.5vw, 2.25rem);
  overflow: hidden;
  border-radius: var(--aw-radius-s);
  color: var(--aw-white);
  text-align: center;
  text-decoration: none;
}

.aw-panel__img {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  filter: saturate(.85) brightness(.8);
  transition: transform 1.4s var(--aw-ease-out), filter .7s var(--aw-ease-out);
}

/* Colour glow: light in the attraction colour that rises behind the photo on
   hover. It sits under the dark base, so the text always stands on dark –
   the colour shows above and around it, never as a wash behind the letters. */
.aw-panel__glow {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(95% 55% at 50% 62%,
      color-mix(in srgb, var(--c) 85%, transparent) 0%,
      color-mix(in srgb, var(--c) 45%, transparent) 40%,
      transparent 72%),
    linear-gradient(0deg, color-mix(in srgb, var(--c) 60%, transparent), transparent 70%);
  opacity: 0;
  transform: translateY(30%);
  transition: opacity .9s var(--aw-ease-out), transform 1.1s var(--aw-ease-out);
}
.aw-panel:hover .aw-panel__glow,
.aw-panel:focus-visible .aw-panel__glow { opacity: 1; transform: none; }

/* Dark base under the text + light shade at the top for the icon */
.aw-panel::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, rgb(0 0 0 / .9) 0%, rgb(0 0 0 / .78) 18%, rgb(0 0 0 / .2) 38%, transparent 50%),
    linear-gradient(180deg, rgb(0 0 0 / .45), transparent 26%);
}

/* At rest: a soft glowing edge in the attraction colour (same light as the header line) */
.aw-panel::after {
  content: "";
  position: absolute;
  left: 8%; right: 8%; bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--c);
  box-shadow: 0 0 18px 3px color-mix(in srgb, var(--c) 80%, transparent), 0 0 60px 10px color-mix(in srgb, var(--c) 35%, transparent);
  transition: left .8s var(--aw-ease-out), right .8s var(--aw-ease-out), box-shadow .8s var(--aw-ease-out);
}
.aw-panel:hover::after,
.aw-panel:focus-visible::after { left: 0; right: 0; box-shadow: 0 0 24px 4px var(--c), 0 0 90px 20px color-mix(in srgb, var(--c) 55%, transparent); }

.aw-panel:hover .aw-panel__img,
.aw-panel:focus-visible .aw-panel__img { transform: scale(1.08); filter: saturate(1) brightness(.92); }

/* Top: icon + name label – the quick overview of all four attractions */
.aw-panel__top { display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.aw-panel__label {
  padding: .45em 1em .3em;
  border: 2px solid var(--aw-black);
  border-radius: 999px;
  background: var(--aw-black);
  font-family: var(--aw-font-display);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color var(--aw-dur) var(--aw-ease-out);
}

.aw-panel__icon {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 2px solid var(--aw-black);
  background: var(--aw-black);
  transition: border-color var(--aw-dur) var(--aw-ease-out);
}
.aw-panel__icon img { width: 100%; height: 100%; }
/* Hover: icon and label stay black, their border takes the attraction colour */
.aw-panel:hover :is(.aw-panel__icon, .aw-panel__label),
.aw-panel:focus-visible :is(.aw-panel__icon, .aw-panel__label) { border-color: var(--c); }

/* Desktop: tiles run edge to edge */
@media (min-width: 901px) {
  .aw-attractions.aw-wrap { width: auto; margin-inline: var(--gap); }
}

/* Text box is as wide as the narrowest panel state, so it wraps the same
   way at rest and on hover. */
.aw-panel__body {
  width: calc((100cqi - 3 * var(--gap)) * var(--shrink) / (3 * var(--shrink) + var(--grow)) - 2rem);
}
.aw-panel__title {
  margin: 0 0 .15em;
  font-size: clamp(1.5rem, 2.8cqi, 2.6rem);
  line-height: .9;
}
.aw-panel__sub {
  margin: 0;
  font-size: var(--aw-step--1);
  font-weight: 600;
  letter-spacing: .04em;
}

/* Arrow: always takes its space (invisible at rest), so the text never moves */
.aw-panel__go {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin: 1.1rem auto 0;
  border-radius: 50%;
  background: var(--aw-white);
  color: var(--c);
  box-shadow: 0 0 30px 4px color-mix(in srgb, var(--c) 70%, transparent);
  opacity: 0;
  transform: scale(.6);
  transition: opacity var(--aw-dur) var(--aw-ease-out), transform var(--aw-dur) var(--aw-ease-spring);
}
.aw-panel__go svg { width: 20px; height: 20px; }
.aw-panel:hover .aw-panel__go,
.aw-panel:focus-visible .aw-panel__go { opacity: 1; transform: none; transition-delay: .15s; }
.aw-panel:focus-visible { outline-offset: -4px; outline-width: 3px; }

/* Page-load sequence: headline, text, then panels rise one after another */
@media (prefers-reduced-motion: no-preference) {
  .aw-hero__title,
  .aw-hero__lead,
  .aw-hero__actions { animation: aw-rise .9s var(--aw-ease-out) both; }
  .aw-hero__lead { animation-delay: .1s; }
  .aw-hero__actions { animation-delay: .2s; }

  .aw-attractions > li { animation: aw-panel-in 1.1s var(--aw-ease-out) both; animation-delay: calc(.35s + var(--i) * .09s); }
  .aw-panel__img { animation: aw-zoom-settle 1.8s var(--aw-ease-out) both; animation-delay: calc(.35s + var(--i) * .09s); }
}
@keyframes aw-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
@keyframes aw-panel-in {
  from { clip-path: inset(100% 0 0 0 round 4px); }
  to   { clip-path: inset(0 0 0 0 round 4px); }
}
@keyframes aw-zoom-settle {
  from { transform: scale(1.25); }
  to   { transform: scale(1.04); }
}

/* Touch screens have no hover: show the colour at rest */
@media (hover: none) {
  .aw-panel__glow { opacity: .7; transform: translateY(10%); }
}

/* Tablet & mobile: 2 × 2 grid, no width animation -------------------- */
@media (max-width: 900px) {
  .aw-attractions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: auto;
  }
  .aw-attractions > li { aspect-ratio: 3 / 4; }
  .aw-panel { padding: 1.25rem .75rem 1.5rem; }
  .aw-panel__body { width: 100%; }
  .aw-panel__title { font-size: clamp(1.4rem, 5.6cqi, 2.4rem); }
  .aw-panel__icon { width: 52px; height: 52px; }
  .aw-panel__go { display: none; }
  .aw-panel__label { display: none; }
  /* Reserve two lines so titles line up whether the subline wraps or not */
  .aw-panel__sub { display: flex; align-items: flex-start; justify-content: center; min-height: 2.9em; line-height: 1.45; text-wrap: balance; }
}

/* Phones: one column, wide tiles – bigger photos and titles */
@media (max-width: 600px) {
  .aw-attractions { grid-template-columns: 1fr; row-gap: 1.25rem; }   /* Stacked tiles need air between them */
  .aw-attractions > li { aspect-ratio: 1 / 1; }
  .aw-panel { padding: 1.1rem 1rem 1.4rem; }
  .aw-panel__title { font-size: clamp(2rem, 10cqi, 2.6rem); }
  .aw-panel__sub { min-height: 0; }
  .aw-panel__icon { width: 52px; height: 52px; }
}