/* ═══════════════════════════════════════════════════════════════
   THREE-COLUMN LAYOUT
   Left 28% | Center 40% | Right 32%
   ═══════════════════════════════════════════════════════════════ */
.app-layout{
  width:100%;min-height:100vh;
  margin:0; /* сайдбар прижат к левому краю, центрируется только контент */
  opacity:0; /* hidden until JS adds .loaded */
}

/* ── LEFT SIDEBAR */
.sidebar-left{
  width:260px;max-width:260px;flex:0 0 260px;
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;align-items:stretch;
  position:sticky;top:0;height:100vh;align-self:flex-start;
  /* Верхнего отступа нет намеренно: .sidebar-left-inner внутри ровно 100vh,
     и лишние 8px сверху делали колонку на 8px выше экрана — страница всегда
     получала вертикальную прокрутку даже с пустым содержимым. */
  padding:0 16px 8px 24px;
}
.sidebar-left-inner{
  /* Сайдбар не прокручивается: он стоит на месте, прокручивается только
     центральная колонка. Пунктов меню немного, поэтому всё влезает. */
  width:100%;display:flex;flex-direction:column;gap:8px;
  position:sticky;top:0;padding:8px 0 12px;
  height:100vh;overflow:hidden;
}

/* Logo */
/* Brand: a plain circle plus the wordmark (no borrowed social icon).
   Manrope 800 (latin subset, OFL) is self-hosted — no CDN. */
@font-face{
  font-family:'KroogWordmark';
  src:url("/static/fonts/unbounded-600.811b2e3fc69c.ttf") format('truetype');
  font-weight:600;font-style:normal;font-display:swap;
}
.sidebar-logo{
  display:flex;align-items:center;gap:10px;height:54px;
  padding:0 12px;border-radius:0;width:fit-content;
  color:var(--text);text-decoration:none;
  margin-left:0;
}
.sidebar-logo:hover{background:none;text-decoration:none;color:var(--text);}
.logo-mark{
  width:36px;height:36px;flex:0 0 36px;display:block;object-fit:contain;
}
.logo-word{
  font-family:'KroogWordmark',var(--font);
  font-size:1.5rem;font-weight:600;letter-spacing:-0.03em;line-height:1;
  color:var(--text);
}

