@charset "utf-8";
/**
 * ==========================================================================
 * Przystanek Twórczość - Layout V2 Structural Styles
 * Used exclusively by _LayoutV2.cshtml and V2 view partials.
 * ==========================================================================
 */

/* ==========================================================================
   BODY & DOCUMENT
   ========================================================================== */

/*
 * Default.css sets `html { font-size: 87.5% }` (14px), which silently shrank
 * every rem-based V2 token by 12.5% (--fs-body 18px rendered as 15.75px).
 * V2 pages opt back into a 16px root so the type scale matches Spec §4.2.
 */
html[data-theme="v2"] {
  font-size: 100%;
}

.v2-body {
  background-color: var(--color-bg-main);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   MAIN CONTENT AREA
   ========================================================================== */

.v2-main {
  min-height: 60vh;
}

/* Centred, max-width container with responsive side margins (Spec §5.1) */
.v2-container {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--canvas-margin);
  width: 100%;
}

/* Section breathing room (Spec §5.1: 64px–120px vertical section spacing) */
.v2-section {
  padding-block: var(--space-xl);
}

@media (min-width: 992px) {
  .v2-section {
    padding-block: var(--space-xl);
  }
}

.v2-section--flush-top {
  padding-top: 0;
}

/* Alternate background section — Warm Soft (Spec §2.1) */
.v2-section--soft {
  background-color: var(--color-bg-accent-soft);
}

/* Dark section */
.v2-section--dark {
  background-color: var(--color-bg-dark);
  color: var(--color-text-on-dark);
}

/* ==========================================================================
   SECTION HEADINGS (Spec §4.1, §6.3 — sygnet accent before H2)
   ========================================================================== */

/* Editorial H2 with preceding accent dot (Spec §4.1) */
.v2-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--fs-h2-mobile);
  font-weight: 600;
  line-height: var(--lh-section);
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  margin-bottom: var(--space-lg);
}

@media (min-width: 768px) {
  .v2-section-title {
    font-size: var(--fs-h2-desktop);
  }
}

.v2-section-title__motif {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-brand-sage);
  flex-shrink: 0;
}

.v2-section-title__motif--accent {
  background-color: var(--color-brand-accent);
}

/* ==========================================================================
   CTA LINK (Spec §6.5 — uppercase, tracked, trailing arrow)
   ========================================================================== */

.v2-link-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-meta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-btn);
  color: var(--color-brand-dark);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--color-brand-accent);
}

.v2-link-cta span {
  transition: transform 0.2s ease;
}

.v2-link-cta:hover span {
  transform: translateX(4px);
}

.v2-link-cta--muted {
  color: var(--color-text-muted);
  border-bottom-color: var(--color-border-subtle);
}

/* ==========================================================================
   EVENT LIST (Spec §6.3 — horizontal editorial cards, no frames or shadows)
   ========================================================================== */

.v2-events {
  list-style: none;
  margin: 0;
  padding: 0;
}

.v2-events__empty {
  color: var(--color-text-muted);
}

.v2-event {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-top: 1px solid var(--color-border-subtle);
}

.v2-event:last-child {
  border-bottom: 1px solid var(--color-border-subtle);
}

.v2-event--past {
  opacity: 0.55;
}

@media (min-width: 768px) {
  .v2-event {
    grid-template-columns: 200px 1fr;
    align-items: start;
  }
}

@media (min-width: 992px) {
  .v2-event {
    grid-template-columns: 220px 1fr auto;
    gap: var(--space-lg);
  }
}

/* -------------------------------------------------------------------------- */

.v2-event__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.v2-event__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Title placeholder: past events, events without an image, or a failed image load. */
.v2-event__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 140px;
  padding: var(--space-md);
  box-sizing: border-box;
  background-color: var(--color-bg-accent-soft);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
}

.v2-event__placeholder-text {
  font-family: var(--font-family-base);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-brand-dark);
  text-align: center;
  padding: 0 var(--space-xs);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.v2-event__meta {
  margin: 0 0 var(--space-xs);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--fs-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-meta);
  color: var(--color-text-muted);
}

.v2-event__title {
  margin: 0 0 6px;
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-section);
  color: var(--color-text-primary);
}

.v2-event__project {
  margin: 0 0 var(--space-sm);
  color: var(--color-text-muted);
}

.v2-event__sep::before {
  content: "\00B7";
  margin: 0 6px;
}

.v2-event__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px var(--space-sm);
  margin: 0;
  font-size: 1rem;
}

.v2-event__facts dt {
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: var(--ls-meta);
  color: var(--color-text-muted);
  align-self: center;
}

.v2-event__facts dd {
  margin: 0;
}

.v2-event__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
}

@media (min-width: 992px) {
  .v2-event__action {
    align-items: flex-end;
    min-width: 190px;
  }
}

.v2-event__seats {
  margin: 0;
  font-size: var(--fs-meta);
  color: var(--color-text-muted);
}

/* ==========================================================================
   HERO (Spec §6.2 — relational photo with overlaid editorial copy)
   ========================================================================== */

.v2-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 420px;
  margin-block: var(--space-md) var(--space-xl);
  border-radius: var(--radius-xl);
}

@media (min-width: 768px) {
  .v2-hero {
    min-height: 520px;
    margin-block: var(--space-lg) var(--space-xxl);
  }
}

.v2-hero__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * Scrim carries the text contrast. Narrow screens get a full wash because the
 * copy sits over the middle of the photo; from 768px it becomes a left-to-right
 * gradient so the subject stays visible.
 */
.v2-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(21, 47, 48, 0.78) 0%,
    rgba(21, 47, 48, 0.82) 100%
  );
}

@media (min-width: 768px) {
  .v2-hero::before {
    background: linear-gradient(
      90deg,
      rgba(21, 47, 48, 0.88) 0%,
      rgba(21, 47, 48, 0.72) 38%,
      rgba(21, 47, 48, 0.25) 68%,
      rgba(21, 47, 48, 0) 100%
    );
  }
}

/* Oversized Soft sygnet, echoing the footer texture (Spec §3.2) */
.v2-hero__motif {
  position: absolute;
  right: -40px;
  bottom: -60px;
  z-index: -1;
  width: 260px;
  color: var(--color-brand-soft);
  opacity: 0.18;
  pointer-events: none;
}

.v2-hero__motif svg {
  display: block;
  width: 100%;
  height: auto;
}

.v2-hero__content {
  position: relative;
  max-width: 34rem;
  padding: var(--space-lg);
  color: var(--color-text-on-dark);
}

@media (min-width: 768px) {
  .v2-hero__content {
    padding: var(--space-xl);
  }
}

.v2-hero__title {
  margin: 0 0 var(--space-sm);
  max-width: 12ch;
  font-size: var(--fs-h1-mobile);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--color-white);
  text-align: left;
}

@media (min-width: 768px) {
  .v2-hero__title {
    font-size: var(--fs-h1-desktop);
  }
}

.v2-hero__lead {
  margin: 0 0 var(--space-md);
  max-width: 38ch;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: rgba(255, 255, 255, 0.9);
}

/* Arrow flows inline after the last word, so it stays put when the label wraps. */
.v2-hero__cta-arrow {
  display: inline-block;
  margin-left: 10px;
  transition: transform 0.2s ease;
}

.v2-hero__cta:hover .v2-hero__cta-arrow {
  transform: translateX(4px);
}

