/* ================================
   POLARHOLE LAB — EXPERIMENTS PAGE
   ================================ */

.phe-hero,
.phe-filters,
.phe-featured {
  padding-block: 60px 56px;
}

/* ---------- SECTION 1: ARCHIVE HERO ---------- */

.phe-hero {
  background-color: var(--phl-bg);
}

.phe-hero-inner {
  border-radius: 30px;
  padding: 22px 18px 20px;
  background: radial-gradient(
      circle at 0 0,
      rgba(79, 214, 255, 0.22),
      transparent 60%
    ),
    radial-gradient(
      circle at 100% 100%,
      rgba(249, 248, 113, 0.18),
      transparent 60%
    ),
    rgba(4, 18, 30, 0.98);
  border: 1px solid rgba(138, 192, 221, 0.4);
  box-shadow: var(--phl-shadow-soft);
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}

.phe-hero-main {
  max-width: 560px;
}

.phe-hero-title {
  margin: 0 0 10px;
  font-family: "PHL-Display", system-ui, sans-serif;
  font-size: 24px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.phe-hero-text {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--phl-text-muted);
}

.phe-hero-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

.phe-hero-list-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 2px;
  margin-bottom: 6px;
}

.phe-hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: radial-gradient(circle, #f9f871, #4fd6ff);
  box-shadow: 0 0 14px rgba(79, 214, 255, 0.9);
  align-self: center;
}

.phe-hero-list-text {
  font-size: 13px;
}

.phe-hero-note {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--phl-text-muted);
}

/* hero gallery */

.phe-hero-gallery {
  display: grid;
  grid-template-rows: minmax(0, 1.7fr) minmax(0, 1fr);
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
  gap: 10px;
}

.phe-hero-photo {
  margin: 0;
  border-radius: 20px;
  padding: 6px;
  background-color: rgba(3, 20, 31, 0.98);
  border: 1px solid rgba(138, 192, 221, 0.4);
  box-shadow: var(--phl-shadow-subtle);
}

.phe-hero-photo--main {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
}

.phe-hero-photo--top {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}

.phe-hero-photo--bottom {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

.phe-hero-caption {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--phl-text-muted);
}

/* ---------- SECTION 2: FILTER PANEL ---------- */

.phe-filters {
  background-color: var(--phl-bg-alt);
}

.phe-filters-inner {
  position: relative;
}

.phe-filters-header {
  max-width: 620px;
  margin-bottom: 20px;
}

.phe-filters-title {
  margin: 0 0 8px;
  font-family: "PHL-Display", system-ui, sans-serif;
  font-size: 22px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.phe-filters-text {
  margin: 0;
  font-size: 14px;
  color: var(--phl-text-muted);
}

.phe-filters-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}

/* left panel */

.phe-filters-panel {
  border-radius: 22px;
  padding: 12px 14px 12px;
  background-color: rgba(4, 18, 30, 0.98);
  border: 1px solid rgba(138, 192, 221, 0.5);
  box-shadow: var(--phl-shadow-subtle);
}

.phe-filter-row {
  margin-bottom: 10px;
}

.phe-filter-row:last-child {
  margin-bottom: 8px;
}

.phe-filter-label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--phl-text-muted);
  margin-bottom: 4px;
}

