/* Home only: "What's Blooming", directly below the hero. Linked from
   src/pages/index.astro. Every rule is scoped to a whats-blooming class.

   The hero ends in deep navy, so the band is a light surface: cream, opened by
   a fine coral-to-gold rule, with the update set in the same serif as the page.
   From 1000px (tablet landscape) up, the label, the update, its action and
   the link to /news share one line. Narrower tablets take two rows, the label
   and the link above the update; phones stack.

   A headline is never squeezed into a narrow column: when it and its action
   do not fit side by side, the action moves beneath the headline.

   With two or more updates the band becomes a calm carousel
   (whats-blooming-20261002.js). The label and the /news link never move; the
   updates share one cell, so the band keeps the height of the longest and
   nothing below it shifts. The controls hold their space before the script
   runs, and appear once it does. */

.whats-blooming {
  position: relative;
  background: var(--cream);
  border-bottom: 1px solid var(--rule);
}

.whats-blooming::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--coral) 0%, var(--gold) 100%);
}

.whats-blooming__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: clamp(1rem, 2.2vw, 2.75rem);
  align-items: center;
  padding-block: clamp(1.25rem, 2.2vw, 1.75rem);
}

.whats-blooming__label {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding-right: clamp(1rem, 2.2vw, 2.75rem);
  border-right: 1px solid var(--rule);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
}

.whats-blooming__label img {
  width: 1.8rem;
  height: auto;
}

.whats-blooming__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(1rem, 2.2vw, 2.25rem);
  min-width: 0;
}

.whats-blooming__stage--carousel {
  grid-template-columns: minmax(0, 1fr) auto;
}

.whats-blooming__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem clamp(1rem, 2.2vw, 2rem);
  min-width: 0;
  margin: 0;
  color: var(--navy);
}

.whats-blooming__title {
  min-width: 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.95vw, 1.75rem);
  font-weight: 500;
  line-height: 1.2;
}

.whats-blooming__go {
  flex: none;
  font-size: clamp(0.86rem, 1.1vw, 0.95rem);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--coral);
  text-underline-offset: 0.3em;
  white-space: nowrap;
}

a.whats-blooming__item:hover .whats-blooming__title,
a.whats-blooming__item:hover .whats-blooming__go,
a.whats-blooming__item:focus-visible .whats-blooming__go {
  color: var(--coral-dark);
}

.whats-blooming__all {
  padding-left: clamp(1rem, 2.2vw, 2.75rem);
  border-left: 1px solid var(--rule);
  color: var(--muted);
  font-size: clamp(0.84rem, 1.05vw, 0.9rem);
  font-weight: 700;
  white-space: nowrap;
}

.whats-blooming__all:hover {
  color: var(--coral-dark);
}

.whats-blooming a:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
  border-radius: 0.3rem;
}

/* Carousel: the updates share one cell and cross-fade. */
.whats-blooming__slides {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.whats-blooming__slide {
  display: flex;
  grid-area: 1 / 1;
  align-items: center;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0s linear 0.7s;
}

.whats-blooming__slide > .whats-blooming__item {
  flex: 1;
}

.whats-blooming__slide[data-current] {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s ease;
}

.whats-blooming__controls {
  display: flex;
  grid-column: 2;
  grid-row: 1;
  align-items: center;
  gap: 0.4rem;
  visibility: hidden;
}

.whats-blooming[data-ready] .whats-blooming__controls {
  visibility: visible;
}

.whats-blooming__control {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--muted);
  border-radius: 50%;
  background: transparent;
  color: var(--navy);
  cursor: pointer;
}

/* Hover and keyboard focus fill the control navy; focus adds the site's gold
   ring, so it stands out clearly against the cream. */
.whats-blooming__control:hover,
.whats-blooming__control:focus-visible {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--cream);
}

.whats-blooming__control:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.whats-blooming__icon {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.whats-blooming__icon--play {
  display: none;
  fill: currentColor;
  stroke-width: 1.2;
}

.whats-blooming__control--rotate[data-state="stopped"] .whats-blooming__icon--pause {
  display: none;
}

.whats-blooming__control--rotate[data-state="stopped"] .whats-blooming__icon--play {
  display: block;
}

.whats-blooming__count {
  min-width: 2.4em;
  margin-left: 0.3rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

@media (prefers-reduced-motion: reduce) {
  .whats-blooming__control--rotate {
    display: none;
  }

  .whats-blooming__slide,
  .whats-blooming__slide[data-current] {
    transition: none;
  }
}

/* Narrower tablets: the label and the /news link above, the update below. */
@media (min-width: 641px) and (max-width: 999px) {
  .whats-blooming__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "label all"
      "stage stage";
    row-gap: 0.85rem;
  }

  .whats-blooming__label {
    grid-area: label;
    padding-right: 0;
    border-right: 0;
  }

  .whats-blooming__stage {
    grid-area: stage;
  }

  .whats-blooming__all {
    grid-area: all;
    padding-left: 0;
    border-left: 0;
  }
}

/* Phones: label, then the update with its action beneath, then the controls
   and the /news link. */
@media (max-width: 640px) {
  .whats-blooming__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "label label"
      "stage stage"
      "controls all";
    row-gap: 0.9rem;
    padding-block: 1.35rem 1.4rem;
  }

  .whats-blooming__label {
    grid-area: label;
    padding-right: 0;
    border-right: 0;
  }

  .whats-blooming__stage {
    display: contents;
  }

  .whats-blooming__stage > .whats-blooming__item,
  .whats-blooming__slides {
    grid-area: stage;
  }

  .whats-blooming__controls {
    grid-area: controls;
  }

  .whats-blooming__all {
    grid-area: all;
    padding-left: 0;
    border-left: 0;
  }

  .whats-blooming:not(.whats-blooming--carousel) .whats-blooming__all {
    grid-column: 1 / -1;
  }

  .whats-blooming__slide {
    align-items: flex-start;
  }

  .whats-blooming__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .whats-blooming__title {
    font-size: 1.45rem;
  }

  .whats-blooming__go,
  .whats-blooming__all {
    font-size: 0.92rem;
  }
}