/* Phones: compact copy block and CTA so the label stays on one or two lines. */
@media (max-width: 767.98px) {
  .v2-hero {
    min-height: 0;
  }

  .v2-hero__content {
    width: 100%;
    padding: var(--space-md);
  }

  .v2-hero__title {
    max-width: none;
  }

  .v2-hero__lead {
    margin-bottom: var(--space-sm);
  }

  a.v2-hero__cta {
    max-width: 100%;
    padding: 14px 22px;
    font-size: 0.9375rem;
    line-height: 1.25;
    letter-spacing: 0.06em;
    text-align: center;
  }

  .v2-hero__cta-label {
    text-wrap: balance;
  }

  .v2-hero__cta-arrow {
    margin-left: 8px;
  }
}

/* The news heading is secondary once the hero owns the H1. */
.v2-body .v2-hero + .page-title {
  font-size: var(--fs-h2-mobile);
}

@media (min-width: 768px) {
  .v2-body .v2-hero + .page-title {
    font-size: var(--fs-h2-desktop);
  }
}

/* ==========================================================================
   NEWS LIST (Faza 5.2)
   Restyles the existing News/All.cshtml markup — no V2 fork of the view.
   Everything is scoped under .v2-body so V1 is untouched.
   ========================================================================== */

.v2-body .page-title {
  font-size: var(--fs-h1-mobile);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  margin-bottom: var(--space-lg);
  padding: 0;
  border: none;
  text-align: left;
}

@media (min-width: 768px) {
  .v2-body .page-title {
    font-size: var(--fs-h1-desktop);
  }
}

.v2-body .blog_article {
  display: flex;
  flex-direction: column;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  margin-bottom: var(--space-lg);
  text-align: left;
}

/* Date reads as editorial meta, so lift it above the headline. */
.v2-body .blog_article .entry-cover {
  order: 1;
}

.v2-body .blog_article .entry-footer {
  order: 2;
}

.v2-body .blog_article .entry-header {
  order: 3;
}

.v2-body .blog_article .entry-content {
  order: 4;
}

.v2-body .blog_article .entry-cover {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-sm);
}

.v2-body .blog_article .entry-cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  transition: transform 0.4s ease;
}

.v2-body .blog_article:hover .entry-cover img {
  transform: scale(1.03);
}

.v2-body .entry-cover-placeholder {
  border-radius: 0;
  background-color: var(--color-bg-accent-soft);
  color: var(--color-brand-dark);
  min-height: 200px;
}

.v2-body .entry-header {
  margin-bottom: 6px;
  padding: 0;
  border: none;
  background: none;
  text-align: left;
}

.v2-body .entry-header a,
.v2-body .entry-header span {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-section);
  color: var(--color-text-primary);
  text-decoration: none;
  text-transform: none;
}

.v2-body .entry-header a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--color-brand-accent);
  text-decoration-thickness: 2px;
}

/*
 * style.css hovers card titles to #88d6fb and pagination to #1b5679 — both
 * leftovers from the legacy theme. Selectors below carry an extra element
 * (body) to outweigh those three-class rules.
 */
body.v2-body .blog_article .entry-header a:hover,
body.v2-body .blog_article .entry-footer ul li a:hover {
  color: var(--color-text-primary);
}

/* Links written into article bodies by the editor. */
body.v2-body .blog_article .entry-content a:not(.button_3) {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-brand-accent);
}

body.v2-body .blog_article .entry-content a:not(.button_3):hover {
  color: var(--color-text-primary);
  text-decoration-thickness: 2px;
}

body.v2-body .blog_article .entry-content {
  font-size: 1rem;
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  padding: 0;
  border: none;
  background: none;
}

@media (min-width: 768px) {
  body.v2-body .blog_article .entry-content {
    font-size: var(--fs-body);
  }
}

.v2-body .entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* Date reads as editorial meta, above the headline rather than buried below. */
.v2-body .entry-footer {
  padding: 0;
  border: none;
  background: none;
  margin-bottom: var(--space-xs);
}

.v2-body .entry-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.v2-body .blog_article_date,
.v2-body .blog_article_date span {
  font-size: var(--fs-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-meta);
  color: var(--color-text-muted);
  background: none;
  padding: 0;
}

/* Legacy pill button reskinned as the editorial CTA (Spec §6.5). */
.v2-body .entry-content .text-right {
  text-align: left;
}

.v2-body .button_3 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  border-bottom: 2px solid var(--color-brand-accent);
  border-radius: 0;
  padding: 0 0 4px;
  font-size: var(--fs-meta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-btn);
  color: var(--color-brand-dark);
  text-decoration: none;
  box-shadow: none;
}

.v2-body .button_3:hover {
  background: none;
  color: var(--color-brand-dark);
}

.v2-body .button_3::after {
  content: "\2192";
  transition: transform 0.2s ease;
}

.v2-body .button_3:hover::after {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.v2-body .page-numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  list-style: none;
  margin: var(--space-lg) 0;
  padding: 0;
}

.v2-body .page-numbers a,
.v2-body .page-numbers span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--color-text-primary);
  text-decoration: none;
  background: none;
  border: 1px solid var(--color-border-subtle);
}

.v2-body .page-numbers a:hover {
  border-color: var(--color-brand-accent);
}

body.v2-body .page-numbers li a:hover {
  background-color: var(--color-bg-accent-soft);
  color: var(--color-text-primary);
  border: 1px solid var(--color-brand-accent);
}

body.v2-body .page-numbers li a.active,
body.v2-body .page-numbers li a.active:hover {
  background-color: var(--color-brand-dark);
  border: 1px solid var(--color-brand-dark);
  color: var(--color-white);
}

.v2-body .page-numbers a.active {
  background-color: var(--color-brand-dark);
  border-color: var(--color-brand-dark);
  color: var(--color-white);
}

.v2-body .page-numbers .disabled,
.v2-body .page-numbers .ellipsis {
  color: var(--color-text-muted);
  border-color: transparent;
}

/* ==========================================================================
   DIVIDERS (Spec §5.3 — no heavy shadows, use subtle lines & space)
   ========================================================================== */

.v2-divider {
  border: none;
  border-top: 1px solid var(--color-border-subtle);
  margin: 0;
}

/* ==========================================================================
   SKIP LINK (WCAG 2.4.1)
   ========================================================================== */

.v2-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background-color: var(--color-brand-dark);
  color: var(--color-white);
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) 0;
  text-decoration: none;
  font-weight: 600;
}

.v2-skip-link:focus {
  left: 0;
}

/* ==========================================================================
   HEADER (Spec §6.1 — logo on plain light background, no enclosing frames)
   ========================================================================== */

.v2-header {
  position: relative;
  z-index: 100;
  background-color: var(--color-bg-main);
  border-bottom: 1px solid var(--color-border-subtle);
}

.v2-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-sm);
}

/* --------------------------------------------------------------------------
   Brand lockup: sygnet + logotype + strapline (Spec §3.1)
   -------------------------------------------------------------------------- */

.v2-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}

.v2-brand__sygnet {
  display: inline-flex;
  flex-shrink: 0;
}

.v2-brand__sygnet img {
  display: block;
  width: 44px;
  height: 44px;
}

.v2-brand__text {
  display: flex;
  flex-direction: column;
}

.v2-brand__name {
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--color-brand-dark);
}