.phe-filter-scale {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.phe-filter-pill {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(138, 192, 221, 0.4);
  background-color: rgba(6, 33, 50, 0.96);
}

.phe-filter-pill--active {
  background: radial-gradient(circle, #4fd6ff, #f9f871);
  color: #02121c;
  border-color: transparent;
}

.phe-filters-note {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--phl-text-muted);
}

/* right images */

.phe-filters-media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.phe-filters-photo {
  margin: 0;
  border-radius: 18px;
  padding: 6px;
  background-color: rgba(3, 20, 31, 0.98);
  border: 1px solid rgba(138, 192, 221, 0.4);
}

/* ---------- SECTION 3: FEATURED RUNS ---------- */

.phe-featured {
  background-color: var(--phl-bg);
}

.phe-featured-header {
  max-width: 620px;
  margin-bottom: 20px;
}

.phe-featured-title {
  margin: 0 0 8px;
  font-family: "PHL-Display", system-ui, sans-serif;
  font-size: 22px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.phe-featured-text {
  margin: 0;
  font-size: 14px;
  color: var(--phl-text-muted);
}

.phe-featured-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.phe-featured-card {
  border-radius: 22px;
  padding: 12px 12px 10px;
  background-color: rgba(4, 18, 30, 0.98);
  border: 1px solid rgba(138, 192, 221, 0.5);
  box-shadow: var(--phl-shadow-subtle);
}

.phe-featured-card-head {
  margin-bottom: 6px;
}

.phe-featured-tag {
  margin: 0 0 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--phl-text-muted);
}

.phe-featured-card-title {
  margin: 0;
  font-size: 15px;
  color: var(--phl-accent);
}

.phe-featured-card-text {
  margin: 6px 0 8px;
  font-size: 13px;
}

.phe-featured-photo {
  margin: 0;
  border-radius: 16px;
  padding: 6px;
  background-color: rgba(3, 20, 31, 0.98);
  border: 1px solid rgba(138, 192, 221, 0.4);
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 767px) {
  .phe-hero-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .phe-hero-gallery {
    grid-template-rows: auto;
    grid-template-columns: minmax(0, 1fr);
  }

  .phe-hero-photo--main,
  .phe-hero-photo--top,
  .phe-hero-photo--bottom {
    grid-row: auto;
    grid-column: auto;
  }

  .phe-filters-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .phe-filters-media {
    grid-template-columns: minmax(0, 1fr);
  }

  .phe-featured-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .phe-hero-inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }

  .phe-filters-layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }

  .phe-featured-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* ---------- SECTION 4: RIDGE SEQUENCES ---------- */

.phe-sequence {
  padding-block: 58px 56px;
  background-color: var(--phl-bg);
}

.phe-sequence-inner {
  position: relative;
}

.phe-sequence-header {
  max-width: 620px;
  margin-bottom: 20px;
}

.phe-sequence-title {
  margin: 0 0 8px;
  font-family: "PHL-Display", system-ui, sans-serif;
  font-size: 22px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.phe-sequence-text {
  margin: 0;
  font-size: 14px;
  color: var(--phl-text-muted);
}

.phe-sequence-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 22px;
  align-items: flex-start;
}

.phe-sequence-list {
  display: grid;
  gap: 10px;
}

.phe-sequence-item {
  border-radius: 18px;
  padding: 10px 12px;
  background-color: rgba(4, 18, 30, 0.98);
  border: 1px solid rgba(138, 192, 221, 0.5);
  box-shadow: var(--phl-shadow-subtle);
}

.phe-sequence-code {
  margin: 0 0 4px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--phl-text-muted);
}

.phe-sequence-label {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--phl-accent);
}

.phe-sequence-note {
  margin: 0;
  font-size: 13px;
}

.phe-sequence-gallery {
  display: grid;
  gap: 10px;
}

.phe-sequence-photo {
  margin: 0;
  border-radius: 18px;
  padding: 6px;
  background-color: rgba(3, 20, 31, 0.98);
  border: 1px solid rgba(138, 192, 221, 0.4);
}

/* ---------- SECTION 5: ICE NOISE GRID ---------- */

.phe-noisegrid {
  padding-block: 58px 56px;
  background-color: var(--phl-bg-alt);
}

.phe-noisegrid-inner {
  position: relative;
}

.phe-noisegrid-header {
  max-width: 620px;
  margin-bottom: 20px;
}

.phe-noisegrid-title {
  margin: 0 0 8px;
  font-family: "PHL-Display", system-ui, sans-serif;
  font-size: 22px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.phe-noisegrid-text {
  margin: 0;
  font-size: 14px;
  color: var(--phl-text-muted);
}

.phe-noisegrid-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}

/* matrix */

