/* =========================================================================
   DISCOVER GAY DALLAS — HOUSTON EDITION · COMPONENTS
   Houston skins for the shared dgd-core render-helper output and copied
   patterns: buttons, cards (+ event/directory variants), date badges, the
   tabbed carousel, section heads, badges, and the quiet-night fallback.
   All values flow from theme.json tokens via the --dgd-* aliases in base.css.
   ========================================================================= */

/* =========================================================================
   BUTTONS
   dgd_render_cta_button() emits .is-style-dgd-ad-{neon|outline|ghost};
   the editor also offers .is-style-htx-{lemon|outline|ghost}. We skin both.
   ========================================================================= */

.wp-block-button.is-style-dgd-ad-neon .wp-block-button__link,
.wp-block-button.is-style-htx-primary .wp-block-button__link {
  background: var(--dgd-ocean) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--dgd-radius-sm);
  font-family: "Barlow", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.9rem 1.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: transform 0.3s var(--dgd-ease), box-shadow 0.3s var(--dgd-ease), background 0.3s var(--dgd-ease);
  box-shadow: 0 6px 18px rgba(0, 122, 192, 0.22);
}
.wp-block-button.is-style-dgd-ad-neon .wp-block-button__link:hover,
.wp-block-button.is-style-htx-primary .wp-block-button__link:hover {
  background: var(--dgd-ocean-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0, 82, 137, 0.30);
}

/* Lemon accent button — Houston's high-visibility CTA */
.wp-block-button.is-style-htx-lemon .wp-block-button__link {
  background: var(--dgd-lemon) !important;
  color: var(--dgd-ink) !important;
  border: 0 !important;
  border-radius: var(--dgd-radius-sm);
  font-family: "Barlow", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 0.9rem 1.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: transform 0.3s var(--dgd-ease), box-shadow 0.3s var(--dgd-ease), background 0.3s var(--dgd-ease);
  box-shadow: 0 6px 18px rgba(250, 218, 48, 0.30);
}
.wp-block-button.is-style-htx-lemon .wp-block-button__link:hover {
  background: var(--dgd-orange) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(255, 179, 0, 0.32);
}

/* Outline button */
.wp-block-button.is-style-dgd-ad-outline .wp-block-button__link,
.wp-block-button.is-style-htx-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--dgd-ocean) !important;
  border: 2px solid var(--dgd-ocean) !important;
  border-radius: var(--dgd-radius-sm);
  padding: calc(0.9rem - 2px) calc(1.6rem - 2px);
  font-family: "Barlow", system-ui, sans-serif;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s var(--dgd-ease);
}
.wp-block-button.is-style-dgd-ad-outline .wp-block-button__link:hover,
.wp-block-button.is-style-htx-outline .wp-block-button__link:hover {
  background: var(--dgd-ocean) !important;
  color: #fff !important;
}

/* Ghost / on-dark outline button */
.wp-block-button.is-style-dgd-ad-ghost .wp-block-button__link,
.wp-block-button.is-style-htx-ghost .wp-block-button__link {
  background: transparent !important;
  color: currentColor !important;
  border: 2px solid currentColor !important;
  border-radius: var(--dgd-radius-sm);
  padding: calc(0.9rem - 2px) calc(1.6rem - 2px);
  font-family: "Barlow", system-ui, sans-serif;
  font-weight: 700;
  text-decoration: none;
  opacity: 0.92;
  transition: all 0.3s var(--dgd-ease);
}
.wp-block-button.is-style-dgd-ad-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-htx-ghost .wp-block-button__link:hover {
  background: currentColor !important;
  color: var(--dgd-ocean-deep) !important;
  opacity: 1;
}

/* =========================================================================
   SECTION HEAD  (eyebrow + display title, optional script accent)
   ========================================================================= */