.v2-brand__tagline {
  margin-top: 3px;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Mobile toggle
   -------------------------------------------------------------------------- */

.v2-nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.v2-nav-toggle__bar {
  display: block;
  height: 2px;
  border-radius: 2px;
  background-color: var(--color-brand-dark);
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.v2-nav-toggle[aria-expanded="true"] .v2-nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.v2-nav-toggle[aria-expanded="true"] .v2-nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.v2-nav-toggle[aria-expanded="true"] .v2-nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Navigation — editorial uppercase (Spec §6.1)
   -------------------------------------------------------------------------- */

.v2-nav {
  display: none;
}

.v2-nav--open {
  display: block;
  position: absolute;
  inset-inline: 0;
  top: 100%;
  background-color: var(--color-bg-main);
  border-bottom: 1px solid var(--color-border-subtle);
  padding: var(--space-sm) var(--canvas-margin) var(--space-md);
  max-height: 70vh;
  overflow-y: auto;
}

.v2-nav__list,
.v2-nav__submenu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.v2-nav__link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  background: none;
  border: none;
  font: inherit;
  font-size: var(--fs-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-meta);
  color: var(--color-brand-dark);
  text-decoration: none;
  cursor: pointer;
}

/*
 * Hover/active use an underline rather than a colour swap: terracotta
 * (#D96C4A) on white is ~3.1:1 and fails AA for text this size (Spec §8.1).
 */
.v2-nav__link:hover,
.v2-nav__item--active > .v2-nav__link {
  box-shadow: inset 0 -2px 0 var(--color-brand-accent);
}

.v2-nav__chevron {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}

.v2-nav__disclosure[aria-expanded="true"] .v2-nav__chevron {
  transform: translateY(1px) rotate(-135deg);
}

.v2-nav__submenu {
  display: none;
  padding-bottom: var(--space-xs);
}

.v2-nav__disclosure[aria-expanded="true"] + .v2-nav__submenu {
  display: block;
}

.v2-nav__sublink {
  display: block;
  padding: 9px 0 9px 16px;
  font-size: 1rem;
  color: var(--color-text-primary);
  text-decoration: none;
  border-left: 2px solid var(--color-border-subtle);
}

.v2-nav__sublink:hover {
  border-left-color: var(--color-brand-accent);
  background-color: var(--color-bg-accent-soft);
}

@media (min-width: 992px) {
  .v2-nav-toggle {
    display: none;
  }

  .v2-nav {
    display: block;
  }

  .v2-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-md);
  }

  .v2-nav__item {
    position: relative;
  }

  .v2-nav__link {
    padding: 8px 0;
  }

  .v2-nav__submenu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 250px;
    padding: var(--space-xs) 0;
    background-color: var(--color-bg-main);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
  }

  .v2-nav__sublink {
    padding: 9px 18px;
    border-left: none;
  }

  /* Keyboard users reach the submenu without activating the disclosure. */
  .v2-nav__item--has-children:focus-within .v2-nav__submenu {
    display: block;
  }
}

/* ==========================================================================
   FOOTER (Spec §2.1 dark canvas, §3.2 soft motif, §5.2 radius)
   ========================================================================== */

.v2-footer {
  position: relative;
  overflow: hidden;
  margin-top: var(--space-xl);
  background-color: var(--color-bg-dark);
  color: var(--color-text-on-dark);
}

/* Oversized Soft motif as background texture (Spec §3.2) */
.v2-footer__motif {
  position: absolute;
  right: 40px;
  bottom: -56px;
  width: 300px;
  color: var(--color-brand-soft);
  opacity: 0.07;
  pointer-events: none;
}

.v2-footer__motif svg {
  display: block;
  width: 100%;
  height: auto;
}

.v2-footer__main {
  position: relative;
  display: grid;
  gap: var(--space-lg);
  padding-block: var(--space-xl);
}

@media (min-width: 768px) {
  .v2-footer__main {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .v2-footer__main {
    grid-template-columns: 1fr 1fr 1.4fr;
    gap: var(--space-xl);
  }
}

.v2-footer__heading {
  margin: 0 0 var(--space-sm);
  font-size: var(--fs-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-meta);
  color: var(--color-brand-soft);
}

.v2-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.v2-footer a {
  color: var(--color-text-on-dark);
  text-decoration: none;
}

.v2-footer a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--color-brand-accent);
  text-decoration-thickness: 2px;
}

.v2-footer__contact {
  display: grid;
  gap: 10px;
  font-style: normal;
}

.v2-footer__place {
  color: var(--color-brand-soft);
  line-height: var(--lh-body);
}

/* --------------------------------------------------------------------------
   Newsletter card — light panel on the dark canvas
   -------------------------------------------------------------------------- */

.v2-newsletter-card {
  background-color: var(--color-brand-soft);
  color: var(--color-brand-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}

.v2-newsletter-card__title {
  margin: 0 0 var(--space-xs);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-section);
}

.v2-newsletter-card__lead {
  margin: 0 0 var(--space-sm);
  color: var(--color-text-muted);
}

.v2-newsletter-card a {
  color: var(--color-brand-dark);
}

/* --------------------------------------------------------------------------
   Bottom bar
   -------------------------------------------------------------------------- */

.v2-footer__bottom {
  position: relative;
  border-top: 1px solid rgba(232, 222, 208, 0.18);
}

.v2-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-md);
}

.v2-footer__copyright {
  margin: 0;
  font-size: var(--fs-meta);
  color: var(--color-brand-soft);
}

.v2-footer__socials {
  list-style: none;
  display: flex;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
}

.v2-footer__socials a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.v2-footer__socials svg {
  width: 18px;
  height: 18px;
}

/* ==========================================================================
   DEVELOPER PREVIEW BADGE
   Shown when cookie tworczosc_theme=v2 is active. Not visible to public users
   (they never have the cookie).
   ========================================================================== */

.v2-preview-badge {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 9999;
  background-color: var(--color-brand-dark);
  color: var(--color-white);
  border-radius: var(--radius-md);
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  opacity: 0.9;
}

.v2-preview-badge a {
  color: var(--color-brand-soft);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.v2-preview-badge a:hover {
  color: var(--color-brand-accent);
}

/* ==========================================================================
   EVENT REGISTRATION FORM (Spec §6, Faza 6, Zadanie 6.1)
   Views/EventRegistration/*.cshtml + EventPast.cshtml, via _EventLayout.
   Selectors are scoped under .v2-body and made more specific than the
   `.event-registration-form …` rules in event-registration.css, which is
   linked after layout-v2.css (@section Styles renders last) and would
   otherwise win same-specificity ties by source order.
   ========================================================================== */

.v2-body .event-registration {
  border-top: none;
  padding-top: 0;
}

/* Session summary — sage-tinted panel instead of the V1 purple gradient hero,
   with the brand leaf sygnet bleeding off the bottom-right corner. */
.v2-body .session-header {
  position: relative;
  overflow: hidden;
  background-color: #f1f4f3;
  background-image: url("/img/circle-motif.svg");
  background-repeat: no-repeat;
  background-position: right -24px bottom -28px;
  background-size: 160px auto;
  box-shadow: none;
  border-radius: var(--radius-lg);
}

.v2-body .session-icon-wrapper {
  position: relative;
  background: var(--color-brand-accent);
  backdrop-filter: none;
  border: none;
  box-shadow: none;
  border-radius: 50%;
}

.v2-body .session-icon {
  display: flex;
  width: 30px;
  height: 30px;
  color: var(--color-white);
  filter: none;
}

.v2-body .session-icon svg {
  width: 100%;
  height: 100%;
}

.v2-body .session-title {
  color: var(--color-text-primary);
  text-shadow: none;
  font-family: var(--font-family-base);
  font-size: var(--fs-h3);
}

.v2-body .session-date {
  color: var(--color-text-muted);
  text-shadow: none;
  font-family: var(--font-family-base);
}

/* Replaces the 🕒 emoji from event-registration.css. */
.v2-body .session-date::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='8' stroke='%23152F30' stroke-opacity='.7' stroke-width='1.5'/%3E%3Cpath d='M10 5.5V10l3 2' stroke='%23152F30' stroke-opacity='.7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.v2-body .registration-subheading {
  color: var(--color-text-muted);
  font-family: var(--font-family-base);
}

