/* ==========================================================================
   Flurto — components.css
   Every class in the ARCHITECTURE.md inventory.
   Logical properties throughout so dir="rtl" mirrors perfectly.
   ========================================================================== */

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.navbar {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-nav);
  inline-size: 100%;
  background-color: var(--color-cream-glass);
  border-block-end: 1px solid var(--color-border);
  backdrop-filter: saturate(160%) blur(var(--blur-glass));
  -webkit-backdrop-filter: saturate(160%) blur(var(--blur-glass));
  transition: box-shadow var(--dur-base) var(--ease-soft),
              background-color var(--dur-base) var(--ease-soft);
}

.navbar--scrolled {
  box-shadow: var(--shadow-sm);
}

.navbar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-block-size: var(--navbar-h);
  inline-size: 100%;
  max-inline-size: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.navbar__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-extra);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  line-height: 1;
}

.navbar__logo::before {
  content: "";
  inline-size: 1.35rem;
  block-size: 1.35rem;
  flex: 0 0 auto;
  border-radius: var(--radius-blob-a);
  background: var(--grad-blob-a);
  box-shadow: var(--shadow-coral);
}

.navbar__links {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-3), 1.6vw, var(--space-6));
  margin-inline-start: auto;
  list-style: none;
}

.navbar__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-block: var(--space-2);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-muted);
  white-space: nowrap;
  transition: var(--transition-color);
}

.navbar__link::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 3px;
  border-radius: var(--radius-pill);
  background: var(--grad-primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease-out);
}

.navbar__link:hover {
  color: var(--color-ink);
}

.navbar__link:hover::after {
  transform: scaleX(1);
}

.navbar__link--active {
  color: var(--color-ink);
  font-weight: var(--weight-bold);
}

.navbar__link--active::after {
  transform: scaleX(1);
}

.navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-inline-start: var(--space-2);
  flex: 0 0 auto;
}

/* When the links list is *not* pushed by auto-margin (no links), keep spacing */
.navbar__links + .navbar__actions {
  margin-inline-start: var(--space-4);
}

/* Burger --------------------------------------------------------------- */
.navbar__burger {
  display: none;
  position: relative;
  z-index: var(--z-raised);
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  inline-size: 44px;
  block-size: 44px;
  padding: 10px;
  border-radius: var(--radius-md);
  background-color: transparent;
  color: var(--color-ink);
  transition: background-color var(--dur-base) var(--ease-soft);
}

.navbar__burger:hover {
  background-color: var(--color-surface-sunk);
}

.navbar__burger span,
.navbar__burger:empty::before,
.navbar__burger:empty::after {
  display: block;
  inline-size: 100%;
  block-size: 2.5px;
  border-radius: var(--radius-pill);
  background-color: currentColor;
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-fast) var(--ease-soft);
}

.navbar__burger:empty::before,
.navbar__burger:empty::after {
  content: "";
  position: absolute;
  inset-inline: 10px;
  inline-size: auto;
}

.navbar__burger:empty::before { inset-block-start: 14px; }
.navbar__burger:empty::after  { inset-block-end: 14px; }

.navbar--open .navbar__burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.navbar--open .navbar__burger span:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
.navbar--open .navbar__burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.navbar--open .navbar__burger:empty::before { transform: translateY(7.5px) rotate(45deg); }
.navbar--open .navbar__burger:empty::after  { transform: translateY(-7.5px) rotate(-45deg); }

/* Mobile / burger layout ------------------------------------------------ */
@media (max-width: 859.98px) {
  .navbar__inner {
    min-block-size: var(--navbar-h-mobile);
    gap: var(--space-3);
  }

  .navbar__burger {
    display: flex;
    order: 99;
  }

  .navbar__actions {
    margin-inline-start: auto;
    gap: var(--space-2);
  }

  .navbar__actions .btn {
    padding-block: 0.55rem;
    padding-inline: 0.95rem;
    font-size: var(--text-sm);
  }

  /* The dropdown panel */
  .navbar__links {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    z-index: var(--z-nav);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-inline-start: 0;
    padding-block: var(--space-3) var(--space-6);
    padding-inline: var(--container-pad);
    background-color: var(--color-cream);
    border-block-start: 1px solid var(--color-border);
    border-end-start-radius: var(--radius-xl);
    border-end-end-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    max-block-size: calc(100vh - var(--navbar-h-mobile));
    max-block-size: calc(100dvh - var(--navbar-h-mobile));
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity var(--dur-base) var(--ease-soft),
                transform var(--dur-base) var(--ease-out),
                visibility 0s linear var(--dur-base);
  }

  .navbar--open .navbar__links {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
  }

  .navbar__link {
    padding-block: var(--space-4);
    font-size: var(--text-md);
    border-block-end: 1px solid var(--color-border);
  }

  .navbar__link::after {
    inset-block-end: -1px;
    inset-inline-end: auto;
    inline-size: 42px;
  }

  .navbar__links .btn {
    margin-block-start: var(--space-5);
    inline-size: 100%;
  }
}

@media (max-width: 399.98px) {
  .navbar__actions .btn { display: none; }
}

/* ==========================================================================
   LANG TOGGLE
   ========================================================================== */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: 1;
  transition: var(--transition-color), box-shadow var(--dur-base) var(--ease-soft);
}

.lang-toggle:hover {
  border-color: var(--color-plum);
  box-shadow: var(--shadow-sm);
}