.dgd-sec-head { margin-bottom: clamp(1.25rem, 0.8rem + 1.5vw, 2.25rem); }
.dgd-sec-head__eyebrow {
  font-family: var(--wp--preset--font-family--condensed, "Barlow Condensed", sans-serif);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dgd-ocean);
  margin: 0 0 0.5rem;
}
.dgd-sec-head__title {
  font-family: "Barlow", sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 0;
  text-transform: uppercase;
}
.dgd-sec-head__title em {
  font-family: "Kaushan Script", cursive;
  font-weight: 400;
  font-style: normal;
  text-transform: none;
  color: var(--dgd-ocean);
  letter-spacing: 0;
}
.dgd-sec-head--condensed .dgd-sec-head__title { letter-spacing: -0.01em; }
.dgd-sec-head--center { text-align: center; }
.dgd-sec-head--on-dark .dgd-sec-head__title { color: #fff; }
.dgd-sec-head--on-dark .dgd-sec-head__eyebrow { color: var(--dgd-lemon); }
.dgd-sec-head--on-dark .dgd-sec-head__title em { color: var(--dgd-lemon); }

/* =========================================================================
   CANONICAL CARD  (output of dgd_render_card)
   ========================================================================= */

.dgd-card {
  background: #fff;
  border: 1px solid var(--dgd-border);
  border-radius: var(--dgd-radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--dgd-ink);
  box-shadow: var(--dgd-shadow-soft);
  transition: transform 0.3s var(--dgd-ease), border-color 0.3s var(--dgd-ease), box-shadow 0.3s var(--dgd-ease);
}
.dgd-card:hover,
.dgd-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--dgd-ocean);
  box-shadow: var(--dgd-shadow-lift);
}

.dgd-card__media {
  width: 100%;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--dgd-ocean-light);
}
.dgd-card__media-bg {
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s var(--dgd-ease);
}
.dgd-card:hover .dgd-card__media-bg,
.dgd-card:focus-within .dgd-card__media-bg { transform: scale(1.06); }

/* Colored underline that wipes in along the photo bottom on hover — a pride
   flourish in the Houston layout. */
.dgd-card__media::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--wp--preset--gradient--pride-rainbow, linear-gradient(90deg, #EB52A1, #FFB300, #FADA30, #00A6CE, #007AC0, #005289));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s var(--dgd-ease);
  z-index: 2;
}
.dgd-card:hover .dgd-card__media::after,
.dgd-card:focus-within .dgd-card__media::after { transform: scaleX(1); }

/* -------- Image-less card fallback: gradient panel + category glyph --------
   Emitted by dgd_fallback_media_html() and the directory event card when a card
   has no real featured image (see dgd_placeholder_safe_url). The glyph is
   decorative (aria-hidden); the card's real title in the body stays the legible,
   accessible name — so this just keeps the media from reading as a broken block.
   Hover motion substitutes for the base media-bg scale, which is imperceptible
   on a flat panel. Reduced-motion is handled by the global net in base.css. */
.dgd-card__media-bg--fallback { position: absolute; inset: 0; overflow: hidden; }
.dgd-card__media-bg--fallback::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.18) 50%, transparent 62%);
  transform: translateX(-130%);
  transition: transform 0.65s var(--dgd-ease);
}
.dgd-card__glyph {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(44px, 24%, 78px);
  color: #fff;
  opacity: 0.82;
  pointer-events: none;
  z-index: 1;
  transition: transform 0.4s var(--dgd-ease);
}
.dgd-card__glyph svg { display: block; width: 100%; height: auto; }
.dgd-card.is-imageless:hover .dgd-card__glyph,
.dgd-card.is-imageless:focus-within .dgd-card__glyph { transform: translate(-50%, -58%) scale(1.08); }
.dgd-card.is-imageless:hover .dgd-card__media-bg--fallback::before,
.dgd-card.is-imageless:focus-within .dgd-card__media-bg--fallback::before { transform: translateX(130%); }
/* Directory event card uses .dgd-directory__card-image (its own positioned
   media box) rather than .dgd-card__media, so anchor the glyph there too. */
.dgd-directory__card-image { position: relative; }

.dgd-card__body {
  padding: 1rem 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1 1 auto;
}
.dgd-card__eyebrow {
  font-family: var(--wp--preset--font-family--condensed, "Barlow Condensed", sans-serif);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dgd-ocean);
  margin: 0;
}
.dgd-card__title {
  font-family: "Barlow", sans-serif;
  font-size: 1.18rem;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--dgd-ink);
}
.dgd-card__meta { margin: 0; font-size: 0.8rem; color: var(--dgd-muted); }
.dgd-card__copy { font-size: 0.9rem; color: var(--dgd-ink-soft); line-height: 1.45; }
.dgd-card__copy p { margin: 0; }
.dgd-card__time { font-size: 0.82rem; color: var(--dgd-muted); margin: 0; font-weight: 600; }