/* Form fields */
.v2-body .event-registration-form .form-control label {
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-weight: 600;
}

.v2-body .event-registration-form .input_line,
.v2-body .event-registration-form .input_area,
.v2-body .event-registration-form select {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  box-shadow: none;
}

.v2-body .event-registration-form .input_line:focus,
.v2-body .event-registration-form .input_area:focus,
.v2-body .event-registration-form select:focus {
  border-color: var(--color-brand-accent);
  box-shadow: none;
}

.v2-body .event-registration-form .checkbox-group input[type="checkbox"] {
  flex-shrink: 0;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  margin: 0.3em 0 0;
  accent-color: var(--color-brand-accent);
}

.v2-body .event-registration-form .checkbox-group label {
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-weight: 400;
}

.v2-body .form-validatoin-message,
.v2-body .field-validation-error {
  color: #b3261e;
  font-family: var(--font-family-base);
}

.v2-body .input-validation-error {
  border-color: #b3261e !important;
}

/* Submit button, restyled as the V2 primary CTA (branding-v2.css .btn-primary).
   Also used by _Confirmation.cshtml's "Powrót" link, so this covers <a> and
   <button> alike. */
.v2-body .event-registration-form .input_submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-inline: auto;
  background: var(--color-brand-accent);
  background-image: none;
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-md);
  width: auto;
  height: auto;
  padding: 14px 28px;
  text-align: center;
  font-family: var(--font-family-base);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-btn);
}

.v2-body .event-registration-form .input_submit::after {
  content: "\2192";
  transition: transform 0.2s ease;
}

/* Hover colour must be set explicitly: the sitewide `a:hover { color: #22948f }`
   rule (style.css) otherwise tints the "Powrót" link (an <a>) on hover while
   leaving the "Zapisz" <button> untouched, so the two ended up looking
   different on hover despite sharing this class. */
.v2-body .event-registration-form .input_submit:hover {
  background: #c45b3a;
  color: var(--color-white);
}

.v2-body .event-registration-form .input_submit:hover::after {
  transform: translateX(4px);
}

/* Status panels (no events / not started / event past / post-submit) —
   dark card instead of the V1 gradients, so existing white alert text
   (set !important in event-registration.css) keeps working unchanged. */
.v2-body .alert_alert,
.v2-body .alert_error,
.v2-body .alert_info,
.v2-body .alert_retry,
.v2-body .alert_confirmation {
  background: var(--color-brand-dark);
  border: none;
  box-shadow: none;
  border-radius: var(--radius-lg);
}

.v2-body .alert_error {
  border-left: 4px solid var(--color-brand-accent);
}

.v2-body .alert_info {
  border-left: 4px solid var(--color-brand-sage);
}

.v2-body .alert_alert .close,
.v2-body .alert_error .close,
.v2-body .alert_info .close,
.v2-body .alert_retry .close,
.v2-body .alert_confirmation .close {
  background: rgba(255, 255, 255, 0.15);
}

/* ==========================================================================
   CONTACT PAGE (Spec §6, Faza 6)
   Views/Contact/ContactUsV2.cshtml is a real DOM fork (definition-list
   layout instead of V1's card grid), same reasoning as UpcomingV2 in
   Faza 4 — the required structure isn't reachable with CSS alone.
   V1 (ContactUs.cshtml) and its custom.css rules are untouched.
   ========================================================================== */

.v2-section-title--sm {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-md);
}

.v2-section-title--sm .v2-section-title__motif {
  width: 8px;
  height: 8px;
}

/* Two-column editorial layout: contact details as a plain masthead-style
   list, map/parking as an aside. No card frames or shadows (Spec §5.3). */
.v2-contact__layout {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 992px) {
  .v2-contact__layout {
    grid-template-columns: 1.2fr 1fr;
    align-items: start;
  }
}

.v2-contact__details {
  margin: 0;
}

.v2-contact__detail {
  padding-block: var(--space-md);
  border-top: 1px solid var(--color-border-subtle);
}

.v2-contact__detail:first-child {
  padding-top: 0;
  border-top: none;
}

.v2-contact__detail dt {
  margin-bottom: var(--space-xs);
  font-size: var(--fs-meta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-meta);
  color: var(--color-text-muted);
}

.v2-contact__detail dd {
  margin: 0;
  color: var(--color-text-primary);
  line-height: var(--lh-body);
}

.v2-contact__detail dd a {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-brand-accent);
  text-underline-offset: 3px;
}

.v2-contact__detail dd a:hover {
  text-decoration-thickness: 2px;
}

.v2-contact__maps--parking {
  margin-top: var(--space-lg);
}

.v2-contact__map-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.v2-contact__map-frame iframe {
  display: block;
  width: 100%;
  min-height: 260px;
  border: 0;
}

.v2-contact__map-note {
  margin: var(--space-xs) 0 0;
  font-size: var(--fs-meta);
  color: var(--color-text-muted);
}

/* "Wesprzyj nas" is the one soft-background thematic panel on the page
   (Spec §6.4) — everything above stays on plain white canvas. */
.v2-contact-support {
  margin-top: var(--space-xl);
  background-color: var(--color-bg-accent-soft);
  border-radius: var(--radius-xl);
}

.v2-contact-support__inner {
  max-width: 720px;
  padding: var(--space-lg);
}

@media (min-width: 768px) {
  .v2-contact-support__inner {
    padding: var(--space-xl);
  }
}

.v2-contact-support p {
  margin-bottom: var(--space-sm);
}

.v2-contact-support p:last-child {
  margin-bottom: 0;
}

.v2-contact-support__copy-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* Secondary action — brand-dark outline, not terracotta (Spec §2.2: one
   accent colour per section; terracotta is already spent elsewhere as the
   site-wide primary CTA colour). */
.v2-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--color-brand-dark);
  border: 1.5px solid var(--color-brand-dark);
  border-radius: var(--radius-md);
  padding: 10px 20px;
  font-size: var(--fs-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-btn);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.v2-btn-secondary:hover {
  background-color: var(--color-brand-dark);
  color: var(--color-white);
}

.v2-contact-support__status {
  min-height: 1em;
  font-size: var(--fs-meta);
  color: var(--color-text-muted);
}

@media (max-width: 991px) {
  .v2-body .contact-map {
    position: static;
  }
}
/* ==========================================================================
   NEWS DETAILS V2  (.v2-nd__*)
   Used only by Views/News/Details.cshtml when ?theme=v2 is active.
   ========================================================================== */

/* ── Breadcrumbs ─────────────────────────────────────────────────────────── */

.v2-nd__breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-meta);
  color: var(--color-text-muted);
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}

.v2-nd__breadcrumbs a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.v2-nd__breadcrumbs a:hover {
  color: var(--color-brand-accent);
}

.v2-nd__breadcrumbs [aria-current="page"] {
  color: var(--color-text-primary);
}

