/* ==========================================================================
   Bluffs Landing . Area Events
   --------------------------------------------------------------------------
   The calendar of gatherings around Corpus Christi, and the detail page for
   each one. Depends on bluffs-components.css for cards, buttons, heroes and
   CTA bands; everything here is specific to the calendar.

   Band colours are carried by a small dot rather than a filled pill, so the
   label text always sits at full Laguna contrast instead of fighting a
   mid-tone background.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Contrast corrections
   --------------------------------------------------------------------------
   Three shared components fall under WCAG AA where these pages use them, as
   measured by Lighthouse. They are corrected here rather than in
   bluffs-components.css so no other page's appearance changes without review,
   but the same failures exist wherever those components appear:

     .bluffs-card--event .bluffs-card__eyebrow   Marina Teal on white  3.02:1
     .bluffs-eyebrow--brass                      Brass on a pale panel 3.14:1
     .bluffs-cta-band--seagrass .__lede          White at 92% on Seagrass 4.35:1

   All three carry text at or below 16px, so AA asks for 4.5:1.
   -------------------------------------------------------------------------- */

.bluffs-area-events .bluffs-card--event .bluffs-card__eyebrow,
.bluffs-area-event .bluffs-card--event .bluffs-card__eyebrow {
  /* Seagrass reaches 4.81:1 on white and keeps the green note Marina Teal gave. */
  color: var(--bluffs-seagrass);
}

.bluffs-area-events .bluffs-eyebrow--brass,
.bluffs-area-event .bluffs-eyebrow--brass {
  /* Brass deepened to 5.17:1 on the pale panel. Still brass, just readable. */
  color: #7D6237;
}

.bluffs-area-events .bluffs-cta-band--seagrass .bluffs-cta-band__lede,
.bluffs-area-event .bluffs-cta-band--seagrass .bluffs-cta-band__lede {
  /* Full white rather than 92%, which lifts 4.35:1 to 4.81:1. */
  color: var(--bluffs-white);
}

/* --------------------------------------------------------------------------
   2. Section heads and the stay rationale
   -------------------------------------------------------------------------- */

.bluffs-area-events .bluffs-section-head,
.bluffs-area-event .bluffs-section-head {
  max-width: 44rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.bluffs-area-events .bluffs-section-head .bluffs-h2,
.bluffs-area-event .bluffs-section-head .bluffs-h2 {
  margin: 0.5rem 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  color: var(--bluffs-laguna);
}

.bluffs-section--oyster .bluffs-section-head .bluffs-h2 {
  color: var(--bluffs-laguna);
}

.bluffs-why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: clamp(1.75rem, 3.5vw, 3rem);
}

.bluffs-why__title {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--bluffs-laguna);
}

.bluffs-why p {
  margin: 0;
  color: var(--bluffs-laguna);
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   3. Filters
   -------------------------------------------------------------------------- */

.bluffs-calendar__filters {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  padding: 0;
  border: 0;
}

.bluffs-filter-group {
  margin: 0 0 1.25rem;
  padding: 0;
  border: 0;
}

.bluffs-filter-group__legend {
  padding: 0;
  margin-bottom: 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bluffs-driftwood);
}

.bluffs-filter-group__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bluffs-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0.45rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--bluffs-laguna);
  background-color: var(--bluffs-white);
  border: 1px solid var(--bluffs-oyster);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 180ms var(--ease-out-soft), border-color 180ms var(--ease-out-soft), color 180ms var(--ease-out-soft);
}

.bluffs-chip:hover {
  border-color: var(--bluffs-seagrass);
  background-color: var(--bluffs-salt-soft);
}

.bluffs-chip.is-active {
  color: var(--bluffs-white);
  background-color: var(--bluffs-laguna);
  border-color: var(--bluffs-laguna);
  font-weight: 600;
}

.bluffs-chip:focus-visible {
  outline: 2px solid var(--bluffs-copper);
  outline-offset: 2px;
}

.bluffs-chip__count {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--bluffs-driftwood);
}

.bluffs-chip.is-active .bluffs-chip__count {
  color: var(--bluffs-oyster);
}

.bluffs-calendar__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--bluffs-oyster);
}

.bluffs-calendar__count {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--bluffs-driftwood);
}

.bluffs-calendar__reset {
  padding: 0.3rem 0;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--bluffs-laguna);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--bluffs-brass);
  cursor: pointer;
}

.bluffs-calendar__reset:hover {
  color: var(--bluffs-copper);
  border-bottom-color: var(--bluffs-copper);
}