.dgd-card__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.6rem;
  flex-wrap: wrap;
}
.dgd-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--dgd-ocean);
  color: #fff;
  padding: 0.5rem 0.95rem;
  border-radius: var(--dgd-radius-sm);
  font-family: "Barlow", sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.dgd-card__cta:hover,
.dgd-card__cta:focus-visible { background: var(--dgd-ocean-dark); transform: translateY(-1px); }
.dgd-card__link {
  color: var(--dgd-ocean);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 1px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.dgd-card__link:hover,
.dgd-card__link:focus-visible { color: var(--dgd-ocean-dark); border-color: var(--dgd-lemon); }

/* ---------- Variant: --event (lemon date badge, Houston event card) ---------- */
.dgd-card--event { background: #fff; }
.dgd-card--event .dgd-card__media { aspect-ratio: 5 / 3; }
.dgd-card--event .dgd-card__date {
  position: absolute;
  top: 0; left: 0;
  z-index: 3;
  background: var(--dgd-lemon);
  color: var(--dgd-ink);
  padding: 0.5rem 0.75rem 0.45rem;
  border-radius: 0 0 var(--dgd-radius-md) 0;
  font-family: "Barlow", sans-serif;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  min-width: 3.1rem;
  box-shadow: 0 4px 12px rgba(0, 23, 31, 0.18);
}
.dgd-card--event .dgd-card__date strong { display: block; font-size: 1.7rem; letter-spacing: -0.02em; }
.dgd-card--event .dgd-card__date span {
  display: block;
  font-family: var(--wp--preset--font-family--condensed, "Barlow Condensed", monospace);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 0.1rem;
}
.dgd-card--event .dgd-card__title { font-size: 1.3rem; line-height: 1.08; }

/* ---------- Variant: --directory / --news / --poster ---------- */
.dgd-card--directory,
.dgd-card--news { background: #fff; }
.dgd-card--event-poster { display: flex; flex-direction: column; }
.dgd-card--event-poster .dgd-card__media { aspect-ratio: 3 / 4; }
.dgd-card.is-hidden { display: none; }

@media (prefers-reduced-motion: reduce) {
  .dgd-card, .dgd-card__media-bg, .dgd-card__cta { transition: none; }
  .dgd-card:hover { transform: none; }
  .dgd-card:hover .dgd-card__media-bg { transform: none; }
}

/* =========================================================================
   DIRECTORY EVENT CARD  (dgd_render_directory_event_card inner DOM)
   Used in CPT archives and the homepage events carousel.
   ========================================================================= */

.dgd-directory__card-image {
  position: relative;
  aspect-ratio: 5 / 3;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.dgd-directory__card-badge {
  position: absolute;
  top: 0.7rem; right: 0.7rem;
  z-index: 3;
  background: rgba(255, 255, 255, 0.94);
  color: var(--dgd-ocean-dark);
  font-family: var(--wp--preset--font-family--condensed, "Barlow Condensed", sans-serif);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.28rem 0.6rem;
  border-radius: var(--dgd-radius-sm);
  box-shadow: 0 2px 8px rgba(0, 23, 31, 0.15);
}
.dgd-directory__card-datebadge {
  position: absolute;
  top: 0; left: 0;
  z-index: 3;
  background: var(--dgd-lemon);
  color: var(--dgd-ink);
  font-family: "Barlow", sans-serif;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  padding: 0.5rem 0.7rem 0.45rem;
  min-width: 3.1rem;
  border-radius: 0 0 var(--dgd-radius-md) 0;
  box-shadow: 0 4px 12px rgba(0, 23, 31, 0.18);
}
.dgd-directory__card-datebadge-mo {
  display: block;
  font-family: var(--wp--preset--font-family--condensed, "Barlow Condensed", sans-serif);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}
.dgd-directory__card-datebadge-day { display: block; font-size: 1.6rem; letter-spacing: -0.02em; }
.dgd-directory__card-datebadge--recurring .dgd-directory__card-datebadge-day { font-size: 1.05rem; }
.dgd-directory__card-price {
  position: absolute;
  bottom: 0.7rem; right: 0.7rem;
  z-index: 3;
  background: var(--dgd-ocean);
  color: #fff;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 0.25rem 0.55rem;
  border-radius: var(--dgd-radius-sm);
}
.dgd-directory__card-overlay { border-radius: 0 !important; }

.dgd-directory__card-body {
  padding: 1rem 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.dgd-directory__card-title {
  font-family: "Barlow", sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--dgd-ink);
}
.dgd-directory__card-vibe { margin: 0; font-size: 0.9rem; color: var(--dgd-ink-soft); line-height: 1.4; }
.dgd-directory__card-meta { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.82rem; color: var(--dgd-muted); }
.dgd-directory__card-when,
.dgd-directory__card-venue { display: inline-flex; align-items: center; gap: 0.4rem; }
.dgd-directory__card-when svg,
.dgd-directory__card-venue svg { flex: 0 0 auto; color: var(--dgd-ocean); }
.dgd-directory__card-venue { font-weight: 600; color: var(--dgd-ink); }
.dgd-directory__card-address { font-size: 0.78rem; color: var(--dgd-muted); padding-left: 1rem; }
.dgd-directory__card-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.3rem; }
.dgd-directory__card-tickets,
.dgd-directory__card-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: "Barlow", sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0.4rem 0.75rem;
  border-radius: var(--dgd-radius-sm);
  border: 0;
  cursor: pointer;
}
.dgd-directory__card-tickets { background: var(--dgd-ocean); color: #fff; }
.dgd-directory__card-nav { background: var(--dgd-ocean-light); color: var(--dgd-ocean-dark); }
.dgd-directory__card-nav:hover { background: var(--dgd-ocean); color: #fff; }

/* Touch ergonomics: on coarse pointers (phones/tablets) grow the small pill
   CTAs, secondary links, and the floated save star to the 44px minimum tap
   target — without changing desktop density. min-height + inline-flex keeps
   text baselines steady; .dgd-card__link uses a transparent ::before so its
   underline stays put while the hit area expands. */
@media (pointer: coarse) {
  .dgd-card__cta,
  .dgd-directory__card-tickets,
  .dgd-directory__card-nav { min-height: 44px; }
  .dgd-card__link { position: relative; }
  .dgd-card__link::before { content: ""; position: absolute; inset: -12px 0; }
  .dgd-star-btn,
  .dgd-directory__card .dgd-star-btn { width: 44px; height: 44px; }
}

/* =========================================================================
   TABBED CAROUSEL  (.dgd-tabcar) — Houston underline tabs
   ========================================================================= */

.dgd-tabcar { position: relative; padding: var(--dgd-pad-md) 0; }

.dgd-tabcar__tablist {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.5rem;
  margin: 1.25rem 0 2rem;
  padding: 0 0 0.15rem;
  border-bottom: 2px solid var(--dgd-border);
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.dgd-tabcar__tablist::-webkit-scrollbar { display: none; }

.dgd-tabcar__tab {
  position: relative;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--dgd-muted);
  font-family: var(--wp--preset--font-family--condensed, "Barlow Condensed", sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0.5rem 0.15rem 0.85rem;
  cursor: pointer;
  min-height: 44px;
  transition: color 0.2s ease;
}
.dgd-tabcar__tab::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 3px;
  background: var(--dgd-lemon);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s var(--dgd-ease);
}
.dgd-tabcar__tab:hover { color: var(--dgd-ink); }
.dgd-tabcar__tab[aria-selected="true"] { color: var(--dgd-ocean); }
.dgd-tabcar__tab[aria-selected="true"]::after { transform: scaleX(1); }

.dgd-tabcar__panel[hidden] { display: none; }
.dgd-tabcar__panel { position: relative; }

.dgd-tabcar__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(13.5rem, 26vw, 20rem);
  gap: var(--wp--preset--spacing--30, 1.25rem);
  align-items: stretch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--dgd-gutter);
  padding-bottom: 0.5rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.dgd-tabcar__track::-webkit-scrollbar { display: none; }
.dgd-tabcar__track > * { scroll-snap-align: start; }

.dgd-tabcar__nav-row { display: flex; justify-content: flex-end; gap: 0.5rem; margin: 1.25rem 0 0; }
.dgd-tabcar__nav {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--dgd-radius-sm);
  border: 2px solid var(--dgd-border);
  background: #fff;
  color: var(--dgd-ocean);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.dgd-tabcar__nav:hover { border-color: var(--dgd-ocean); background: var(--dgd-ocean); color: #fff; }
.dgd-tabcar__nav:active { transform: scale(0.94); }
.dgd-tabcar__nav svg { width: 20px; height: 20px; display: block; }
.dgd-tabcar__nav[disabled] { opacity: 0.35; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .dgd-tabcar__track { scroll-behavior: auto; }
  .dgd-tabcar__nav:active { transform: none; }
}

/* The tabs pattern's inline <style> sets .dgd-experience bg to the blush wash;
   override to the ocean-light wash so the wavy white edges read crisply. */
.dgd-experience { background: var(--dgd-ocean-light) !important; }
.dgd-experience .dgd-watermark { color: var(--dgd-ocean); }

/* =========================================================================
   BADGES  (dgd_render_*_badge)
   ========================================================================= */

.dgd-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--wp--preset--font-family--condensed, "Barlow Condensed", sans-serif);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.22rem 0.55rem;
  border-radius: var(--dgd-radius-sm);
  background: var(--dgd-ocean-light);
  color: var(--dgd-ocean-dark);
}
.dgd-badge--featured { background: var(--dgd-lemon); color: var(--dgd-ink); }
.dgd-badge--cancelled,
.dgd-badge--sold-out { background: #FBE3E3; color: var(--dgd-danger, #B32D2E); }
.dgd-badge--postponed { background: var(--dgd-sun-wash); color: var(--dgd-orange); }

/* =========================================================================
   QUIET-NIGHT FALLBACK  (dgd_quiet_fallback)
   ========================================================================= */

.dgd-quiet--panel {
  background: var(--dgd-ocean-light);
  border: 1px solid var(--dgd-border);
  border-left: 4px solid var(--dgd-ocean);
  border-radius: var(--dgd-radius-md);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.dgd-quiet__eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--wp--preset--font-family--condensed, "Barlow Condensed", sans-serif);
  font-weight: 700; font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dgd-ocean); margin: 0;
}
.dgd-quiet__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--dgd-lemon); box-shadow: 0 0 0 4px rgba(250, 218, 48, 0.3); }
.dgd-quiet__title { font-family: "Barlow", sans-serif; font-weight: 800; font-size: 1.4rem; line-height: 1.1; margin: 0; color: var(--dgd-ink); }
.dgd-quiet__msg { margin: 0; color: var(--dgd-ink-soft); }
.dgd-quiet__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 0.4rem; }
.dgd-quiet__cta {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--dgd-ocean); color: #fff;
  font-family: "Barlow", sans-serif; font-weight: 700; font-size: 0.9rem;
  padding: 0.6rem 1.1rem; border-radius: var(--dgd-radius-sm); text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.dgd-quiet__cta:hover { background: var(--dgd-ocean-dark); transform: translateY(-1px); }