/* Nav items */
.sidebar-nav{display:flex;flex-direction:column;gap:6px;width:100%;margin-top:8px;}
.sidebar-nav a{
  display:flex;align-items:center;gap:16px;font-size:1.0625rem;color:var(--text);
  padding:12px 16px;border-radius:var(--radius-full);font-weight:400;
  transition:background var(--t);text-decoration:none;white-space:nowrap;
  width:100%;border:none;
}
.sidebar-nav a:hover{background:var(--bg-hover);text-decoration:none;color:var(--text);}
.sidebar-nav a .nav-icon{width:26px;height:26px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.sidebar-nav a .nav-icon svg{width:26px;height:26px;fill:currentColor;}

/* Nav label */
.sidebar-nav a .nav-label{display:none;}
@media(min-width:1000px){.sidebar-nav a .nav-label{display:inline;}}

/* Prominent CTA button */
.sidebar-cta{
  background:var(--text);color:var(--surface);font-weight:700;font-size:0.9375rem;
  padding:14px 0;border-radius:var(--radius-full);text-align:center;
  text-decoration:none;width:100%;
  transition:background var(--t),color var(--t),border-color var(--t);
  display:block;margin-top:8px;border:1px solid transparent;
}
a.sidebar-cta,a.sidebar-cta:visited{color:var(--surface);}
a.sidebar-cta:hover{
  background:var(--surface);color:var(--text);border-color:var(--text);text-decoration:none;
}

/* User chip */
.sidebar-user{
  display:flex;align-items:center;gap:10px;padding:8px 14px;
  border:none;border-radius:var(--radius-full);cursor:pointer;
  transition:background var(--t);margin-top:auto;margin-bottom:6px;
  text-decoration:none;color:var(--text);width:100%;
}
.sidebar-user:hover{background:var(--bg-hover);text-decoration:none;color:var(--text);}
.sidebar-user-avatar{
  width:40px;height:40px;border-radius:var(--radius-full);
  background:var(--bg-input);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;color:var(--text-muted);overflow:hidden;
}
.sidebar-user-avatar img{width:100%;height:100%;object-fit:cover;}
.sidebar-user-info{display:flex;flex-direction:column;font-size:0.85rem;min-width:0;}
.sidebar-user-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sidebar-user-email{color:var(--text-gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* Logout link — sits under the user chip and matches the nav items above */
.sidebar-logout-form{display:block;margin:0 0 16px;}
button.sidebar-logout{
  display:flex;align-items:center;gap:16px;width:100%;
  padding:12px 16px;border-radius:var(--radius-full);
  background:none;border:none;cursor:pointer;text-align:left;
  font-family:var(--font);font-size:1.0625rem;font-weight:400;color:var(--text);
  transition:background var(--t),color var(--t);
}
button.sidebar-logout .nav-icon{
  width:26px;height:26px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
}
button.sidebar-logout .nav-icon svg{width:26px;height:26px;fill:currentColor;}
button.sidebar-logout .nav-label{display:none;}
@media(min-width:1000px){button.sidebar-logout .nav-label{display:inline;}}
button.sidebar-logout:hover{background:var(--bg-hover);color:var(--danger);}

/* ── CENTER COLUMN */
.feed{
  flex:1 1 auto;min-width:0;margin:0;perspective:1200px;
}

/* Раскладка: сайдбар слева на всю высоту, справа сверху шапка, под ней центр.
   Шапка — тот же блок .app-layout, что и сайдбар, но вне .feed: при переходах
   htmx её не перерисовывает. */
.app-layout{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  grid-template-rows:auto 1fr;
}
.app-layout .sidebar-left{grid-column:1;grid-row:1 / span 2;align-self:start;}
.app-layout .feed-header{grid-column:2;grid-row:1;}
.app-layout .feed{grid-column:2;grid-row:2;}
.feed-content{max-width:980px;margin:0;width:100%;}
.app-layout--wide .feed-content{max-width:none;margin:0;}

/* Center top bar */
.feed-header{
  position:sticky;top:0;z-index:100;min-height:54px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:12px 16px;
}
.feed-header h1{font-size:1.25rem;font-weight:700;margin:0;align-self:flex-end;line-height:1.1;padding-bottom:2px;}
/* Кнопка нужна только на телефоне: на десктопе CTA живёт в сайдбаре. */
.feed-header-cta{display:none;}

/* Tabs / sub-nav */
.feed-tabs{display:flex;border-bottom:1px solid var(--border);}
.feed-tabs a{
  flex:1;text-align:center;padding:16px 0;font-weight:500;font-size:0.9375rem;
  color:var(--text-gray);text-decoration:none;position:relative;
  transition:background var(--t);
}
.feed-tabs a:hover{background:var(--bg-hover-light);}
.feed-tabs a.active{color:var(--text);font-weight:600;}
.feed-tabs a.active::after{
  content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:56px;height:4px;background:var(--accent);border-radius:2px;
}

/* Messages / alerts */
/* Small transient toasts instead of inline message banners. */
.toast-stack{
  /* The stack is inside .feed; its perspective makes this containing block
     the central column, so left/right 0 spans exactly the feed width. */
  position:fixed;top:54px;left:0;right:0;z-index:300;
  display:flex;flex-direction:column;gap:8px;
  width:auto;pointer-events:none;
}
.toast{
  pointer-events:auto;display:flex;align-items:center;gap:10px;
  padding:10px 14px;border:1px solid var(--border);border-left:4px solid var(--text);
  border-radius:14px;background:var(--surface);color:var(--text);
  box-shadow:0 12px 30px rgba(0,0,0,0.14);
  font-size:0.8125rem;font-weight:600;
  opacity:0;transform:translateY(10px) scale(0.98);
  transition:opacity 0.22s ease,transform 0.22s ease;
}
.toast.is-visible{opacity:1;transform:none;}
.toast.is-leaving{opacity:0;transform:translateY(10px) scale(0.98);}
.toast-success{border-left-color:var(--success);}
.toast-error{border-left-color:var(--danger);}
.toast-warning{border-left-color:var(--warning);}
.toast-info{border-left-color:var(--accent);}
/* ═══════════════════════════════════════════════════════════════
   PROFILE CARDS — glass + 3D tilt + multi-layer shadows
   ═══════════════════════════════════════════════════════════════ */

/* При подмене центра htmx прокручивает сам целевой блок в вид
   (scrollIntoView). Без отступа это уводит страницу вниз на высоту шапки —
   контент «сам листается» под неё. scroll-margin делает такую прокрутку
   нулевой: блок и так стоит сразу под шапкой. */
#main-feed{overflow-anchor:none;scroll-margin-top:75px;}

/* Breathing room between the sticky header and the first card */
#club-list{padding-top:10px;position:relative;}
#club-list-spinner{position:absolute;top:8px;right:12px;z-index:5;pointer-events:none;}

/* Карточка клуба — та же форма, что у карточки события: обложка сверху,
   заголовок и текст под ней, действия внизу. */
.profile-card{
  display:flex;flex-direction:column;padding:0;height:100%;
  text-decoration:none;color:var(--text);
  background:var(--surface);border:1px solid var(--border);
  box-shadow:0 1px 0 rgba(0,0,0,0.03),0 6px 18px rgba(0,0,0,0.06);
  transform-style:preserve-3d;
  transition:
    transform 0.5s cubic-bezier(0.22,1,0.36,1),
    box-shadow 0.5s cubic-bezier(0.22,1,0.36,1);
  border-radius:20px;
  margin:0;
  position:relative;overflow:hidden;
}
.profile-card:hover{
  background:var(--surface);
  transform:translateY(-2px) rotateX(var(--tilt-x,2deg)) rotateY(var(--tilt-y,-1deg));
  box-shadow:0 16px 38px rgba(0,0,0,0.18),0 6px 14px rgba(0,0,0,0.10);
  text-decoration:none;color:var(--text);
  z-index:1;
}

.profile-card-cover{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;flex:0 0 auto;aspect-ratio:16/9;
  background:linear-gradient(135deg,var(--bg-card),#eef1f3);
  overflow:hidden;
}
.profile-card-cover img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.profile-card-cover-letter{
  font-size:2rem;font-weight:800;color:var(--text-muted);
}

.profile-card-body{
  flex:1 1 auto;min-width:0;padding:14px 16px 16px;display:flex;flex-direction:column;
  /* Та же высота, что у тела карточки события: карточки клуба и события
     должны стоять в сетке одного размера. */
  min-height:137px;
}

.profile-card-title{
  /* Название клуба — всегда одна строка: по правилу оно не переносится. */
  font-size:1.0625rem;font-weight:700;line-height:1.25;letter-spacing:-0.01em;
  display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.profile-card-title:hover{text-decoration:none;}
.profile-card-slug{color:var(--text-gray);font-size:0.875rem;margin-left:4px;}

/* Whole-card link: the title carries the href and its ::after stretches
   over the card, so the card stays clickable while the club-site link below
   remains a real, separately clickable <a> (nested <a> is invalid HTML). */
.profile-card-link{color:inherit;text-decoration:none;}
.profile-card-link:hover{text-decoration:none;}
.profile-card-link::after{content:"";position:absolute;inset:0;z-index:1;}

/* Up to two lines; anything longer is clamped with an ellipsis. */
.profile-card-desc{
  /* Краткое описание — две строки без многоточия: предел длины задан моделью. */
  font-size:1rem;color:var(--text);margin:4px 0 8px;line-height:1.45;
  max-height:2.9em;overflow:hidden;white-space:normal;min-width:0;
}

/* Tags: a single line; the JS collapses overflow into a trailing "…" chip */
.profile-card-tags{display:flex;gap:6px;flex-wrap:nowrap;overflow:hidden;max-height:24px;margin-bottom:6px;min-width:0;}
.profile-card-tag{
  padding:2px 10px;background:var(--surface);color:var(--text);
  border:1px solid var(--text);border-radius:var(--radius-full);font-size:0.75rem;
  flex:0 0 auto;white-space:nowrap;
  transition:background var(--t);
}
.profile-card-tag:hover{background:var(--bg-hover-light);}
/* The nearest event is the filled date pill from the poster. */
.profile-card-tag.event-tag{background:var(--text);color:var(--surface);border-color:var(--text);font-weight:600;}
.profile-card-tag.event-tag:hover{background:var(--text);}
.profile-card-tag-more{font-weight:700;letter-spacing:1px;}

/* Bottom row: views on the left, the club-site link on the right */
.profile-card-footer{
  display:flex;align-items:center;gap:8px;width:100%;min-width:0;
  margin-top:auto;position:relative;z-index:2;
}
.profile-card-footer .profile-card-tags{flex:1 1 auto;min-width:0;margin-bottom:0;}
.profile-card-like-form{margin:0;display:flex;align-items:center;flex:0 0 auto;}
.profile-card-action{
  display:inline-flex;align-items:center;gap:4px;
  padding:6px 10px;border-radius:var(--radius-full);
  color:var(--text-gray);font-size:0.8125rem;border:none;background:none;
  cursor:pointer;transition:all var(--t);text-decoration:none;
}
.profile-card-action:hover{color:var(--text);background:var(--bg-hover-light);text-decoration:none;}
.profile-card-action.disabled{opacity:0.35;pointer-events:none;}

/* The club site is the public page, so its entry point is framed rather
   than a plain text link: an outlined pill that inverts to a solid black
   button on hover. Class selectors outbid the global a:visited rule, so the
   label stays black before hover and white during it. */
.profile-card-like{color:#e0245e;font-weight:700;gap:7px;padding:4px 8px;}
.profile-card-like:hover{color:#c81e4a;background:rgba(224,36,94,0.07);}
.profile-card-like.is-liked{color:#e0245e;}
.profile-card-like svg{
  width:20px;height:20px;flex:0 0 20px;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;
  filter:drop-shadow(0 0 4px rgba(224,36,94,0.38));
}
.profile-card-like.is-liked svg{fill:currentColor;}
.profile-card-like-count{
  font-variant-numeric:tabular-nums;font-size:0.9375rem;font-weight:700;color:var(--text);
}

/* Status badge */
.status-badge{
  display:inline-block;padding:2px 8px;border-radius:var(--radius-full);
  font-size:0.75rem;font-weight:500;margin-left:6px;
}
.status-hidden{background:var(--bg-input);color:var(--text-gray);}
.status-published{background:var(--success-bg);color:#00663d;}
.status-blocked{background:var(--danger-bg);color:#8b0000;}

/* ═══════════════════════════════════════════════════════════════
   DETAIL PAGE
   ═══════════════════════════════════════════════════════════════ */
.detail{padding:16px;}
.detail h1{font-size:1.25rem;margin:8px 0 16px;font-weight:700;}
.detail-section{margin:16px 0;}
.detail-section h2{font-size:0.8rem;font-weight:600;color:var(--text-gray);text-transform:uppercase;letter-spacing:0.03em;margin-bottom:6px;}
.detail-logo{max-width:160px;border-radius:var(--radius-xl);margin:12px 0;}
.detail-meta{margin-top:16px;padding-top:12px;border-top:1px solid var(--border);display:flex;gap:16px;font-size:0.85rem;color:var(--text-gray);}
.club-site-address{margin:0 0 12px;font-size:0.9rem;color:var(--text-gray);}
.club-site-address a{font-weight:600;color:var(--text);text-decoration:underline;text-underline-offset:3px;}