/* ── Meta row (date | AKTUALNOŚCI) ──────────────────────────────────────── */

.v2-nd__meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.v2-nd__meta-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-meta);
}

.v2-nd__meta-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.v2-nd__meta-sep {
  color: var(--color-border-subtle);
}

.v2-nd__meta-category {
  font-size: var(--fs-meta);
  font-weight: 700;
  color: var(--color-brand-accent);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
}

/* ── H1 title row with leaf motif + botanical decoration ─────────────────── */

.v2-nd__title-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  overflow: hidden; /* clips botanical SVG */
}

/* Motif size drives the lead indent too, so it lives in one variable. */
body.v2-body {
  --v2-motif: 24px;
  --v2-title-fs: var(--fs-page-title-mobile);
}

@media (min-width: 768px) {
  body.v2-body {
    --v2-motif: 32px; /* smaller than the 44px header logo mark */
    --v2-title-fs: var(--fs-page-title-desktop);
  }
}

.v2-nd__title-motif {
  display: inline-flex;
  flex-shrink: 0;
  /* Centres the motif on the first line of the title. */
  margin-top: calc(
    (var(--v2-title-fs) * var(--lh-tight) - var(--v2-motif)) / 2
  );
  width: var(--v2-motif);
  height: var(--v2-motif);
}

.v2-nd__title-motif svg {
  width: 100%;
  height: 100%;
}

.v2-nd__title {
  font-size: var(--fs-page-title-mobile);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--color-text-primary);
  margin: 0;
  flex: 1;
}

@media (min-width: 768px) {
  .v2-nd__title {
    font-size: var(--fs-page-title-desktop);
  }
}

.v2-nd__botanical {
  position: absolute;
  right: -20px;
  top: -10px;
  width: 160px;
  height: 220px;
  pointer-events: none;
  opacity: 0.65;
}

@media (max-width: 767px) {
  .v2-nd__botanical {
    display: none;
  }
}

/* ── Hero image with optional teaser quote overlay ───────────────────────── */

.v2-nd__hero {
  position: relative;
  margin-bottom: var(--space-lg);
  border-radius: var(--radius-xl);
  overflow: hidden;
  max-height: 460px;
}

.v2-nd__hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-xl);
}

/* ── Two-column body grid ────────────────────────────────────────────────── */

.v2-nd__body-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
  align-items: start;
}

@media (min-width: 992px) {
  .v2-nd__body-grid--with-sidebar {
    grid-template-columns: 1fr 360px;
  }
}

/* ── Main article body ───────────────────────────────────────────────────── */

.v2-nd__content {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-primary);
}

.v2-nd__content h2 {
  font-size: var(--fs-h2-mobile);
  font-weight: 600;
  line-height: var(--lh-section);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

@media (min-width: 768px) {
  .v2-nd__content h2 {
    font-size: var(--fs-h2-desktop);
  }
}

.v2-nd__content h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  margin-top: var(--space-md);
  margin-bottom: var(--space-xs);
}

.v2-nd__content p {
  margin-bottom: var(--space-sm);
}

/* Terracotta bullet points for unordered lists in article body */
.v2-nd__content ul {
  list-style: none;
  padding: 0;
  margin-bottom: var(--space-md);
}

.v2-nd__content ul li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.v2-nd__content ul li::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  min-width: 9px;
  border-radius: 50%;
  background-color: var(--color-brand-accent);
  margin-top: 8px; /* vertical alignment with first text line */
}

/* Styled blockquote */
.v2-nd__content blockquote {
  position: relative;
  background-color: var(--color-bg-accent-soft);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-md) var(--space-md)
    calc(var(--space-md) + 20px);
  margin: var(--space-md) 0;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--color-text-primary);
}

.v2-nd__content blockquote::before {
  content: "\201C\201C"; /* double opening quote mark */
  position: absolute;
  left: var(--space-md);
  top: var(--space-xs);
  font-size: 2rem;
  line-height: 1;
  color: var(--color-brand-accent);
  font-style: normal;
}

/* Inline links in body */
body.v2-body
  .v2-nd__content
  a:not(.v2-link-cta):not(.btn-primary):not(.button_3) {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-brand-accent);
}

body.v2-body
  .v2-nd__content
  a:not(.v2-link-cta):not(.btn-primary):not(.button_3):hover {
  text-decoration-thickness: 2px;
}

.v2-nd__back {
  margin-top: var(--space-lg);
}

/* ── Event sidebar card ──────────────────────────────────────────────────── */

.v2-nd__sidebar {
  position: sticky;
  top: var(--space-lg);
}

.v2-nd__event-card {
  background-color: var(--color-bg-accent-soft);
  border-radius: var(--radius-xl);
  padding: var(--space-md);
}

@media (min-width: 992px) {
  .v2-nd__event-card {
    padding: var(--space-lg);
  }
}

.v2-nd__event-card-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid rgba(21, 47, 48, 0.12);
}

.v2-nd__event-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background-color: var(--color-brand-accent);
  color: var(--color-white);
}

.v2-nd__event-card-icon svg {
  width: 18px;
  height: 18px;
}

.v2-nd__event-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 4px;
}

.v2-nd__event-card-subtitle {
  font-size: var(--fs-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-meta);
  color: var(--color-text-muted);
  margin: 0;
}

/* Event detail rows */
.v2-nd__event-details {
  list-style: none;
  margin: 0 0 var(--space-md);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.v2-nd__event-detail-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.v2-nd__detail-icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  color: var(--color-brand-dark);
  margin-top: 3px;
  opacity: 0.7;
}

.v2-nd__detail-label {
  font-size: var(--fs-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-meta);
  color: var(--color-text-muted);
  margin: 0 0 2px;
}

.v2-nd__detail-value {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--color-text-primary);
  margin: 0;
}

/* Primary register CTA */
.v2-nd__event-cta {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: var(--space-md);
  text-decoration: none !important;
}

/* Contact strip below card */
.v2-nd__event-contact {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(21, 47, 48, 0.12);
}

.v2-nd__event-contact-motif {
  color: var(--color-brand-sage);
  display: flex;
  flex-shrink: 0;
}

.v2-nd__event-contact-label {
  font-size: var(--fs-meta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-meta);
  color: var(--color-text-muted);
  margin: 0 0 2px;
}

.v2-nd__event-contact-hint {
  font-size: var(--fs-meta);
  color: var(--color-text-muted);
  margin: 0 0 4px;
}

.v2-nd__event-contact-email {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--color-brand-dark);
  text-decoration: none;
}

.v2-nd__event-contact-email:hover {
  color: var(--color-brand-accent);
}

/* ── "Zobacz także" related articles ─────────────────────────────────────── */

.v2-nd__related {
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-xl);
}

.v2-nd__related-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.v2-nd__related-title {
  font-size: var(--fs-h2-mobile);
  font-weight: 700;
  margin: 0;
  color: var(--color-text-primary);
}

@media (min-width: 768px) {
  .v2-nd__related-title {
    font-size: var(--fs-h2-desktop);
  }
}