/* Single-button form: "EN / فا" */
button.lang-toggle,
a.lang-toggle {
  padding-block: 0.5rem;
  padding-inline: 0.9rem;
  gap: var(--space-2);
}

/* Two-option switch form */
.lang-toggle > button,
.lang-toggle > a,
.lang-toggle > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.4rem;
  padding-block: 0.42rem;
  padding-inline: 0.7rem;
  border-radius: var(--radius-pill);
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: 1;
  transition: var(--transition-color);
}

.lang-toggle > [aria-pressed="true"],
.lang-toggle > [aria-current="true"],
.lang-toggle > .is-active {
  background-color: var(--color-primary);
  color: var(--color-ink);
  box-shadow: var(--shadow-xs);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.75rem, 1.5rem + 5vw, 5.5rem) var(--space-section);
  background-image: var(--grad-hero);
  background-repeat: no-repeat;
}

.hero__inner {
  position: relative;
  z-index: var(--z-base);
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2rem, 1rem + 3vw, 4rem);
  }
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: 0.45rem;
  padding-inline: 0.95rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  border: 1.5px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  margin-block-end: var(--space-5);
}

.hero__title {
  font-size: var(--text-hero);
  font-weight: var(--weight-extra);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  max-inline-size: 16ch;
  text-wrap: balance;
}

.hero__title em {
  position: relative;
  font-style: normal;
  color: var(--color-primary-deep);
  white-space: nowrap;
}

.hero__title em::after {
  content: "";
  position: absolute;
  inset-block-end: 0.02em;
  inset-inline: -0.06em;
  block-size: 0.22em;
  z-index: -1;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-peach), var(--color-coral-300));
  opacity: 0.75;
}

.hero__subtitle {
  margin-block-start: var(--space-5);
  max-inline-size: 46ch;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-muted);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: var(--space-7);
}

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(var(--space-6), 3vw, var(--space-9));
  margin-block-start: var(--space-9);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--color-border);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-inline-size: 6.5rem;
}

.stat__value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-extra);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  line-height: 1.05;
}

.stat__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink-muted);
}

/* Hero art: layered blobs + CSS phone ----------------------------------- */
.hero__art {
  position: relative;
  display: grid;
  place-items: center;
  min-block-size: clamp(320px, 46vw, 520px);
  isolation: isolate;
}

.blob {
  position: absolute;
  z-index: -1;
  display: block;
  inline-size: clamp(140px, 22vw, 260px);
  aspect-ratio: 1;
  border-radius: var(--radius-blob-a);
  background: var(--grad-blob-a);
  opacity: 0.55;
  filter: blur(0.5px);
  pointer-events: none;
  animation: blob-drift 16s var(--ease-soft) infinite alternate;
}

.blob:nth-of-type(1),
.blob--1 {
  inset-block-start: 4%;
  inset-inline-start: 2%;
  background: var(--grad-blob-a);
  border-radius: var(--radius-blob-a);
  animation-delay: 0s;
}

.blob:nth-of-type(2),
.blob--2 {
  inset-block-end: 6%;
  inset-inline-end: 0%;
  inline-size: clamp(170px, 26vw, 300px);
  background: var(--grad-blob-b);
  border-radius: var(--radius-blob-b);
  opacity: 0.5;
  animation-delay: -5s;
}

.blob:nth-of-type(3),
.blob--3 {
  inset-block-start: 42%;
  inset-inline-end: 12%;
  inline-size: clamp(90px, 13vw, 150px);
  background: var(--grad-blob-c);
  border-radius: var(--radius-blob-c);
  opacity: 0.45;
  animation-delay: -10s;
}

@keyframes blob-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(0, -18px, 0) scale(1.06); }
}

/* CSS phone mockup ------------------------------------------------------ */
.phone-mock {
  position: relative;
  inline-size: clamp(200px, 46vw, 268px);
  aspect-ratio: 9 / 18.4;
  padding: 11px;
  border-radius: 44px;
  background:
    var(--grad-phone) content-box,
    var(--color-plum-800) border-box;
  box-shadow: var(--shadow-xl),
              0 0 0 2px var(--bezel-highlight) inset;
  transform: rotate(-3deg);
  transition: transform var(--dur-slow) var(--ease-out);
}

.hero__art:hover .phone-mock {
  transform: rotate(-1deg) translateY(var(--lift-md));
}

/* notch */
.phone-mock::before {
  content: "";
  position: absolute;
  inset-block-start: 19px;
  inset-inline: 0;
  margin-inline: auto;
  inline-size: 84px;
  block-size: 19px;
  border-radius: var(--radius-pill);
  background-color: var(--color-plum-800);
}

/* fake "profile card" stack on the screen — suppressed if real markup exists */
.phone-mock::after {
  content: "💜";
  position: absolute;
  inset-inline: 26px;
  inset-block-end: 44px;
  block-size: 44%;
  display: grid;
  place-items: center;
  font-family: var(--font-emoji);
  font-size: clamp(2rem, 6vw, 2.75rem);
  border-radius: var(--radius-xl);
  background: var(--color-white);
  box-shadow:
    0 -12px 0 -5px var(--sheen-1),
    0 -23px 0 -10px var(--sheen-2),
    var(--shadow-md);
}

.phone-mock:has(> *)::after {
  content: none;
}

.phone-mock > * {
  position: relative;
  z-index: var(--z-base);
}