.phe-noisegrid-matrix {
  border-radius: 22px;
  padding: 10px 10px 12px;
  background-color: rgba(4, 18, 30, 0.98);
  border: 1px solid rgba(138, 192, 221, 0.5);
  box-shadow: var(--phl-shadow-subtle);
  font-size: 12px;
}

.phe-noisegrid-head {
  display: grid;
  grid-template-columns: 0.9fr repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 6px;
}

.phe-noisegrid-headcell {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--phl-text-muted);
}

.phe-noisegrid-row {
  display: grid;
  grid-template-columns: 0.9fr repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding-block: 4px;
  border-top: 1px solid rgba(138, 192, 221, 0.25);
}

.phe-noisegrid-row:first-of-type {
  border-top: none;
}

.phe-noisegrid-side {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--phl-accent);
}

.phe-noisegrid-cell {
  font-size: 12px;
}

/* photos */

.phe-noisegrid-photos {
  display: grid;
  gap: 10px;
}

.phe-noisegrid-photo {
  margin: 0;
  border-radius: 18px;
  padding: 6px;
  background-color: rgba(3, 20, 31, 0.98);
  border: 1px solid rgba(138, 192, 221, 0.4);
}

/* ---------- SECTION 6: THREE-RUN SETS ---------- */

.phe-sets {
  padding-block: 58px 56px;
  background-color: var(--phl-bg);
}

.phe-sets-inner {
  position: relative;
}

.phe-sets-header {
  max-width: 620px;
  margin-bottom: 18px;
}

.phe-sets-title {
  margin: 0 0 8px;
  font-family: "PHL-Display", system-ui, sans-serif;
  font-size: 22px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.phe-sets-text {
  margin: 0;
  font-size: 14px;
  color: var(--phl-text-muted);
}

.phe-sets-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.phe-set-card {
  border-radius: 20px;
  padding: 10px 10px 12px;
  background-color: rgba(4, 18, 30, 0.98);
  border: 1px solid rgba(138, 192, 221, 0.5);
  box-shadow: var(--phl-shadow-subtle);
}

.phe-set-label {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--phl-accent);
}

.phe-set-text {
  margin: 0 0 8px;
  font-size: 13px;
}

.phe-set-photo {
  margin: 0;
  border-radius: 16px;
  padding: 6px;
  background-color: rgba(3, 20, 31, 0.98);
  border: 1px solid rgba(138, 192, 221, 0.4);
}

/* ---------- RESPONSIVE EXTENSION FOR 4–6 ---------- */