.v2-nd__related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 640px) {
  .v2-nd__related-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.v2-nd__related-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.v2-nd__related-card-image-link {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.v2-nd__related-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.v2-nd__related-card-image-link:hover .v2-nd__related-card-image {
  transform: scale(1.04);
}

.v2-nd__related-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.v2-nd__related-card-date {
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  margin: 0;
}

.v2-nd__related-card-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: var(--lh-section);
  margin: 0;
}

.v2-nd__related-card-title a {
  color: var(--color-text-primary);
  text-decoration: none;
}

.v2-nd__related-card-title a:hover {
  color: var(--color-brand-accent);
}

/* ==========================================================================
   PROJECTS LIST V2  (.v2-pl__*)
   Used by Views/Projects/Index.cshtml. Reuses the .v2-nd__ title row and
   leaf motif from News Details; rows are image-left editorial cards.
   ========================================================================== */

/* ── Header: H1, lead and botanical decoration ───────────────────────────── */

.v2-pl__header {
  position: relative;
  margin-top: var(--space-md);
  margin-bottom: var(--space-lg);
}

.v2-pl__title-row {
  margin-bottom: var(--space-sm);
}

.v2-pl__lead {
  max-width: 62ch;
  margin: 0;
  padding-left: calc(
    var(--v2-motif) + var(--space-sm)
  ); /* aligns with the H1 text */
  color: var(--color-text-muted);
  line-height: var(--lh-body);
}

/* Sits behind the page content (z-index -1), so it never tints cards below. */
.v2-pl__backdrop {
  position: absolute;
  top: -15px;
  right: -45px;
  z-index: -1;
  width: 290px;
  color: #152f30;
  opacity: 0.02;
  pointer-events: none;
}

.v2-pl__backdrop svg {
  width: 100%;
  height: auto;
  display: block;
  fill: currentColor;
}

@media (max-width: 767px) {
  .v2-pl__lead {
    padding-left: 0;
  }

  .v2-pl__backdrop {
    display: none;
  }
}

/* ── List rows ───────────────────────────────────────────────────────────── */

.v2-pl__list {
  list-style: none;
  margin: 0 0 var(--space-xl);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.v2-pl__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .v2-pl__item {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: center;
  }
}

.v2-pl__image-link {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background-color: var(--color-bg-accent-soft);
}

@media (min-width: 768px) {
  .v2-pl__image-link {
    aspect-ratio: 2 / 1;
  }
}

.v2-pl__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.v2-pl__image-link:hover .v2-pl__image {
  transform: scale(1.03);
}

/* Text column carries the divider, so it spans only the copy (as in mockup) */
.v2-pl__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border-subtle);
}

.v2-pl__item:last-child .v2-pl__body {
  border-bottom: none;
  padding-bottom: 0;
}

@media (min-width: 768px) {
  .v2-pl__body {
    align-self: stretch;
    justify-content: center;
  }
}

/* ── Tags row (KULTURA · DZIECI · RODZINA) ───────────────────────────────── */

.v2-pl__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--color-text-primary);
}

.v2-pl__tag--primary {
  color: var(--color-text-muted);
}

.v2-pl__tags-sep {
  color: var(--color-brand-sage);
}

/* ── Title, description, CTA ─────────────────────────────────────────────── */

.v2-pl__title {
  font-size: var(--fs-h2-mobile);
  font-weight: 700;
  line-height: var(--lh-section);
  letter-spacing: -0.01em;
  margin: 0;
}

@media (min-width: 768px) {
  .v2-pl__title {
    font-size: var(--fs-h2-desktop);
  }
}

.v2-pl__title a {
  color: var(--color-text-primary);
  text-decoration: none;
}

.v2-pl__title a:hover {
  color: var(--color-brand-accent);
}

.v2-pl__description {
  margin: 0;
  max-width: 52ch;
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: var(--lh-body);
}

.v2-pl__cta {
  margin-top: var(--space-xs);
}

/* ==========================================================================
   PROJECT DETAILS V2  (.v2-pi__*)
   Used by Views/Projects/Item.cshtml. Shares breadcrumbs, title row, hero,
   body grid and event card with News Details (.v2-nd__*).
   ========================================================================== */

.v2-pi__section-title {
  font-size: var(--fs-h2-mobile);
  font-weight: 700;
  line-height: var(--lh-section);
  margin: 0 0 var(--space-md);
  color: var(--color-text-primary);
}

@media (min-width: 768px) {
  .v2-pi__section-title {
    font-size: var(--fs-h2-desktop);
  }
}

/* ── Gallery ─────────────────────────────────────────────────────────────── */

.v2-pi__gallery {
  margin-top: var(--space-xl);
}

.v2-pi__gallery-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}

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

.v2-pi__gallery-link {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-bg-accent-soft);
}

.v2-pi__gallery-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.v2-pi__gallery-link:hover img {
  transform: scale(1.04);
}

/* ── Upcoming sessions inside the event card ─────────────────────────────── */

.v2-pi__sessions {
  list-style: none;
  margin: 0;
  padding: 0;
}

.v2-pi__session {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: var(--space-sm) 0;
  border-top: 1px solid rgba(21, 47, 48, 0.12);
}

.v2-pi__session:first-child {
  border-top: none;
  padding-top: 0;
}

.v2-pi__session:last-child {
  padding-bottom: 0;
}

.v2-pi__session p {
  margin: 0;
}

.v2-pi__session-category {
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: var(--ls-meta);
  color: var(--color-text-muted);
}

.v2-pi__session-name {
  font-weight: 700;
  line-height: var(--lh-section);
  color: var(--color-text-primary);
}

.v2-pi__session-date {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.v2-pi__session .v2-link-cta {
  margin-top: 4px;
}

.v2-pi__empty {
  margin: 0;
  font-size: 0.875rem;
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

/* ==========================================================================
   PHOTOS V2  (.v2-ph__*)
   Used by Views/Photos/Index.cshtml and Items.cshtml. Header, breadcrumbs
   and title row are shared with .v2-pl__ / .v2-nd__.
   ========================================================================== */

.v2-ph__notice {
  margin: 0 0 var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-accent-soft);
  color: var(--color-text-primary);
  line-height: var(--lh-body);
}

/* ── Album grid ──────────────────────────────────────────────────────────── */

.v2-ph__albums {
  list-style: none;
  margin: 0 0 var(--space-xl);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 640px) {
  .v2-ph__albums {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.v2-ph__album {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
}

.v2-ph__album-image-link {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: var(--space-xs);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-bg-accent-soft);
}

.v2-ph__album-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.v2-ph__album-image-link:hover .v2-ph__album-image {
  transform: scale(1.03);
}

.v2-ph__album-count {
  margin: 0;
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.v2-ph__album-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: var(--lh-section);
  letter-spacing: -0.01em;
}

.v2-ph__album-title a {
  color: var(--color-text-primary);
  text-decoration: none;
}

.v2-ph__album-title a:hover {
  color: var(--color-brand-accent);
}

/* ── Photo grid inside an album ──────────────────────────────────────────── */

.v2-ph__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}

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

@media (min-width: 992px) {
  .v2-ph__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.v2-ph__photo {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-bg-accent-soft);
}

.v2-ph__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.v2-ph__photo:hover img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .v2-ph__album-image,
  .v2-ph__photo img {
    transition: none;
  }
}

/* ==========================================================================
   VIDEOS V2  (.v2-vd__*)
   Used by Views/Media/Videos.cshtml. Each card is a single glightbox link,
   so the lightbox gallery holds one entry per video.
   ========================================================================== */

.v2-vd__list {
  list-style: none;
  margin: 0 0 var(--space-xl);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 640px) {
  .v2-vd__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.v2-vd__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  height: 100%;
  color: var(--color-text-primary);
  text-decoration: none;
}

.v2-vd__thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: var(--space-xs);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-bg-accent-soft);
}