/* Compact hero for inner pages ------------------------------------------ */
.hero--page {
  padding-block: clamp(2.25rem, 1.4rem + 3.2vw, 4rem) clamp(2rem, 1.3rem + 2.8vw, 3.5rem);
  text-align: center;
}

.hero--page .hero__inner {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: var(--space-4);
}

.hero--page .hero__title {
  font-size: var(--text-4xl);
  max-inline-size: 20ch;
  margin-inline: auto;
}

.hero--page .hero__subtitle {
  margin-inline: auto;
  max-inline-size: 54ch;
}

.hero--page .hero__art {
  display: none;
}

/* ==========================================================================
   CARDS — shared shell
   ========================================================================== */
.card,
.feature-card,
.event-card,
.step,
.pillar,
.testimonial,
.value-card,
.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  block-size: 100%;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-lift), border-color var(--dur-base) var(--ease-soft);
}

.card,
.feature-card,
.step,
.pillar,
.testimonial,
.value-card {
  padding: clamp(1.4rem, 1rem + 1.2vw, 2rem);
}

.card:hover,
.feature-card:hover,
.event-card:hover,
.pillar:hover,
.testimonial:hover,
.value-card:hover,
.post-card:hover {
  transform: translateY(var(--lift-md));
  box-shadow: var(--shadow-lg);
  border-color: var(--color-border-strong);
}

/* Feature card ---------------------------------------------------------- */
.feature-card__icon {
  display: grid;
  place-items: center;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  margin-block-end: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-coral-tint);
  font-family: var(--font-emoji);
  font-size: 1.6rem;
  line-height: 1;
  box-shadow: var(--shadow-inset-soft);
}

.feature-card:nth-child(6n + 2) .feature-card__icon { background: var(--color-lavender-tint); }
.feature-card:nth-child(6n + 3) .feature-card__icon { background: var(--color-sage-tint); }
.feature-card:nth-child(6n + 4) .feature-card__icon { background: var(--color-peach-tint); }
.feature-card:nth-child(6n + 5) .feature-card__icon { background: var(--color-lavender-tint); }
.feature-card:nth-child(6n)     .feature-card__icon { background: var(--color-sage-tint); }

.feature-card__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  margin-block-end: var(--space-3);
}

.feature-card__text {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-muted);
}

/* Event card ------------------------------------------------------------ */
.event-card {
  overflow: hidden;
  padding: 0;
}

.event-card__cover {
  position: relative;
  display: grid;
  place-items: center;
  min-block-size: clamp(130px, 18vw, 168px);
  background: var(--grad-event-1);
  font-family: var(--font-emoji);
  font-size: clamp(2.5rem, 5vw, 3.25rem);
  line-height: 1;
}

.event-card:nth-child(4n + 2) .event-card__cover { background: var(--grad-event-2); }
.event-card:nth-child(4n + 3) .event-card__cover { background: var(--grad-event-3); }
.event-card:nth-child(4n)     .event-card__cover { background: var(--grad-event-4); }

.event-card__tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding-block: 0.3rem;
  padding-inline: 0.75rem;
  border-radius: var(--radius-pill);
  background-color: var(--surface-frost);
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: var(--shadow-xs);
}

.event-card__cover .event-card__tag {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
}

.event-card__title {
  margin-block: 0 var(--space-2);
  padding-inline: clamp(1.1rem, 0.8rem + 1vw, 1.5rem);
  padding-block-start: clamp(1.1rem, 0.8rem + 1vw, 1.5rem);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
}

.event-card__meta {
  margin-block-start: auto;
  padding-inline: clamp(1.1rem, 0.8rem + 1vw, 1.5rem);
  padding-block-end: clamp(1.1rem, 0.8rem + 1vw, 1.5rem);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

/* Step ------------------------------------------------------------------ */
.step {
  align-items: flex-start;
  text-align: start;
  background-color: var(--color-surface);
}

.step__num {
  display: grid;
  place-items: center;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  margin-block-end: var(--space-5);
  border-radius: var(--radius-blob-a);
  background: var(--grad-primary);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-extra);
  line-height: 1;
  box-shadow: var(--shadow-coral);
}

.step__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  margin-block-end: var(--space-3);
}

.step__text {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-muted);
}

/* Pillar (safety) ------------------------------------------------------- */
.pillar {
  gap: var(--space-3);
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-2) 100%);
  border-start-start-radius: var(--radius-2xl);
  border-end-end-radius: var(--radius-2xl);
}

.pillar > :first-child:not(h2):not(h3):not(h4):not(p) {
  font-family: var(--font-emoji);
  font-size: 1.9rem;
  line-height: 1;
}

.pillar h3,
.pillar .pillar__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
}

.pillar p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-muted);
}

/* Testimonial ----------------------------------------------------------- */
.testimonial {
  gap: var(--space-5);
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-2) 100%);
}

.testimonial::before {
  content: "\201C";
  position: absolute;
  inset-block-start: -0.18em;
  inset-inline-end: 0.35em;
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: var(--weight-extra);
  line-height: 1;
  color: var(--color-coral-300);
  opacity: 0.5;
  pointer-events: none;
}

.testimonial__quote {
  position: relative;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-ink);
}

.testimonial__name {
  margin-block-start: auto;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
}