.bluffs-calendar__reset:focus-visible {
  outline: 2px solid var(--bluffs-copper);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   4. The grid
   -------------------------------------------------------------------------- */

.bluffs-calendar__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
  gap: clamp(1.5rem, 2.5vw, 2.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Detail pages show up to three related events. Collapse unused columns so
   those cards span the centered container instead of leaving an empty slot. */
.bluffs-area-event .bluffs-calendar__grid {
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}

.bluffs-calendar__cell {
  display: flex;
  margin: 0;
}

/*
 * The browser hides [hidden] with a UA rule of the same specificity as a class
 * selector, so .bluffs-calendar__cell { display: flex } above wins on source
 * order and a filtered-out card stays on screen. The filter JS was setting
 * .hidden correctly the whole time and the count was right; only the rendering
 * disagreed. Matching the attribute alongside the class takes the specificity
 * to 0,2,0 and settles it without !important.
 */
.bluffs-calendar__cell[hidden],
.bluffs-calendar__divider[hidden] {
  display: none;
}

.bluffs-calendar__cell > .bluffs-card {
  width: 100%;
}

.bluffs-calendar__divider {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: clamp(0.5rem, 1.5vw, 1.25rem) 0 0;
}

.bluffs-calendar__divider:first-child {
  margin-top: 0;
}

.bluffs-calendar__month {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--bluffs-laguna);
  white-space: nowrap;
}

.bluffs-calendar__divider .bluffs-rule {
  flex: 1 1 auto;
  min-width: 2rem;
}

.bluffs-calendar__empty {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  font-family: var(--font-sans);
  text-align: center;
  color: var(--bluffs-laguna);
  background-color: var(--bluffs-white);
  border: 1px solid var(--bluffs-oyster);
  border-radius: var(--card-radius);
}

.bluffs-calendar__all {
  margin: clamp(2rem, 3vw, 2.5rem) 0 0;
}

/* --------------------------------------------------------------------------
   5. The event card
   -------------------------------------------------------------------------- */

.bluffs-event-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.bluffs-event-card .bluffs-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
}

.bluffs-event-card__when {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 2;
  margin: 0;
  max-width: calc(100% - 1.5rem);
}

.bluffs-event-card__when-text {
  display: inline-block;
  padding: 0.35rem 0.7rem;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bluffs-laguna);
  background-color: var(--bluffs-salt);
  border-radius: 2px;
}

.bluffs-event-card .bluffs-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.bluffs-event-card .bluffs-card__title {
  margin-block: 0.35rem 0.5rem;
}

.bluffs-event-card .bluffs-card__title a {
  color: inherit;
  text-decoration: none;
}

.bluffs-event-card .bluffs-card__title a:hover {
  color: var(--bluffs-copper);
}

.bluffs-event-card .bluffs-card__title a:focus-visible {
  outline: 2px solid var(--bluffs-copper);
  outline-offset: 3px;
}

.bluffs-event-card__where {
  margin: 0 0 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--bluffs-driftwood);
}

.bluffs-event-card__drive {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.85rem;
}

.bluffs-event-card__band {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.6rem 0.25rem 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bluffs-laguna);
  background-color: var(--bluffs-salt-soft);
  border-radius: 999px;
}

.bluffs-event-card__band::before {
  content: "";
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--bluffs-driftwood);
}

.bluffs-event-card__band--close::before   { background-color: var(--bluffs-seagrass); }
.bluffs-event-card__band--nearby::before  { background-color: var(--bluffs-marina-teal); }
.bluffs-event-card__band--city::before    { background-color: var(--bluffs-laguna); }
.bluffs-event-card__band--bridge::before  { background-color: var(--bluffs-brass); }
.bluffs-event-card__band--daytrip::before { background-color: var(--bluffs-copper); }

.bluffs-event-card__minutes {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--bluffs-driftwood);
}

.bluffs-event-card .bluffs-card__excerpt {
  flex: 1 1 auto;
}

.bluffs-event-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--bluffs-oyster);
}

/* --------------------------------------------------------------------------
   6. The event detail panel
   -------------------------------------------------------------------------- */

.bluffs-event-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  background-color: var(--bluffs-white);
  border: 1px solid var(--bluffs-oyster);
  border-radius: var(--card-radius);
}

.bluffs-event-panel__specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
  gap: 1.5rem;
  margin: 0;
}

.bluffs-event-panel__specs > div {
  min-width: 0;
}

.bluffs-event-panel__specs dt {
  margin-bottom: 0.4rem;
}

.bluffs-event-panel__specs dd {
  margin: 0;
}

/*
 * The shared .bluffs-specs__value is sized for short figures such as a guest
 * count. A venue name is a phrase, and at that size it stacks into a narrow
 * tower. Bring it down to an editorial size, set it in the display face, and
 * let long names break cleanly.
 */
.bluffs-event-panel__specs .bluffs-specs__value {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.6vw, 1.625rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

.bluffs-event-panel__book {
  text-align: left;
}

.bluffs-event-panel__note {
  margin: 0.85rem 0 0;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--bluffs-driftwood);
}

.bluffs-event-official {
  margin: clamp(1.5rem, 3vw, 2rem) 0 0.5rem;
}

.bluffs-event-official__note {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--bluffs-driftwood);
}

/* --------------------------------------------------------------------------
   7. Narrow screens and motion
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .bluffs-event-panel {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

@media (max-width: 600px) {
  .bluffs-filter-group__options {
    gap: 0.4rem;
  }

  .bluffs-chip {
    font-size: 0.8125rem;
    padding-inline: 0.8rem;
  }

  .bluffs-calendar__divider {
    gap: 0.85rem;
  }

  .bluffs-event-card__actions {
    gap: 0.75rem;
  }

  .bluffs-event-card__actions .bluffs-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bluffs-chip {
    transition: none;
  }
}