.v2-vd__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.v2-vd__card:hover .v2-vd__thumb img {
  transform: scale(1.03);
}

.v2-vd__play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding-left: 3px; /* optically centres the triangle */
  border-radius: 50%;
  background-color: var(--color-white);
  color: var(--color-brand-dark);
  transform: translate(-50%, -50%);
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.v2-vd__play svg {
  width: 24px;
  height: 24px;
}

.v2-vd__card:hover .v2-vd__play,
.v2-vd__card:focus-visible .v2-vd__play {
  background-color: var(--color-brand-accent);
  color: var(--color-white);
}

.v2-vd__title {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: var(--lh-section);
  letter-spacing: -0.01em;
}

.v2-vd__card:hover .v2-vd__title {
  color: var(--color-brand-accent);
}

.v2-vd__cta {
  margin-top: auto;
}

@media (prefers-reduced-motion: reduce) {
  .v2-vd__thumb img,
  .v2-vd__play {
    transition: none;
  }
}

.v2-vd__card:hover .v2-vd__cta span {
  transform: translateX(4px);
}

/* ==========================================================================
   POSTERS V2  (.v2-po__*)
   Used by Views/Posters/Index.cshtml. Posters keep their own proportions
   (no square crop), laid out in CSS columns.
   ========================================================================== */

.v2-po__grid {
  list-style: none;
  margin: 0 0 var(--space-xl);
  padding: 0;
  columns: 2;
  column-gap: var(--space-sm);
}

@media (min-width: 768px) {
  .v2-po__grid {
    columns: 3;
    column-gap: var(--space-md);
  }
}

@media (min-width: 992px) {
  .v2-po__grid {
    columns: 4;
  }
}

.v2-po__item {
  break-inside: avoid;
  margin-bottom: var(--space-sm);
}

@media (min-width: 768px) {
  .v2-po__item {
    margin-bottom: var(--space-md);
  }
}

.v2-po__link {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-bg-accent-soft);
}

.v2-po__link img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease;
}

.v2-po__link:hover img {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .v2-po__link img {
    transition: none;
  }
}

/* ==========================================================================
   PHILOSOPHY V2  (.philo-*)
   Views/AboutUs/Philosophy.cshtml keeps one HTML structure; its inline V1
   styles are only emitted outside V2, so these rules own the V2 look.
   ========================================================================== */

/* ── Header (H1 + lead), same rhythm as the other V2 page headers ────────── */

body.v2-body .philo-hero {
  margin-top: var(--space-md);
  margin-bottom: var(--space-lg);
}

body.v2-body .philo-hero__title {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin: 0 0 var(--space-sm);
  font-size: var(--fs-page-title-mobile);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--color-text-primary);
}

@media (min-width: 768px) {
  body.v2-body .philo-hero__title {
    font-size: var(--fs-page-title-desktop);
  }
}

body.v2-body .philo-hero__lead {
  max-width: 62ch;
  margin: 0;
  padding-left: calc(
    var(--v2-motif) + var(--space-sm)
  ); /* aligns with the H1 text */
  color: var(--color-text-muted);
  line-height: var(--lh-body);
}

@media (max-width: 767px) {
  body.v2-body .philo-hero__lead {
    padding-left: 0;
  }
}

/* ── Sections ────────────────────────────────────────────────────────────── */

body.v2-body .philo-section {
  padding-block: var(--space-lg);
}

/* Soft panels sit inside the container instead of bleeding edge to edge. */
body.v2-body .philo-section--alt {
  margin-block: var(--space-lg);
  padding: var(--space-lg) var(--space-md);
  border-radius: var(--radius-xl);
  background-color: var(--color-bg-accent-soft);
}

@media (min-width: 992px) {
  body.v2-body .philo-section--alt {
    padding: var(--space-xl);
  }
}

body.v2-body .philo-lead p,
body.v2-body .philo-split__text p {
  margin-bottom: var(--space-sm);
  color: var(--color-text-primary);
  line-height: var(--lh-body);
}

body.v2-body .philo-lead {
  max-width: 68ch;
}

body.v2-body .philo-heading {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

body.v2-body .philo-heading__bar {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-brand-sage);
}

body.v2-body .philo-heading h2 {
  margin: 0;
  font-size: var(--fs-h2-mobile);
  font-weight: 700;
  line-height: var(--lh-section);
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

@media (min-width: 768px) {
  body.v2-body .philo-heading h2 {
    font-size: var(--fs-h2-desktop);
  }
}

/* ── Two-column split ────────────────────────────────────────────────────── */

body.v2-body .philo-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: start;
}

@media (min-width: 768px) {
  body.v2-body .philo-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xl);
  }
}

body.v2-body .philo-split__img {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background-color: var(--color-bg-accent-soft);
}

body.v2-body .philo-split__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Value cards ─────────────────────────────────────────────────────────── */

body.v2-body .philo-cards-label {
  margin: 0 0 var(--space-sm);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

body.v2-body .philo-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xs);
}

body.v2-body .philo-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
}

body.v2-body .philo-card i {
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--color-brand-sage);
}

body.v2-body .philo-card span {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text-primary);
}

/* ── Pillars ("Jak pracujemy") ───────────────────────────────────────────── */

body.v2-body .philo-pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}

@media (min-width: 768px) {
  body.v2-body .philo-pillars {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
  }
}

body.v2-body .philo-pillar {
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
}

body.v2-body .philo-pillar__icon {
  display: block;
  margin-bottom: var(--space-sm);
  font-size: 2rem;
  line-height: 1;
  color: var(--color-brand-sage);
}

body.v2-body .philo-pillar h3 {
  margin: 0 0 var(--space-xs);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: var(--lh-section);
  color: var(--color-text-primary);
}

body.v2-body .philo-pillar p {
  margin: 0;
  font-size: 1rem;
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

/* ── Mission panel ───────────────────────────────────────────────────────── */

body.v2-body .philo-mission {
  margin-block: var(--space-lg) var(--space-xl);
  padding: var(--space-lg) var(--space-md);
  border-radius: var(--radius-xl);
  background-color: var(--color-bg-dark);
  color: var(--color-text-on-dark);
}

@media (min-width: 992px) {
  body.v2-body .philo-mission {
    padding: var(--space-xl);
  }
}

body.v2-body .philo-mission__inner {
  max-width: 62ch;
  margin: 0 auto;
}

body.v2-body .philo-mission h2 {
  margin: 0 0 var(--space-md);
  font-size: var(--fs-h2-mobile);
  font-weight: 700;
  line-height: var(--lh-section);
  color: var(--color-text-on-dark);
}

@media (min-width: 768px) {
  body.v2-body .philo-mission h2 {
    font-size: var(--fs-h2-desktop);
  }
}

body.v2-body .philo-mission p {
  margin: 0 0 var(--space-sm);
  color: var(--color-text-on-dark);
  line-height: var(--lh-body);
}

body.v2-body .philo-mission p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   CREW V2  (.members / .member)
   Views/AboutUs/Crew.cshtml and its Crew/_*.cshtml partials keep one HTML
   structure; Bootstrap columns are replaced by a CSS grid, and the
   "Więcej" toggle (jQuery collapse) is unchanged.
   ========================================================================== */

body.v2-body .members {
  margin-bottom: var(--space-xl);
}

body.v2-body .members > h2 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0 0 var(--space-lg);
  font-size: var(--fs-h2-mobile);
  font-weight: 700;
  line-height: var(--lh-section);
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

@media (min-width: 768px) {
  body.v2-body .members > h2 {
    font-size: var(--fs-h2-desktop);
  }
}

body.v2-body .members > h2::before {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-brand-sage);
}