.testimonial__detail {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

/* Value card (about) ---------------------------------------------------- */
.value-card {
  gap: var(--space-3);
  background-color: var(--color-surface);
  border-start-end-radius: var(--radius-2xl);
  border-end-start-radius: var(--radius-2xl);
}

.value-card > :first-child:not(h2):not(h3):not(h4):not(p) {
  font-family: var(--font-emoji);
  font-size: 1.9rem;
  line-height: 1;
}

.value-card h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.value-card p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-muted);
}

/* ==========================================================================
   BLOG
   ========================================================================== */
.blog-grid {
  display: grid;
  gap: var(--gap-grid-lg);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.post-card {
  overflow: hidden;
  padding: 0;
  text-decoration: none;
  color: inherit;
}

.post-card__cover {
  position: relative;
  display: grid;
  place-items: center;
  min-block-size: clamp(140px, 20vw, 190px);
  background: var(--grad-1);
  font-family: var(--font-emoji);
  font-size: clamp(2.6rem, 5.5vw, 3.5rem);
  line-height: 1;
}

.post-card__cover--g1 { background: var(--grad-1); }
.post-card__cover--g2 { background: var(--grad-2); }
.post-card__cover--g3 { background: var(--grad-3); }
.post-card__cover--g4 { background: var(--grad-4); }
.post-card__cover--g5 { background: var(--grad-5); }
.post-card__cover--g6 { background: var(--grad-6); }

.post-card__category {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-inline: clamp(1.1rem, 0.8rem + 1vw, 1.5rem);
  margin-block-start: clamp(1.1rem, 0.8rem + 1vw, 1.5rem);
  padding-block: 0.3rem;
  padding-inline: 0.75rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-coral-tint);
  color: var(--color-primary-deep);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.post-card__title {
  margin-inline: clamp(1.1rem, 0.8rem + 1vw, 1.5rem);
  margin-block: var(--space-3) var(--space-2);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-ink);
}

.post-card:hover .post-card__title {
  color: var(--color-primary-deep);
}

.post-card__excerpt {
  margin-inline: clamp(1.1rem, 0.8rem + 1vw, 1.5rem);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-muted);
}

.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: auto;
  padding-inline: clamp(1.1rem, 0.8rem + 1vw, 1.5rem);
  padding-block: var(--space-5) clamp(1.1rem, 0.8rem + 1vw, 1.5rem);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.post-card__meta > * + *::before {
  content: "·";
  margin-inline-end: var(--space-2);
  color: var(--color-border-strong);
}

/* Single post ----------------------------------------------------------- */
.post {
  padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.5rem) var(--space-section);
}

.post__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-7);
  padding-block: 0.5rem;
  padding-inline: 0.9rem 1.1rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  transition: var(--transition-color), var(--transition-lift);
}

.post__back::before {
  content: "←";
  font-size: 1.05em;
  line-height: 1;
}

[dir="rtl"] .post__back::before {
  content: "→";
}

.post__back:hover {
  color: var(--color-ink);
  border-color: var(--color-border-strong);
  transform: translateY(var(--lift-sm));
  box-shadow: var(--shadow-sm);
}

.post__header {
  max-inline-size: var(--measure);
  margin-inline: auto;
  margin-block-end: var(--space-8);
  padding-block-end: var(--space-6);
  border-block-end: 1px solid var(--color-border);
}

.post__header h1,
.post__header .post__title {
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  margin-block: var(--space-4);
}

.post__header .post-card__meta,
.post__header .post__meta {
  padding: 0;
  margin: 0;
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}

.post__body {
  max-inline-size: var(--measure);
  margin-inline: auto;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-ink);
}

.post__body > * + * {
  margin-block-start: var(--space-5);
}

.post__body h2 {
  margin-block-start: var(--space-9);
  font-size: var(--text-2xl);
  font-weight: var(--weight-extra);
  line-height: var(--leading-snug);
  color: var(--color-ink);
}

.post__body h3 {
  margin-block-start: var(--space-7);
  font-size: var(--text-xl);
}

.post__body p {
  color: var(--color-plum-600);
}

.post__body ul,
.post__body ol {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-inline-start: var(--space-2);
  color: var(--color-plum-600);
}

.post__body li {
  position: relative;
  padding-inline-start: var(--space-7);
}

.post__body li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.62em;
  inset-inline-start: 0;
  inline-size: 0.6rem;
  block-size: 0.6rem;
  border-radius: var(--radius-blob-a);
  background: var(--grad-primary);
}

.post__body blockquote {
  margin-block: var(--space-7);
  padding-block: var(--space-6);
  padding-inline: clamp(1.25rem, 1rem + 1.4vw, 2rem);
  border-inline-start: 4px solid var(--color-primary);
  border-start-end-radius: var(--radius-lg);
  border-end-end-radius: var(--radius-lg);
  background-color: var(--color-cream-deep);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-relaxed);
  color: var(--color-ink);
}

.post__body a {
  color: var(--color-primary-deep);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 2px;
}

.post__body a:hover {
  color: var(--color-plum);
}

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band {
  position: relative;
  overflow: hidden;
  inline-size: 100%;
  padding-block: var(--space-section-tight);
  background: var(--grad-band);
  color: var(--color-white);
  --color-focus: var(--color-focus-invert);
}

.cta-band::before,
.cta-band::after {
  content: "";
  position: absolute;
  z-index: 0;
  inline-size: clamp(220px, 32vw, 420px);
  aspect-ratio: 1;
  border-radius: var(--radius-blob-b);
  background: var(--surface-on-dark-soft);
  pointer-events: none;
}

.cta-band::before {
  inset-block-start: -30%;
  inset-inline-start: -8%;
}