.dgd-quiet__nhood { display: inline-flex; flex-direction: column; text-decoration: none; color: var(--dgd-ocean); }
.dgd-quiet__nhood-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dgd-muted); }
.dgd-quiet__nhood-name { font-weight: 700; }
.dgd-quiet__cadence { margin: 0.3rem 0 0; font-size: 0.78rem; color: var(--dgd-muted); }
.dgd-quiet--inline { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--dgd-ink-soft); }
.dgd-quiet--inline .dgd-quiet__link { color: var(--dgd-ocean); font-weight: 700; text-decoration: none; }

/* =========================================================================
   CARD SURFACE block style (.is-style-dgd-ad-card / .is-style-htx-card)
   ========================================================================= */

.wp-block-group.is-style-dgd-ad-card,
.wp-block-group.is-style-htx-card {
  background: #fff;
  color: var(--dgd-ink);
  border: 1px solid var(--dgd-border);
  border-radius: var(--dgd-radius-md);
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  box-shadow: var(--dgd-shadow-card);
  transition: transform 0.3s var(--dgd-ease), box-shadow 0.3s var(--dgd-ease);
}
.wp-block-group.is-style-dgd-ad-card:hover,
.wp-block-group.is-style-htx-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--dgd-shadow-lift);
}

/* =========================================================================
   MY TRIP — ui.js-injected save button, floating chip, rail
   ========================================================================= */