/* Grid replaces the Bootstrap col-* widths. */
body.v2-body .members > .row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-lg) var(--space-md);
  margin: 0 0 var(--space-lg);
}

body.v2-body .members > .row > [class*="col-"] {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

body.v2-body .members .member {
  margin: 0;
  border: 0;
  text-align: left;
}

body.v2-body .members .member .member_avatar {
  margin-bottom: var(--space-sm);
  text-align: left;
}

/* Bootstrap's .rounded-circle is !important, so the override must be too. */
body.v2-body .members .member .member_avatar img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-lg) !important;
  background-color: var(--color-bg-accent-soft);
}

body.v2-body .members .member .member_title {
  margin-bottom: var(--space-xs);
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: var(--lh-section);
  text-align: left;
  color: var(--color-text-primary);
}

body.v2-body .members .member .member_title span {
  margin-top: 4px;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--color-text-muted);
}

body.v2-body .members .member p {
  margin: 0 0 var(--space-xs);
  font-size: 1rem;
  line-height: var(--lh-body);
  text-align: left;
  color: var(--color-text-primary);
}

body.v2-body .members .member p br {
  display: none;
}

/* "Więcej »" toggle, styled as the editorial CTA (Spec §6.5). */
body.v2-body .members .member .more {
  display: block;
  width: fit-content;
  margin-top: var(--space-xs);
  padding-bottom: 4px;
  border-bottom: 2px solid var(--color-brand-accent);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-brand-dark);
}

body.v2-body .members .member .socials {
  display: flex;
  gap: var(--space-xs);
  margin: var(--space-sm) 0 0;
  padding: 0;
  list-style: none;
}

body.v2-body .members .member .socials li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background-color: var(--color-brand-dark);
  opacity: 1;
}

body.v2-body .members .member .socials li a:hover {
  background-color: var(--color-brand-accent);
}

body.v2-body .members .member .socials li a img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* ==========================================================================
   STATUTE V2  (.paragraph)
   Views/AboutUs/Statute.cshtml: legal text, kept in its original markup.
   Article typography (Spec §4) with a readable measure; "§ n" markers are
   <p align="center"> in the source, so CSS text-align overrides the attribute.
   ========================================================================== */

body.v2-body .paragraph {
  max-width: 72ch;
  margin-bottom: var(--space-xl);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-primary);
}

/* Spacer <br> between sections is replaced by heading margins. */
body.v2-body .paragraph > br {
  display: none;
}

body.v2-body .paragraph h2 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: var(--space-xl) 0 var(--space-md);
  font-size: var(--fs-h2-mobile);
  font-weight: 700;
  line-height: var(--lh-section);
  letter-spacing: -0.01em;
}

@media (min-width: 768px) {
  body.v2-body .paragraph h2 {
    font-size: var(--fs-h2-desktop);
  }
}

body.v2-body .paragraph h2:first-child {
  margin-top: 0;
}

body.v2-body .paragraph h2::before {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-brand-sage);
}

body.v2-body .paragraph h3 {
  margin: var(--space-md) 0 var(--space-xs);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: var(--lh-section);
}

body.v2-body .paragraph p[align="center"] {
  margin: var(--space-lg) 0 var(--space-xs);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border-subtle);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  text-align: left;
  color: var(--color-text-muted);
}

body.v2-body .paragraph p {
  margin-bottom: var(--space-sm);
}

/* V1 shows circles here; numbering is meaningful in a statute. */
body.v2-body .paragraph ol {
  margin: 0 0 var(--space-sm);
  padding-left: var(--space-md);
  list-style: none;
}

body.v2-body .paragraph ol > li {
  margin: 0 0 var(--space-xs);
  padding-left: var(--space-xs);
  list-style-type: decimal;
}

body.v2-body .paragraph ol[type="a"] > li {
  list-style-type: lower-alpha;
}

body.v2-body .paragraph li::marker {
  color: var(--color-text-muted);
  font-weight: 600;
}

/* ── Shared by Statute, Accessibility and Terms (.paragraph) ─────────────── */

body.v2-body .paragraph h4 {
  margin: var(--space-md) 0 var(--space-xs);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: var(--lh-section);
  letter-spacing: 0.02em;
}

body.v2-body .paragraph ul {
  margin: 0 0 var(--space-sm);
  padding: 0;
  list-style: none;
}

body.v2-body .paragraph ul > li {
  position: relative;
  margin: 0 0 var(--space-xs);
  padding-left: var(--space-md);
  list-style: none;
}

body.v2-body .paragraph ul > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.7em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-brand-accent);
}

/* Terms numbers its list items by hand ("1. …"), so no bullet on top. */
body.v2-body .paragraph--manual-list ul > li {
  padding-left: 0;
}

body.v2-body .paragraph--manual-list ul > li::before {
  display: none;
}

body.v2-body .paragraph a {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-brand-accent);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

body.v2-body .paragraph a:hover {
  text-decoration-thickness: 2px;
}

/* ==========================================================================
   FINANCIAL SUPPORT V2  (.v2-fs__*)
   Used by Views/SupportUs/FinancialSupport.cshtml.
   ========================================================================== */

.v2-fs {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
  align-items: start;
}

@media (min-width: 992px) {
  .v2-fs {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-xl);
  }
}

.v2-fs__image {
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background-color: var(--color-bg-accent-soft);
}

@media (min-width: 992px) {
  .v2-fs__image {
    aspect-ratio: 580 / 610;
  }
}

.v2-fs__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.v2-fs__body > p {
  max-width: 62ch;
  margin: 0 0 var(--space-sm);
  line-height: var(--lh-body);
}

.v2-fs__body a:not(.btn-primary) {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-brand-accent);
  text-underline-offset: 3px;
}

.v2-fs__body a:hover {
  text-decoration-thickness: 2px;
}

/* ── Transfer details panel ──────────────────────────────────────────────── */

.v2-fs__transfer {
  margin: var(--space-lg) 0;
  padding: var(--space-md);
  border-radius: var(--radius-xl);
  background-color: var(--color-bg-accent-soft);
}

@media (min-width: 768px) {
  .v2-fs__transfer {
    padding: var(--space-lg);
  }
}

.v2-fs__transfer-title {
  margin: 0 0 var(--space-md);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-section);
}

.v2-fs__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0;
}

.v2-fs__details dt {
  margin: 0 0 2px;
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.v2-fs__details dd {
  margin: 0;
  font-weight: 600;
  line-height: 1.4;
}

.v2-fs__account {
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  user-select: all; /* one click selects the whole number for copying */
}

.v2-fs__note {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* ==========================================================================
   PARTNERS V2  (.v2-pt__*)
   Used by Views/AboutUs/Partners.cshtml. Logos arrive as white-background
   rasters, so they sit on white tiles with a hairline border.
   ========================================================================== */

.v2-pt__grid {
  list-style: none;
  margin: 0 0 var(--space-xl);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

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

@media (min-width: 992px) {
  .v2-pt__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.v2-pt__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  padding: var(--space-md);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  transition: border-color 0.2s ease;
}

a.v2-pt__logo:hover {
  border-color: var(--color-brand-accent);
}

.v2-pt__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.v2-pt__name {
  margin: var(--space-xs) 0 0;
  font-size: 0.875rem;
  line-height: 1.4;
  text-align: center;
  color: var(--color-text-muted);
}

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