/* Только «О нас». Общие about.css и изолированный ab-tail не изменяются. */
.ab-about .ab-hero__bottom { max-width: min(580px, 60vw); }
.ab-about .ab-hero__nav { gap: 10px; margin-top: 24px; }
.ab-about .ab-hero__nav .ab-btn { padding: 13px 22px; }
.ab-about .ab-section { padding-block: 120px; }
.ab-about .ab-section--tight { padding-top: 40px; }
.ab-about .ab-section--dark { margin-inline: 0; }
.ab-about .ab-head h2 { font-size: clamp(40px, 4.8vw, 68px); line-height: 1.04; }
.ab-about .ab-head h2 em { font-size: 1em; }
.ab-about .ab-head { margin-bottom: 56px; }
.ab-about .ab-events__list { display: grid; gap: 48px; max-width: 1200px; margin-inline: auto; }
.ab-about .ab-event { min-width: 0; padding: 36px; border: 1px solid var(--ab-line); border-radius: var(--ab-radius-lg); background: var(--ab-cream); }
.ab-about .ab-event__head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px 40px; margin-bottom: 32px; }
.ab-about .ab-event__head h3 { margin: 0; font: 300 clamp(30px, 3vw, 42px)/1.1 var(--ab-serif); letter-spacing: -.025em; }
.ab-about .ab-event__head p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
.ab-about .ab-event__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px; }
.ab-about .ab-event__item { display: block; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--ab-dark); text-align: left; font: inherit; cursor: pointer; }
.ab-about .ab-event__visual { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: var(--ab-cream-tint); }
.ab-about .ab-event__visual :is(img, video) { display: block; width: 100%; height: 100%; object-fit: cover; }
.ab-about .ab-event__caption { display: block; margin-top: 10px; font-size: 12px; line-height: 1.5; }
.ab-about .ab-event__play { position: absolute; inset: auto 12px 12px auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ab-cream); color: var(--ab-dark); font-size: 12px; }
.ab-about .ab-event__item:hover .ab-event__caption { text-decoration: underline; text-underline-offset: 4px; }
.ab-about :is(.ab-event__item, .ab-event-dialog__close):focus-visible { outline: 2px solid var(--ab-dark); outline-offset: 5px; border-radius: 12px; }
.ab-about.ab-event-open { overflow: hidden; }
.ab-about .ab-event-dialog { box-sizing: border-box; width: min(960px, calc(100vw - 48px)); max-width: none; max-height: calc(100dvh - 48px); margin: auto; padding: 20px; border: 0; border-radius: 20px; background: var(--ab-cream); color: var(--ab-dark); overflow: auto; }
.ab-about .ab-event-dialog::backdrop { background: rgba(20, 19, 18, .76); }
.ab-about .ab-event-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.ab-about .ab-event-dialog__head p { margin: 0; font-size: 14px; line-height: 1.5; }
.ab-about .ab-event-dialog__close { flex-shrink: 0; min-height: 44px; padding: 8px 14px; border: 1px solid var(--ab-line); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: 13px; cursor: pointer; }
.ab-about .ab-event-dialog__close span { margin-left: 10px; font-size: 22px; vertical-align: middle; }
.ab-about .ab-event-dialog__media :is(img, video) { display: block; width: 100%; height: min(65dvh, 680px); object-fit: contain; background: var(--ab-cream-tint); border-radius: 8px; }
@media (max-width: 1100px) {
  .ab-about .ab-section { padding-block: 88px; }
  .ab-about .ab-event__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ab-about .ab-event__head { display: block; }
  .ab-about .ab-event__head p { margin-top: 12px; }
}
@media (max-width: 640px) {
  .ab-about .ab-hero__bottom { max-width: none; }
  .ab-about .ab-hero { gap: 64px; }
  .ab-about .ab-hero__nav .ab-btn { padding: 12px 16px; font-size: 13px; }
  .ab-about .ab-section { padding-block: 64px; }
  .ab-about .ab-section--tight { padding-top: 16px; }
  .ab-about .ab-head { margin-bottom: 32px; }
  .ab-about .ab-head h2 { font-size: clamp(36px, 9.8vw, 44px); }
  .ab-about .ab-event { padding: 20px 16px; border-radius: 24px; }
  .ab-about .ab-event__head { margin-bottom: 24px; }
  .ab-about .ab-event__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .ab-about .ab-event__caption { font-size: 11px; }
  .ab-about .ab-event-dialog { width: calc(100vw - 32px); max-height: calc(100dvh - 32px); padding: 12px; border-radius: 16px; }
  .ab-about .ab-event-dialog__head { gap: 8px; }
  .ab-about .ab-event-dialog__head p { font-size: 12px; }
  .ab-about .ab-event-dialog__close { padding-inline: 10px; }
}
/* Сохраняем пропорции плеера, особенно на узком экране. */
.ab-about .ab-event-dialog__media video { height: auto; max-height: 65dvh; }

.ab-about .ab-event__description { max-width: 76ch; margin-bottom: 32px; color: var(--muted); font-size: 15px; line-height: 1.65; }
.ab-about .ab-event__description p { margin: 0; }
.ab-about .ab-event__description p + p { margin-top: 16px; }
@media (max-width: 640px) {
  .ab-about .ab-event__description { margin-bottom: 24px; font-size: 14px; }
}