/* ==========================================================================
   iDARIS — Layout: kontenery, siatki, struktura sekcji
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: var(--section-pad-y);
  position: relative;
}

.section--tight {
  padding-block: calc(var(--section-pad-y) * 0.6);
}

.section--dark {
  background: var(--bg-primary);
}

.section--charcoal {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
}

.section-head {
  max-width: 720px;
  margin-bottom: var(--sp-6);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

/* --- Blueprint grid: subtelne tło techniczne, tylko tam gdzie pasuje --- */
.blueprint-bg {
  position: relative;
}

.blueprint-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border-hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-hairline) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.35;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
}

/* --- Grid ogólnego użytku --- */
.grid {
  display: grid;
  gap: var(--sp-5);
}

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

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* --- Split (tekst / obraz) --- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  align-items: center;
}

.split--reverse .split__media {
  order: 2;
}

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
  }
  .split--reverse .split__media {
    order: 0;
  }
}

.split__media {
  position: relative;
}

.split__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* --- Divider z narożnymi znacznikami (motyw blueprintu) --- */
.divider {
  height: 1px;
  background: var(--border-hairline);
  width: 100%;
}

/* --- Ramka techniczna z narożnikami (sygnaturowy element) --- */
.frame-corners {
  position: relative;
}

.frame-corners::before,
.frame-corners::after,
.frame-corners span::before,
.frame-corners span::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--c-red-bright);
  opacity: 0.85;
  transition: width var(--dur-base) var(--ease-premium), height var(--dur-base) var(--ease-premium);
}

.frame-corners::before {
  top: -1px;
  left: -1px;
  border-right: none;
  border-bottom: none;
}

.frame-corners::after {
  top: -1px;
  right: -1px;
  border-left: none;
  border-bottom: none;
}

.frame-corners span::before {
  bottom: -1px;
  left: -1px;
  border-right: none;
  border-top: none;
}

.frame-corners span::after {
  bottom: -1px;
  right: -1px;
  border-left: none;
  border-top: none;
}

.frame-corners:hover::before,
.frame-corners:hover::after,
.frame-corners:hover span::before,
.frame-corners:hover span::after {
  width: 26px;
  height: 26px;
}

/* --- Utility --- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.mt-0 { margin-top: 0; }
.center { text-align: center; }