@media (max-width: 767px) {
  .phe-sequence-layout,
  .phe-noisegrid-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .phe-sets-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .phe-sequence-layout,
  .phe-noisegrid-layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }

  .phe-sets-layout {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* ---------- SECTION 7: PRESSURE CURVES ---------- */

.phe-curves {
  padding-block: 58px 56px;
  background-color: var(--phl-bg-alt);
}

.phe-curves-inner {
  position: relative;
}

.phe-curves-header {
  max-width: 620px;
  margin-bottom: 18px;
}

.phe-curves-title {
  margin: 0 0 8px;
  font-family: "PHL-Display", system-ui, sans-serif;
  font-size: 22px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.phe-curves-text {
  margin: 0;
  font-size: 14px;
  color: var(--phl-text-muted);
}

.phe-curves-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}

.phe-curves-cards {
  display: grid;
  gap: 10px;
}

.phe-curve-card {
  border-radius: 18px;
  padding: 9px 10px;
  background-color: rgba(4, 18, 30, 0.98);
  border: 1px solid rgba(138, 192, 221, 0.5);
  box-shadow: var(--phl-shadow-subtle);
}

.phe-curve-name {
  margin: 0 0 3px;
  font-size: 14px;
  color: var(--phl-accent);
}

.phe-curve-note {
  margin: 0;
  font-size: 13px;
}

.phe-curves-media {
  display: grid;
  gap: 10px;
}

.phe-curves-photo {
  margin: 0;
  border-radius: 18px;
  padding: 6px;
  background-color: rgba(3, 20, 31, 0.98);
  border: 1px solid rgba(138, 192, 221, 0.4);
}

/* ---------- SECTION 8: NOTEBOOK SPREADS ---------- */

.phe-notes {
  padding-block: 58px 56px;
  background-color: var(--phl-bg);
}

.phe-notes-inner {
  position: relative;
}

.phe-notes-header {
  max-width: 620px;
  margin-bottom: 18px;
}

.phe-notes-title {
  margin: 0 0 8px;
  font-family: "PHL-Display", system-ui, sans-serif;
  font-size: 22px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.phe-notes-text {
  margin: 0;
  font-size: 14px;
  color: var(--phl-text-muted);
}

.phe-notes-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}

.phe-notes-columns {
  display: grid;
  gap: 10px;
}

.phe-notes-column {
  border-radius: 18px;
  padding: 9px 10px;
  background-color: rgba(4, 18, 30, 0.98);
  border: 1px solid rgba(138, 192, 221, 0.5);
}

.phe-notes-label {
  margin: 0 0 3px;
  font-size: 14px;
  color: var(--phl-accent);
}

.phe-notes-copy {
  margin: 0;
  font-size: 13px;
}

.phe-notes-media {
  display: grid;
  gap: 10px;
}

.phe-notes-photo {
  margin: 0;
  border-radius: 18px;
  padding: 6px;
  background-color: rgba(3, 20, 31, 0.98);
  border: 1px solid rgba(138, 192, 221, 0.4);
}

/* ---------- SECTION 9: TAG LEGEND ---------- */

.phe-tags {
  padding-block: 58px 56px;
  background-color: var(--phl-bg-alt);
}

.phe-tags-inner {
  position: relative;
}

.phe-tags-header {
  max-width: 620px;
  margin-bottom: 18px;
}

.phe-tags-title {
  margin: 0 0 8px;
  font-family: "PHL-Display", system-ui, sans-serif;
  font-size: 22px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.phe-tags-text {
  margin: 0;
  font-size: 14px;
  color: var(--phl-text-muted);
}

.phe-tags-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}

/* legend rows */

.phe-tags-legend {
  border-radius: 22px;
  padding: 10px 12px;
  background-color: rgba(4, 18, 30, 0.98);
  border: 1px solid rgba(138, 192, 221, 0.5);
  box-shadow: var(--phl-shadow-subtle);
  font-size: 13px;
}

.phe-tag-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 2px;
  align-items: center;
  margin-bottom: 6px;
}

.phe-tag-row:last-child {
  margin-bottom: 0;
}

.phe-tag-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  box-shadow: 0 0 14px rgba(79, 214, 255, 0.9);
}