.dgd-star-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0.5rem 1.1rem 1rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--dgd-ocean-light);
  color: var(--dgd-ocean-dark);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.dgd-star-btn:hover { background: var(--dgd-ocean); color: #fff; transform: translateY(-1px); }
.dgd-star-btn[aria-pressed="true"] { background: var(--dgd-lemon); color: var(--dgd-ink); }
.dgd-star-btn svg { width: 18px; height: 18px; }
/* In directory event cards, float the save control over the photo's
   bottom-right so it doesn't add an empty bar at the card foot. */
.dgd-directory__card { position: relative; }
.dgd-directory__card .dgd-star-btn {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  margin: 0;
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--dgd-ocean-dark);
  box-shadow: 0 2px 8px rgba(0, 23, 31, 0.18);
  z-index: 4;
}
.dgd-directory__card .dgd-directory__card-badge { top: 0.6rem; right: 3.4rem; }
.dgd-directory__card .dgd-star-btn[aria-pressed="true"] { background: var(--dgd-lemon); color: var(--dgd-ink); }

/* "Tonight" urgency: a magenta pill (bottom-left of the media, clear of the
   date/type badges) + a static magenta ring so today's events pop in the rail.
   Ring is static — reduced-motion-safe and doesn't fight the card hover. */
.dgd-directory__card-tonight {
  position: absolute;
  left: 0.6rem;
  bottom: 0.6rem;
  z-index: 4;
  padding: 0.28rem 0.6rem;
  border-radius: var(--dgd-radius-pill);
  background: var(--dgd-magenta);
  color: #fff;
  font-family: var(--wp--preset--font-family--condensed, "Barlow Condensed", sans-serif);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0, 23, 31, 0.2);
}
.dgd-directory__card.is-today { box-shadow: 0 0 0 2px var(--dgd-magenta), var(--dgd-shadow-card); }
.dgd-directory__card.is-today:hover,
.dgd-directory__card.is-today:focus-within { box-shadow: 0 0 0 2px var(--dgd-magenta), var(--dgd-shadow-lift); }