.cta-band::after {
  inset-block-end: -35%;
  inset-inline-end: -6%;
  border-radius: var(--radius-blob-c);
}

.cta-band .container {
  position: relative;
  z-index: var(--z-base);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  max-inline-size: calc(var(--container-max) - 2rem);
  padding-block: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem);
  padding-inline: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-2xl);
  background-color: var(--surface-on-dark);
  text-align: center;
}

.cta-band__title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-extra);
  line-height: var(--leading-snug);
  color: var(--color-white);
  max-inline-size: 20ch;
}

.cta-band p {
  max-inline-size: 52ch;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--ink-on-coral);
}

.cta-band .btn--ghost {
  border-color: var(--border-on-dark-strong);
  color: var(--color-white);
}

.cta-band .btn--ghost:hover {
  background-color: var(--surface-on-dark-hover);
  border-color: var(--color-white);
}

.cta-band .badge {
  background-color: var(--surface-on-dark-chip);
  color: var(--color-white);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  background-color: var(--color-plum);
  color: var(--color-cream);
  padding-block: var(--space-10) var(--space-6);
  --color-focus: var(--color-focus-invert);
}

.footer__inner {
  display: grid;
  gap: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .footer__inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 980px) {
  .footer__inner {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  }
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-inline-size: 34ch;
}

@media (min-width: 700px) and (max-width: 979.98px) {
  .footer__brand {
    grid-column: 1 / -1;
    max-inline-size: 46ch;
  }
}

.footer__brand > :first-child {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-extra);
  letter-spacing: var(--tracking-tight);
  color: var(--color-white);
}

.footer__brand p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--ink-on-dark-muted);
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.footer__col > :first-child,
.footer__col h3,
.footer__col h4 {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-on-dark-faint);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
}

.footer__links a {
  display: inline-block;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--ink-on-dark);
  transition: var(--transition-color);
}

.footer__links a:hover {
  color: var(--color-primary);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-start: var(--space-9);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--hairline-on-dark);
  font-size: var(--text-sm);
  color: var(--ink-on-dark-faint);
}

.footer .lang-toggle {
  background-color: var(--surface-on-dark);
  border-color: var(--hairline-on-dark-strong);
  color: var(--color-cream);
}

.footer .lang-toggle:hover {
  border-color: var(--color-cream);
}

.footer .lang-toggle > button,
.footer .lang-toggle > a,
.footer .lang-toggle > span {
  color: var(--ink-on-dark-muted);
}

.footer .lang-toggle > [aria-pressed="true"],
.footer .lang-toggle > [aria-current="true"],
.footer .lang-toggle > .is-active {
  background-color: var(--color-primary);
  color: var(--color-plum);
}

/* ==================================================================== */
/* Meetup browser (.mu-*) — /meetups, /meetups/<cat>, /meetups/<cat>/<id> */
/*                                                                       */
/* Mobile-first: one column, and the detail is a full-screen sheet over   */
/* the list. The split view only appears once there is room for it.      */
/* ==================================================================== */

/* .section sets a big vertical rhythm for marketing pages; this is an app
   view, so it needs the two-class selector to win and a much tighter top. */
.section.mu-browse {
  padding-block: var(--space-5) var(--space-8);
}

/* Height of the pane's back bar, which the frozen organiser header hangs
   below. Derived from the very tokens that build the bar, so it is right
   before any JS runs; meetupBrowser.js then overrides it with a measured
   value (inline style wins) to cover font-size and safe-area surprises. */
:root {
  --mu-pane-bar-h: calc(max(var(--space-2), env(safe-area-inset-top)) + 44px
                        + var(--space-2) + 1px);
}

/* The bar is display:none on desktop, so nothing sits above the header. */
@media (min-width: 900px) {
  :root { --mu-pane-bar-h: 0px; }
}

/* Where the detail pane comes to rest: under the navbar AND under the sticky
   filter bar. Both heights are known here — --header-h has a sane default and
   the bar's height is fixed below — so the offset never depends on a
   measurement arriving in time. It did once, and the missing value dropped
   the pane behind the very bar it was supposed to clear. */
.mu-browse {
  --mu-filters-h: 62px;            /* 46px controls + 8px padding, top and bottom */
  --mu-stick: calc(var(--header-h, 72px) + var(--mu-filters-h) + var(--space-3));
}

.mu-browse__head {
  margin-bottom: var(--space-4);
}

.mu-browse__title {
  font-size: clamp(1.3rem, 1.05rem + 1.2vw, 1.9rem);
  margin-bottom: var(--space-3);
}






/* ---- filters: top of the list column ----
   On phones they stick under the header, directly above the cards; on
   desktop (≥900px, further down) the whole column is the sticky rail, so
   the sticky here is turned off and the filters just ride along with it. */