.phe-tag-dot--calm {
  background: radial-gradient(circle, #4fd6ff, #6bd5ff);
}

.phe-tag-dot--noisy {
  background: radial-gradient(circle, #f9f871, #f98f71);
}

.phe-tag-dot--spoon {
  background: radial-gradient(circle, #ffb347, #ff5c7a);
}

.phe-tag-dot--jig {
  background: radial-gradient(circle, #9b8cff, #4fd6ff);
}

.phe-tag-label {
  font-size: 13px;
  color: var(--phl-accent);
}

.phe-tag-note {
  font-size: 13px;
}

.phe-tags-media {
  display: grid;
  gap: 10px;
}

.phe-tags-photo {
  margin: 0;
  border-radius: 18px;
  padding: 6px;
  background-color: rgba(3, 20, 31, 0.98);
  border: 1px solid rgba(138, 192, 221, 0.4);
}

/* --- расширяем адаптив --- */

@media (max-width: 767px) {
  .phe-curves-layout,
  .phe-notes-layout,
  .phe-tags-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .phe-curves-layout,
  .phe-notes-layout,
  .phe-tags-layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }
}
/* ---------- SECTION 10: DEPTH SLICE WALL ---------- */

.phe-slices {
  padding-block: 58px 56px;
  background-color: var(--phl-bg);
}

.phe-slices-inner {
  position: relative;
}

.phe-slices-header {
  max-width: 620px;
  margin-bottom: 18px;
}

.phe-slices-title {
  margin: 0 0 8px;
  font-family: "PHL-Display", system-ui, sans-serif;
  font-size: 22px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.phe-slices-text {
  margin: 0;
  font-size: 14px;
  color: var(--phl-text-muted);
}

.phe-slices-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}

.phe-slices-columns {
  display: grid;
  gap: 10px;
}

.phe-slice-card {
  border-radius: 18px;
  padding: 9px 10px;
  background-color: rgba(4, 18, 30, 0.98);
  border: 1px solid rgba(138, 192, 221, 0.5);
  box-shadow: var(--phl-shadow-subtle);
}

.phe-slice-label {
  margin: 0 0 3px;
  font-size: 14px;
  color: var(--phl-accent);
}

.phe-slice-text {
  margin: 0;
  font-size: 13px;
}

.phe-slices-media {
  display: grid;
  gap: 10px;
}

.phe-slices-photo {
  margin: 0;
  border-radius: 18px;
  padding: 6px;
  background-color: rgba(3, 20, 31, 0.98);
  border: 1px solid rgba(138, 192, 221, 0.4);
}

/* ---------- SECTION 11: CALM VS LOUD RIGS ---------- */

.phe-contrast {
  padding-block: 58px 56px;
  background-color: var(--phl-bg-alt);
}

.phe-contrast-inner {
  position: relative;
}

.phe-contrast-header {
  max-width: 620px;
  margin-bottom: 18px;
}

.phe-contrast-title {
  margin: 0 0 8px;
  font-family: "PHL-Display", system-ui, sans-serif;
  font-size: 22px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.phe-contrast-text {
  margin: 0;
  font-size: 14px;
  color: var(--phl-text-muted);
}

.phe-contrast-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.phe-contrast-column {
  border-radius: 20px;
  padding: 10px 11px 12px;
  background-color: rgba(4, 18, 30, 0.98);
  border: 1px solid rgba(138, 192, 221, 0.5);
  box-shadow: var(--phl-shadow-subtle);
}

.phe-contrast-label {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--phl-accent);
}

.phe-contrast-copy {
  margin: 0 0 8px;
  font-size: 13px;
}

.phe-contrast-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}

.phe-contrast-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 2px;
  margin-bottom: 4px;
}

.phe-contrast-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: radial-gradient(circle, #f9f871, #4fd6ff);
  box-shadow: 0 0 12px rgba(79, 214, 255, 0.9);
  align-self: center;
}

.phe-contrast-note {
  font-size: 13px;
}

.phe-contrast-photo {
  margin: 0;
  border-radius: 16px;
  padding: 6px;
  background-color: rgba(3, 20, 31, 0.98);
  border: 1px solid rgba(138, 192, 221, 0.4);
}

/* ---------- SECTION 12: MICRO TRAILS LANE ---------- */

.phe-microtrails {
  padding-block: 58px 56px;
  background-color: var(--phl-bg);
}

.phe-microtrails-inner {
  position: relative;
}

.phe-microtrails-header {
  max-width: 620px;
  margin-bottom: 18px;
}

.phe-microtrails-title {
  margin: 0 0 8px;
  font-family: "PHL-Display", system-ui, sans-serif;
  font-size: 22px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.phe-microtrails-text {
  margin: 0;
  font-size: 14px;
  color: var(--phl-text-muted);
}

.phe-microtrails-layout {
  display: grid;
  gap: 10px;
}

.phe-microtrail-card {
  border-radius: 18px;
  padding: 8px 9px;
  background-color: rgba(4, 18, 30, 0.98);
  border: 1px solid rgba(138, 192, 221, 0.5);
  box-shadow: var(--phl-shadow-subtle);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
}

.phe-microtrail-photo {
  margin: 0;
  border-radius: 14px;
  padding: 4px;
  background-color: rgba(3, 20, 31, 0.98);
  border: 1px solid rgba(138, 192, 221, 0.4);
}

.phe-microtrail-body {
  min-width: 0;
}

.phe-microtrail-label {
  margin: 0 0 3px;
  font-size: 14px;
  color: var(--phl-accent);
}

.phe-microtrail-text {
  margin: 0;
  font-size: 13px;
}

/* ---------- RESPONSIVE EXTENSION FOR 10–12 ---------- */

@media (max-width: 767px) {
  .phe-slices-layout,
  .phe-contrast-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .phe-microtrail-card {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 6px;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .phe-slices-layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }

  .phe-contrast-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* ---------- SECTION 13: SEASON BOARD STRIP ---------- */

.phe-seasonboard {
  padding-block: 58px 56px;
  background-color: var(--phl-bg);
}

.phe-seasonboard-inner {
  position: relative;
}

.phe-seasonboard-header {
  max-width: 620px;
  margin-bottom: 18px;
}

.phe-seasonboard-title {
  margin: 0 0 8px;
  font-family: "PHL-Display", system-ui, sans-serif;
  font-size: 22px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.phe-seasonboard-text {
  margin: 0;
  font-size: 14px;
  color: var(--phl-text-muted);
}

.phe-seasonboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}

.phe-seasonboard-strip {
  display: flex;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 22px;
  background-color: rgba(4, 18, 30, 0.98);
  border: 1px solid rgba(138, 192, 221, 0.5);
  box-shadow: var(--phl-shadow-subtle);
  overflow-x: auto;
  scrollbar-width: thin;
}

.phe-season-chip {
  flex: 0 0 180px;
  border-radius: 18px;
  padding: 8px 10px;
  background-color: rgba(6, 33, 50, 0.96);
  border: 1px solid rgba(138, 192, 221, 0.5);
}

.phe-season-chip-label {
  display: block;
  font-size: 13px;
  color: var(--phl-accent);
  margin-bottom: 3px;
}

.phe-season-chip-note {
  margin: 0;
  font-size: 12px;
}

/* лёгкие оттенки по сезонам */

.phe-season-chip--early {
  border-color: rgba(111, 211, 255, 0.8);
}

.phe-season-chip--mid {
  border-color: rgba(138, 192, 221, 0.8);
}

.phe-season-chip--late {
  border-color: rgba(249, 248, 113, 0.8);
}

.phe-season-chip--night {
  border-color: rgba(155, 140, 255, 0.8);
}

.phe-seasonboard-media {
  display: grid;
  gap: 10px;
}

.phe-seasonboard-photo {
  margin: 0;
  border-radius: 18px;
  padding: 6px;
  background-color: rgba(3, 20, 31, 0.98);
  border: 1px solid rgba(138, 192, 221, 0.4);
}

/* ---------- SECTION 14: PARTNER VS SOLO RUNS ---------- */

.phe-partners {
  padding-block: 58px 56px;
  background-color: var(--phl-bg-alt);
}

.phe-partners-inner {
  position: relative;
}

.phe-partners-header {
  max-width: 620px;
  margin-bottom: 18px;
}

.phe-partners-title {
  margin: 0 0 8px;
  font-family: "PHL-Display", system-ui, sans-serif;
  font-size: 22px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.phe-partners-text {
  margin: 0;
  font-size: 14px;
  color: var(--phl-text-muted);
}

.phe-partners-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

.phe-partners-card {
  border-radius: 20px;
  padding: 10px 11px 12px;
  background-color: rgba(4, 18, 30, 0.98);
  border: 1px solid rgba(138, 192, 221, 0.5);
  box-shadow: var(--phl-shadow-subtle);
  margin-bottom: 10px;
}

.phe-partners-label {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--phl-accent);
}

.phe-partners-copy {
  margin: 0 0 8px;
  font-size: 13px;
}

.phe-partners-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.phe-partners-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 2px;
  margin-bottom: 4px;
}

.phe-partners-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: radial-gradient(circle, #f9f871, #4fd6ff);
  box-shadow: 0 0 12px rgba(79, 214, 255, 0.9);
  align-self: center;
}

.phe-partners-note {
  font-size: 13px;
}

.phe-partners-media {
  display: grid;
  gap: 10px;
}

.phe-partners-photo {
  margin: 0;
  border-radius: 18px;
  padding: 6px;
  background-color: rgba(3, 20, 31, 0.98);
  border: 1px solid rgba(138, 192, 221, 0.4);
}

/* ---------- SECTION 15: WHAT WE LOG, WHAT WE SKIP ---------- */

.phe-checks {
  padding-block: 58px 56px;
  background-color: var(--phl-bg);
}

.phe-checks-inner {
  position: relative;
}

.phe-checks-header {
  max-width: 620px;
  margin-bottom: 18px;
}

.phe-checks-title {
  margin: 0 0 8px;
  font-family: "PHL-Display", system-ui, sans-serif;
  font-size: 22px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.phe-checks-text {
  margin: 0;
  font-size: 14px;
  color: var(--phl-text-muted);
}

.phe-checks-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

.phe-checks-column {
  border-radius: 20px;
  padding: 10px 11px 12px;
  background-color: rgba(4, 18, 30, 0.98);
  border: 1px solid rgba(138, 192, 221, 0.5);
  box-shadow: var(--phl-shadow-subtle);
  margin-bottom: 8px;
}

.phe-checks-label {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--phl-accent);
}

.phe-checks-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.phe-checks-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 6px;
  row-gap: 2px;
  margin-bottom: 4px;
}

.phe-checks-tick {
  font-size: 14px;
  line-height: 1;
  align-self: center;
}

.phe-checks-note {
  font-size: 13px;
}

.phe-checks-media {
  display: grid;
  gap: 10px;
}

.phe-checks-photo {
  margin: 0;
  border-radius: 18px;
  padding: 6px;
  background-color: rgba(3, 20, 31, 0.98);
  border: 1px solid rgba(138, 192, 221, 0.4);
}

/* ---------- RESPONSIVE EXTENSION FOR 13–15 ---------- */

@media (max-width: 767px) {
  .phe-seasonboard-layout,
  .phe-partners-layout,
  .phe-checks-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .phe-seasonboard-strip {
    flex-wrap: nowrap;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .phe-seasonboard-layout,
  .phe-partners-layout,
  .phe-checks-layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }
}
/* ---------- SECTION 16: SESSION STACKS ---------- */

.phe-stacks {
  padding-block: 58px 56px;
  background-color: var(--phl-bg-alt);
}

.phe-stacks-inner {
  position: relative;
}

.phe-stacks-header {
  max-width: 620px;
  margin-bottom: 18px;
}

.phe-stacks-title {
  margin: 0 0 8px;
  font-family: "PHL-Display", system-ui, sans-serif;
  font-size: 22px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.phe-stacks-text {
  margin: 0;
  font-size: 14px;
  color: var(--phl-text-muted);
}

.phe-stacks-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}

.phe-stacks-columns {
  display: grid;
  gap: 10px;
}

.phe-stacks-card {
  border-radius: 18px;
  padding: 9px 10px;
  background-color: rgba(4, 18, 30, 0.98);
  border: 1px solid rgba(138, 192, 221, 0.5);
  box-shadow: var(--phl-shadow-subtle);
}

.phe-stacks-label {
  margin: 0 0 3px;
  font-size: 14px;
  color: var(--phl-accent);
}

.phe-stacks-note {
  margin: 0;
  font-size: 13px;
}

.phe-stacks-photo {
  margin: 0;
  border-radius: 20px;
  padding: 6px;
  background-color: rgba(3, 20, 31, 0.98);
  border: 1px solid rgba(138, 192, 221, 0.4);
}

/* ---------- SECTION 17: START YOUR OWN LANE ---------- */

.phe-outro {
  padding-block: 60px 70px;
  background-color: var(--phl-bg);
}

.phe-outro-inner {
  position: relative;
}

.phe-outro-header {
  max-width: 620px;
  margin-bottom: 18px;
}

.phe-outro-title {
  margin: 0 0 8px;
  font-family: "PHL-Display", system-ui, sans-serif;
  font-size: 22px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.phe-outro-text {
  margin: 0;
  font-size: 14px;
  color: var(--phl-text-muted);
}

.phe-outro-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}

.phe-outro-main {
  border-radius: 22px;
  padding: 12px 14px 14px;
  background-color: rgba(4, 18, 30, 0.98);
  border: 1px solid rgba(138, 192, 221, 0.5);
  box-shadow: var(--phl-shadow-subtle);
}

.phe-outro-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

.phe-outro-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 2px;
  margin-bottom: 6px;
}