/* Floating "My Trip" chip (ui.js builds .dgd-trip-chip with a __count).
   Hidden until the user has saved ≥1 item — ui.js toggles .is-visible in
   updateTripChip(). visibility:hidden also drops it from the tab order while
   empty, so no focusable control is stranded off-screen. */
.dgd-trip-chip {
  position: fixed;
  right: 1.1rem;
  bottom: calc(1.1rem + env(safe-area-inset-bottom));
  z-index: 150;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.1rem;
  border: 0;
  border-radius: 999px;
  background: var(--dgd-ocean);
  color: #fff;
  font-family: "Barlow", sans-serif;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 23, 31, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.28s var(--dgd-ease), transform 0.28s var(--dgd-ease),
              visibility 0.28s var(--dgd-ease), background 0.2s ease;
}
.dgd-trip-chip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
.dgd-trip-chip.is-visible:hover { transform: translateY(-2px); background: var(--dgd-ocean-dark); }
/* On phones, collapse to an icon + count pill so it never covers card CTAs.
   aria-label ("Open My Trip") keeps it accessible without the visible label. */
@media (max-width: 600px) {
  .dgd-trip-chip { padding: 0.6rem 0.8rem; gap: 0.4rem; }
  .dgd-trip-chip__cta,
  .dgd-trip-chip__divider { display: none; }
}
.dgd-trip-chip__count {
  display: inline-grid;
  place-items: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--dgd-lemon);
  color: var(--dgd-ink);
  font-size: 0.78rem;
  font-weight: 800;
}
.dgd-trip-chip[hidden] { display: none; }
.dgd-trip-chip__count.is-bumped,
.dgd-util__trip-count.is-bumped { animation: dgd-count-bump 0.3s var(--dgd-ease); }

/* -------------------------------------------------------------------------
   Save feedback: toast + star pulse + count bump.
   ui.js emits these classes (showToast builds .dgd-toast/.is-visible;
   addStarToCard toggles .dgd-star-btn--pulse; updateTripChip toggles
   .is-bumped) but the theme never shipped the matching styles, so the core
   "My Trip" confirmation was invisible. Reduced-motion is handled by the
   global net in base.css (transition/animation durations zeroed).
   ------------------------------------------------------------------------- */