.mu-browse__filters {
  position: sticky;
  top: var(--header-h, 64px);
  z-index: 5;
  background: var(--color-bg);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

/* Wider than a phone, the search and the selects share one row. */
/* One row, and deliberately a FIXED height: the detail pane sticks directly
   below this bar, so its offset has to be knowable in CSS. A bar that wrapped
   would change that offset and drop the pane behind it. */
@media (min-width: 560px) {
  .mu-browse__filters {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    block-size: var(--mu-filters-h);
  }

  .mu-browse__search { flex: 1 1 260px; margin-bottom: 0; min-width: 0; }
  .mu-browse__selects { flex: 0 1 auto; }
  .mu-count { margin: 0; margin-inline-start: auto; white-space: nowrap; flex: 0 0 auto; }
}

.mu-browse__search { margin-bottom: var(--space-2); }

/* Horizontal scroll rail. `overflow-x: auto` also computes overflow-y to
   `auto`, so the container clips on EVERY side — including a focused child's
   outline. Reserve the ring's width inside and pull it back out with a
   matching negative margin, so the ring shows and nothing shifts. */
/* No overflow container here any more: the facet panels open out of this row,
   and `overflow-x: auto` would clip them (it also forces overflow-y to auto).
   Three compact buttons fit without scrolling, even at 320px. */
.mu-browse__selects {
  display: flex;
  gap: var(--space-2);
  min-width: 0;
}

.mu-input {
  font: inherit;
  font-size: 16px;              /* 16px stops iOS zooming the page on focus */
  min-height: 44px;             /* comfortable touch target */
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink);
  max-width: 100%;
}

.mu-browse__selects .mu-input {
  flex: 0 0 auto;
  font-size: 0.9rem;
  min-height: 44px;             /* touch target; trimmed on fine pointers below */
  padding-block: 0.35rem;
}

@media (hover: hover) and (pointer: fine) {
  .mu-browse__selects .mu-input { min-height: 38px; }
}

.mu-input--search { width: 100%; }

.mu-input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

/* Kept compact: on a phone this bar is pinned under the header, so every
   pixel it takes is a pixel of results the user cannot see. */
.mu-count {
  color: var(--color-ink-muted);
  font-size: 0.75rem;
  margin: 0.35rem 0 0;
}

/* ---- checkbox facets --------------------------------------------------- */

.mu-facet {
  position: relative;
  flex: 0 0 auto;
}

.mu-facet__button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.4rem 0.9rem;
  font: inherit;
  font-size: 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink);
  cursor: pointer;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .mu-facet__button { min-height: 38px; }
  .mu-facet__button:hover { border-color: var(--color-primary); }
}

.mu-facet__button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

/* A facet with something chosen reads as active at a glance. */
.mu-facet.is-filtered .mu-facet__button {
  border-color: var(--color-primary);
  background: var(--color-primary-soft, var(--color-surface-2));
  font-weight: var(--weight-semibold);
}

.mu-facet__badge {
  display: none;
  min-inline-size: 20px;
  padding-inline: 0.35rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: var(--weight-bold);
  text-align: center;
  line-height: 1.5;
}

.mu-facet__badge.is-on { display: inline-block; }

.mu-facet__caret { font-size: 0.7rem; opacity: 0.7; }
.mu-facet.is-open .mu-facet__caret { transform: rotate(180deg); }

/* The panel. Opens below the button; the bar does not clip it because nothing
   in the filter row establishes an overflow container. */
.mu-facet__panel {
  display: none;
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline-start: 0;
  z-index: 20;
  min-inline-size: 220px;
  max-block-size: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.12));
}

.mu-facet.is-open .mu-facet__panel { display: block; }

.mu-facet__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0.3rem var(--space-2);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1.4;
}

@media (hover: hover) and (pointer: fine) {
  .mu-facet__option:hover { background: var(--color-surface-2); }
}

.mu-facet__check {
  flex: 0 0 auto;
  inline-size: 18px;
  block-size: 18px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.mu-facet__option span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* On a phone the panel is a sheet pinned to the bottom: a 320px dropdown
   hanging off a button near the top of the screen is hard to reach. */
@media (max-width: 559.98px) {
  .mu-facet__panel {
    position: fixed;
    inset: auto 0 0 0;
    max-block-size: 60vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: var(--space-3) var(--space-4);
    padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
  }

  .mu-facet__option { min-height: 46px; }
}

/* ---- the card list ---- */

/* Clear the filter bar's rule. The same --space-3 the pane keeps once it is
   stuck, so the gap does not change the moment the page starts scrolling. */
.mu-browse__split {
  margin-block-start: var(--space-3);
}

.mu-browse__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block: 0 var(--space-3);
}

.mu-empty {
  text-align: center;
  color: var(--color-ink-muted);
  padding: var(--space-8) 0;
}

.mu-card {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.mu-card:active { transform: scale(0.99); }

.mu-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.mu-card.is-selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary) inset;
  background: var(--color-surface-2);
}

@media (hover: hover) and (pointer: fine) {
  .mu-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-xs); }
}

.mu-card__thumb {
  flex: 0 0 auto;
  inline-size: 68px;
  block-size: 68px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-2);
  display: grid;
  place-items: center;
  font-size: 1.6rem;
}

.mu-card__thumb img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

.mu-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;                 /* lets long Persian titles wrap, not overflow */
  flex: 1;
}

.mu-card__title {
  font-weight: var(--weight-semibold);
  line-height: 1.55;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mu-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.mu-card__cat {
  font-size: 0.75rem;
  color: var(--color-ink-muted);
}

.mu-chip {
  font-size: 0.72rem;
  padding: 0.12rem 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-ink-muted);
  white-space: nowrap;
}

.mu-card.is-selected .mu-chip { background: var(--color-surface); }

.mu-chip--date {
  background: var(--color-primary-soft, var(--color-surface-2));
  border-color: transparent;
  color: var(--color-primary-deep, var(--color-ink));
  font-weight: var(--weight-semibold);
}

/* ---- organiser header on the event card ------------------------------- */