.phe-outro-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: radial-gradient(circle, #f9f871, #4fd6ff);
  box-shadow: 0 0 12px rgba(79, 214, 255, 0.9);
  align-self: center;
}

.phe-outro-note {
  font-size: 13px;
}

.phe-outro-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.phe-outro-photo {
  margin: 0;
  border-radius: 20px;
  padding: 6px;
  background-color: rgba(3, 20, 31, 0.98);
  border: 1px solid rgba(138, 192, 221, 0.4);
}

/* ---------- RESPONSIVE FOR 16–17 ---------- */

@media (max-width: 767px) {
  .phe-stacks-layout,
  .phe-outro-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .phe-stacks-layout,
  .phe-outro-layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }
}

/* 1. Все figure и img адаптируются под контейнер */
figure {
  max-width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: inherit;
  margin: 0;
}

/* 2. Все изображения вписываются в родителя */
img.phl-image-constraint,
.phl-section img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain !important; /* не обрезает */
  border-radius: inherit;
}

/* 3. Все карточки не дают изображению выйти за рамки */
.phl-section,
.phl-section * {
  box-sizing: border-box;
  overflow-clip-margin: content-box;
  overflow: hidden;
}

/* 4. Для сложных layout-контейнеров */
.phl-depthband-hole,
.phl-passport-card,
.phl-rigtrail-step,
.phl-timehalo-chip,
.phl-noisescale-photo,
.phl-anomaly-item,
.phl-sessiongrid-photo,
.phl-crosssection-main,
.phl-crosssection-photo,
.phl-loops-photo,
.phl-species-photo,
.phl-decisions-photo,
.phl-firstkit-photo,
.phl-labshelf-photo,
.phl-closing-photo {
  overflow: hidden;
  border-radius: 18px;
}