.dgd-toast {
  position: fixed;
  left: 50%;
  bottom: calc(1.5rem + env(safe-area-inset-bottom));
  z-index: 400;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  max-width: min(92vw, 30rem);
  padding: 0.8rem 1.15rem;
  border-radius: var(--dgd-radius-lg);
  /* Hairline separates the ink pill from dark pages; shadow carries it on
     light pages. Lemon left edge is the brand accent. */
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-left: 3px solid var(--dgd-lemon);
  background: var(--dgd-ink);
  color: #fff;
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.3;
  box-shadow: var(--dgd-shadow-lift);
  opacity: 0;
  transform: translate(-50%, 14px);
  pointer-events: none;
  transition: opacity 0.3s var(--dgd-ease), transform 0.3s var(--dgd-ease);
}
.dgd-toast.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.dgd-toast__undo {
  flex: 0 0 auto;
  padding: 0.15rem 0.3rem;
  border: 0;
  background: none;
  color: var(--dgd-lemon);
  font-family: "Barlow", sans-serif;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.dgd-toast__undo:hover { text-decoration: underline; }
.dgd-toast__action {
  flex: 0 0 auto;
  padding: 0.35rem 0.7rem;
  border-radius: var(--dgd-radius-sm);
  background: var(--dgd-lemon);
  color: var(--dgd-ink);
  font-family: "Barlow", sans-serif;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.dgd-toast__action:hover { background: var(--dgd-orange); }

/* Star that arcs from the tapped save control to the trip chip (ui.js
   flyStarToChip). Fixed + centered on its point via the negative margin. */
.dgd-fly-star {
  position: fixed;
  z-index: 350;
  margin: -11px 0 0 -11px;
  color: var(--dgd-lemon);
  pointer-events: none;
  transition: transform 0.7s var(--dgd-ease), opacity 0.7s var(--dgd-ease);
  will-change: transform, opacity;
}
.dgd-fly-star svg { display: block; }

/* First-run coach tip anchored above the trip chip (ui.js maybeShowCoachTip). */
.dgd-coach-tip {
  position: fixed;
  z-index: 200;
  max-width: 15rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.7rem 0.85rem;
  border-radius: var(--dgd-radius-md);
  background: var(--dgd-ink);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: var(--dgd-shadow-lift);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.85rem;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s var(--dgd-ease), transform 0.3s var(--dgd-ease);
}
.dgd-coach-tip.is-visible { opacity: 1; transform: none; }
.dgd-coach-tip__close {
  flex: 0 0 auto;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.15rem;
}
.dgd-coach-tip__close:hover { color: #fff; }

@keyframes dgd-star-pulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(250, 218, 48, 0.55); }
  40%  { transform: scale(1.25); box-shadow: 0 0 0 7px rgba(250, 218, 48, 0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(250, 218, 48, 0); }
}
.dgd-star-btn--pulse { animation: dgd-star-pulse 0.4s var(--dgd-ease); }

@keyframes dgd-count-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* =========================================================================
   SCROLL-REVEAL SAFETY for cards inside horizontal scrollers / hidden tab
   panels. ui.js tags every .dgd-card with .dgd-reveal (opacity:0) and reveals
   it on vertical viewport intersection — but cards scrolled off-screen in a
   carousel, or sitting in a [hidden] tab panel, may never intersect and would
   stick invisible when later shown. Whole bands still reveal; these cards just
   show immediately.
   ========================================================================= */
.dgd-tabcar__track .dgd-card.dgd-reveal,
.htx-carousel__track .dgd-card.dgd-reveal,
.dgd-tabcar__panel[hidden] .dgd-card.dgd-reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ---------- Imageless media fallbacks (heroes + trending) ---------- */
/* Anchor the centered glyph wherever the fallback modifier appears. */
.htx-media--fallback { position: relative; }
/* Size the positioned SPAN (it owns the left:50%/translate centering); the
   base .dgd-card__glyph svg { width:100% } rule then fills it. Sizing the
   svg directly left it overflowing the 78px span ~25px right of center. */
.dgd-card__glyph--hero { width: clamp(72px, 10vw, 128px); }