/* Who is running this, and the one action you can take — paired at the top so
   the CTA is on screen the moment the card opens. Wraps to two rows on a
   phone; the button then goes full width rather than squeezing beside a name. */
/* Frozen to the top of the detail pane: who is running this and the one action
   you can take stay on screen through a description that can run for pages.
   The pane is the scroll container, so the offset is the height of whatever
   sits above inside it — the back bar on a phone, nothing on desktop where it
   is display:none and the measured height is 0. */
.mu-detail--pane .mu-detail__header {
  position: sticky;
  top: var(--mu-pane-bar-h, 0px);
  z-index: 3;
  background: var(--color-bg);
  padding-top: var(--space-3);
  /* No bottom margin: a transparent gap under a frozen bar shows the content
     sliding through it. The separation is the border plus its padding. */
  margin-bottom: var(--space-4);
}

.mu-detail__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.mu-detail__org {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  flex: 1 1 200px;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-pill);
}

.mu-detail__org-photo {
  flex: 0 0 auto;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-surface-2);
  display: grid;
  place-items: center;
}

.mu-detail__org-photo--empty {
  background: var(--color-primary);
  color: #fff;
  font-weight: var(--weight-extra);
  text-transform: uppercase;
}

.mu-detail__org-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.4;
}

.mu-detail__org-label {
  font-size: 0.72rem;
  color: var(--color-ink-muted);
}

.mu-detail__org-name {
  font-weight: var(--weight-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .mu-detail__org:hover .mu-detail__org-name { color: var(--color-primary); }
}

.mu-detail__org:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.mu-detail__header-action {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
}

.mu-detail__action { white-space: nowrap; }

.mu-detail__cta-note {
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-ink-muted);
  text-align: center;
}

/* Narrow: name on one row, a full-width button under it. */
@media (max-width: 520px) {
  .mu-detail__header-action { flex: 1 1 100%; }
  .mu-detail__action { display: block; width: 100%; text-align: center; }
}

/* ---- organiser label on a card ---------------------------------------- */

/* The card is a container, not a link. Its title anchor stretches an invisible
   overlay across the whole card so the card stays one tap target, and the
   organiser link is raised above that overlay so it stays independently
   clickable — legal HTML, unlike an anchor nested in an anchor. */
.mu-card { position: relative; }

.mu-card__title { margin: 0; font-size: 0.95rem; }

.mu-card__link {
  color: inherit;
  text-decoration: none;
}

.mu-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.mu-card__link:focus-visible::after {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.mu-card__org {
  position: relative;      /* lifts it out of the stretched overlay */
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: flex-start;
  max-width: 100%;
  margin-top: 0.15rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
  font-size: 0.72rem;
  color: var(--color-ink-muted);
  text-decoration: none;
  min-height: 30px;
}

.mu-card__org-label { flex: 0 0 auto; opacity: 0.8; }

.mu-card__org-name {
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .mu-card__org:hover {
    border-color: var(--color-primary);
    background: var(--color-surface);
  }
}

.mu-card__org:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.mu-card--past .mu-card__org-name { color: var(--color-ink-muted); }

/* ---- detail pane: a full-screen sheet on phones ---- */

.mu-browse__pane {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--color-bg);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  transform: translateY(100%);
  visibility: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}

/* The slide-up belongs to the phone sheet only. Scoped here so that crossing
   the 900px breakpoint swaps layouts instantly instead of animating the pane
   into place on a window resize. */
@media (max-width: 899.98px) {
  .mu-browse__pane {
    transition: transform 0.26s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.26s;
  }
}

body.mu-sheet-open .mu-browse__pane {
  transform: translateY(0);
  visibility: visible;
}

/* Freeze the list behind the sheet so it does not scroll under the finger. */
body.mu-sheet-open { overflow: hidden; }

.mu-pane__bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  padding-top: max(var(--space-2), env(safe-area-inset-top));
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

/* Labelled, not just an arrow: this is the only way out of a full-screen
   sheet, so it should be unmistakable rather than a glyph to decode. */
.mu-pane__back {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-block-size: 44px;
  padding-inline: 0.6rem 0.9rem;
  font-size: 0.85rem;
  font-weight: var(--weight-semibold);
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-ink);
  cursor: pointer;
  border-radius: var(--radius-pill);
}

.mu-pane__back-icon { font-size: 1.1rem; line-height: 1; }

.mu-pane__back:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.mu-pane__back:active { background: var(--color-surface-2); }

/* The arrow points "back", which is the opposite way in each direction. */
[dir="ltr"] .mu-pane__back-icon { transform: scaleX(-1); }

.mu-pane__heading {
  font-weight: var(--weight-semibold);
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mu-pane__body { padding: var(--space-4) var(--space-4) 0; }

.mu-pane__empty {
  display: none;                /* nothing to show on a phone until you tap */
}

/* ---- detail content ---- */

.mu-detail__title {
  font-size: clamp(1.25rem, 1rem + 1.4vw, 1.8rem);
  line-height: 1.4;
  margin-bottom: var(--space-3);
  overflow-wrap: anywhere;
}

.mu-detail__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.mu-detail__cover {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-4);
  background: var(--color-surface-2);
}

.mu-detail__cover img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-block-size: 320px;
  object-fit: cover;
}

.mu-detail__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
  margin-bottom: var(--space-4);
  font-size: 0.9rem;
}