.phl-depthband-hole img,
.phl-passport-card img,
.phl-rigtrail-step img,
.phl-timehalo-chip img,
.phl-noisescale-photo img,
.phl-anomaly-item img,
.phl-sessiongrid-photo img,
.phl-crosssection-main img,
.phl-crosssection-photo img,
.phl-loops-photo img,
.phl-species-photo img,
.phl-decisions-photo img,
.phl-firstkit-photo img,
.phl-labshelf-photo img,
.phl-closing-photo img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* 5. На всякий случай убираем любые абсолютные позиции у img */
img.phl-image-constraint {
  position: static !important;
  inset: auto !important;
  transform: none !important;
}
/* ===== GLOBAL IMAGE SAFETY INSIDE PAGES ===== */

/* Все картинки внутри main: не шире контейнера и не больше 350px */
main img {
  display: block;
  width: 100%;
  max-width: 350px;
  height: auto;
  object-fit: contain;   /* не режем картинку, просто вписываем внутрь */
}

/* Любые фотокарточки/превью: не даём содержимому вылезти наружу */
main figure,
main [class*="-photo"],
main [class*="-image"],
main [class*="-thumb"] {
  overflow: hidden;
}
/* Глобальное ограничение размера всех фотографий */
img.phl-image-constraint {
  display: block;
  width: 100%;
  max-width: 350px !important; /* ширина не больше 350px */
  height: auto !important;      /* высота сама подстраивается */
  object-fit: contain !important; /* ничего не режем, вписываем внутрь */
  margin-inline: auto;          /* центрируем в блоке */
}

/* На всякий случай, если где-то обёртка задаёт жёсткую высоту */
figure img.phl-image-constraint,
[class*="-photo"] img.phl-image-constraint {
  height: auto !important;
}