/* Tactical visual elements — shared across sections */

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border-subtle);
}

.section-header__left {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  flex: 1;
  min-width: 0;
}

.section-header__title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
  line-height: 1.1;
}

.section-marker {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.55;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* Маркер + заголовок без обгортки (store landing) */
.section-header > .section-marker + .section-header__title {
  flex: 1;
  min-width: 0;
}

.section-header:has(> .section-marker + .section-header__title) {
  justify-content: flex-start;
  gap: var(--space-md);
}

.section-header__meta {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-muted);
  text-align: right;
  max-width: 12ch;
  line-height: 1.4;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .section-header__meta {
    text-align: left;
    max-width: none;
  }

  .crosshair {
    width: 32px;
    height: 32px;
    opacity: 0.22;
  }

  .crosshair--tl {
    top: calc(var(--header-height) + var(--space-sm));
    left: var(--space-sm);
  }
}

.tactical-frame {
  position: relative;
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-elevated);
}

.tactical-frame::before,
.tactical-frame::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: var(--color-accent);
  border-style: solid;
  pointer-events: none;
}

.tactical-frame::before {
  top: -1px;
  left: -1px;
  border-width: 2px 0 0 2px;
}

.tactical-frame::after {
  bottom: -1px;
  right: -1px;
  border-width: 0 2px 2px 0;
}

.tactical-coords {
  position: absolute;
  bottom: var(--space-sm);
  right: var(--space-sm);
  font-size: 0.625rem;
  font-family: monospace;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.crosshair {
  position: absolute;
  z-index: 0;
  width: 48px;
  height: 48px;
  color: var(--color-accent);
  opacity: 0.35;
  pointer-events: none;
}

.crosshair--tl {
  top: calc(var(--header-height) + var(--space-md));
  left: var(--space-lg);
}
.crosshair--br { bottom: var(--space-lg); right: var(--space-lg); }

.section-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  opacity: 0.4;
  margin-block: var(--space-2xl);
}

/* Спільні оболонки для лендінгів / внутрішніх сторінок */
.home-section {
  position: relative;
  padding-block: var(--space-2xl);
}

.home-section--alt {
  background-color: var(--color-bg-secondary);
  border-block: 1px solid var(--color-border);
}

.home-section--topo {
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20h40M20 0v40' stroke='%23323A2E' stroke-width='0.35' fill='none' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 40px 40px;
}

.patch-stripe {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-text-muted);
}

.patch-stripe__label {
  flex-shrink: 0;
  padding-inline: var(--space-sm);
  background-color: var(--color-bg-primary);
}

.home-section--alt .patch-stripe__label {
  background-color: var(--color-bg-secondary);
}

.patch-stripe::before,
.patch-stripe::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--color-border);
}