.mu-detail__facts dt { color: var(--color-ink-muted); }
.mu-detail__facts dd { margin: 0; font-weight: var(--weight-semibold); overflow-wrap: anywhere; }

.mu-detail__about h3,
.mu-detail__join h3,
.mu-detail__related h3 {
  font-size: 1rem;
  margin-block: var(--space-4) var(--space-2);
}

.mu-detail__about p {
  line-height: 1.95;
  margin-bottom: var(--space-2);
  overflow-wrap: anywhere;
}

.mu-detail__join {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  margin-block: var(--space-4);
}

.mu-detail__join p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }

.mu-detail__gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
  margin-bottom: var(--space-4);
}

.mu-detail__gallery img {
  inline-size: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
}

.mu-detail__related-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mu-related {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-decoration: none;
  color: var(--color-ink);
}

.mu-related__title { font-weight: var(--weight-semibold); line-height: 1.5; }
.mu-related__date { font-size: 0.78rem; color: var(--color-ink-muted); }

.btn--block { display: block; width: 100%; text-align: center; }

.mu-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.85rem;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-3);
}

.mu-crumbs a { color: var(--color-ink-muted); text-decoration: none; }
.mu-crumbs a:hover { color: var(--color-primary); text-decoration: underline; }
.mu-crumbs__sep { opacity: 0.5; }

/* ---- expired events ---------------------------------------------------- */

/* Neutral, not alarming: an event being over is information, not an error. */
.mu-chip--past {
  background: var(--color-ink-muted);
  border-color: transparent;
  color: #fff;
  font-weight: var(--weight-semibold);
}

/* Muted, but the text stays at full contrast so it is still readable. */
.mu-card--past .mu-card__thumb { opacity: 0.55; }
.mu-card--past .mu-card__title { color: var(--color-ink-muted); }

.mu-card--past.is-selected .mu-card__thumb { opacity: 1; }

/* A disabled join button. Kept at the same size so the layout does not shift
   between an open and a finished event. */
.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--color-surface-2);
  border-color: var(--color-border);
  color: var(--color-ink-muted);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
  filter: none;
}

.btn:disabled:hover,
.btn[aria-disabled="true"]:hover {
  background: var(--color-surface-2);
  transform: none;
}

/* ---- /sources: the channel index -------------------------------------- */

.org-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-3);
}

.org-card {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.org-card:active { transform: scale(0.99); }

.org-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

@media (hover: hover) and (pointer: fine) {
  .org-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-xs); }
}

.org-card__avatar {
  flex: 0 0 auto;
  inline-size: 48px;
  block-size: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-surface-2);
  display: grid;
  place-items: center;
}

/* Fallback initial, for a channel whose avatar was never downloaded. */
.org-card__avatar--empty {
  background: var(--grad-primary, var(--color-primary));
  color: #fff;
  font-size: 1.2rem;
  font-weight: var(--weight-extra);
  text-transform: uppercase;
}

.org-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.org-card__name {
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.org-card__handle {
  font-size: 0.8rem;
  color: var(--color-ink-muted);
  overflow-wrap: anywhere;
}

.org-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.15rem;
}


/* ==================================================================== */
/* Desktop: the two-pane split.                                          */
/* ==================================================================== */

@media (min-width: 900px) {
  .mu-browse__split {
    display: grid;
    grid-template-columns: minmax(330px, 380px) minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
  }

  /* The list column comes first in the DOM, so RTL puts it on the right and
     LTR on the left — the reading-order side, either way. */
  /* The list column runs its natural length and the PAGE scrolls it — which
     is what gives the detail pane room to stay pinned beside it. Capping both
     columns at viewport height made the grid row exactly as tall as each of
     them, so neither had anywhere to travel and `sticky` silently did nothing:
     the whole split slid away together, and it meant two nested scrollbars. */
  .mu-browse__side {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .mu-browse__list {
    min-height: 0;
    /* Focus rings need room on the inline edges; the negative margin keeps
       the column width unchanged. */
    padding-inline: 4px var(--space-2);
    margin-inline: -4px 0;
  }

  /* Back to an in-flow pane; no sheet, no transform, no scroll lock.
     The inset resets MUST come before `top` — `inset-block` is a shorthand
     that includes it, so listing it after would wipe the offset out. */
  .mu-browse__pane {
    position: sticky;
    inset-inline: auto;
    inset-block: auto;
    top: var(--mu-stick, 80px);
    z-index: 1;
    max-height: calc(100vh - var(--mu-stick, 80px) - var(--space-4));
    transform: none;
    visibility: visible;
    /* Framed as a card. `overflow-y: auto` above clips to the padding box, so
       the rounded corners hold even while the detail scrolls inside. */
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
  }

  body.mu-sheet-open { overflow: auto; }

  .mu-pane__bar { display: none; }

  /* The pane is its own card on desktop, so the frozen header matches it. */
  .mu-detail--pane .mu-detail__header {
    background: var(--color-surface);
    padding-top: var(--space-4);
  }
  .mu-pane__body { padding: var(--space-5) var(--space-5) 0; }

  .mu-pane__empty {
    display: grid;
    place-items: center;
    gap: var(--space-3);
    min-height: 40vh;
    text-align: center;
    color: var(--color-ink-muted);
    padding: var(--space-6);
  }

  .mu-pane__empty-icon { font-size: 2.2rem; }

  .mu-detail__cover img { max-block-size: 380px; }

  .mu-detail__related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .btn--block { display: inline-block; width: auto; min-width: 220px; }

}

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