/* ================================
   POLARHOLE LAB — GUIDES PAGE
   ================================ */

/* ---------- SECTION 1: GUIDES HERO MAP ---------- */

.phg-hero {
  padding-block: 60px 56px;
  background-color: var(--phl-bg);
}

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

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

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

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

.phg-hero-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

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

.phg-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;
}

.phg-hero-note {
  font-size: 13px;
}

/* hero media grid */

.phg-hero-media {
  display: grid;
  grid-template-rows: minmax(0, 1.6fr) minmax(0, 1fr);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 10px;
}

.phg-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.45);
  box-shadow: var(--phl-shadow-subtle);
}

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

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

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

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

/* ---------- SECTION 2: THREE QUESTIONS ---------- */

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

.phg-questions-inner {
  position: relative;
}

.phg-questions-header {
  max-width: 620px;
  margin-bottom: 20px;
}

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

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

.phg-questions-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.phg-question-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);
}

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

.phg-question-copy {
  margin: 0;
  font-size: 13px;
}

.phg-questions-media {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.phg-questions-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: LAKE OUTLINE & LANES ---------- */

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

.phg-linemap-inner {
  position: relative;
}

.phg-linemap-header {
  max-width: 620px;
  margin-bottom: 20px;
}

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

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

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

.phg-linemap-steps {
  display: grid;
  gap: 10px;
  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);
}

.phg-linemap-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 2px;
}

.phg-linemap-stepnum {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  background: radial-gradient(circle, #4fd6ff, #f9f871);
  color: #02121c;
  box-shadow: 0 0 14px rgba(79, 214, 255, 0.9);
}

.phg-linemap-steptext {
  margin: 0;
  font-size: 13px;
}

.phg-linemap-media {
  display: grid;
  gap: 10px;
}

.phg-linemap-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 ---------- */

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

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

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

  .phg-questions-layout,
  .phg-questions-media {
    grid-template-columns: minmax(0, 1fr);
  }

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

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

  .phg-questions-layout,
  .phg-questions-media {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .phg-linemap-layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }
}
/* ---------- SECTION 4: ICE THICKNESS BANDS ---------- */

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

.phg-thickness-inner {
  position: relative;
}

.phg-thickness-header {
  max-width: 620px;
  margin-bottom: 20px;
}

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

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

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

.phg-thickness-diagram {
  display: grid;
  gap: 10px;
  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);
}

.phg-thickness-band {
  border-radius: 18px;
  padding: 8px 10px;
  background-color: rgba(6, 33, 50, 0.96);
  border: 1px solid rgba(138, 192, 221, 0.55);
}

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

.phg-thickness-note {
  margin: 0;
  font-size: 13px;
}

/* лёгкие оттенки для визуального различия зон */

.phg-thickness-band--thin {
  border-color: rgba(255, 140, 140, 0.9);
}

.phg-thickness-band--caution {
  border-color: rgba(249, 248, 113, 0.9);
}

.phg-thickness-band--comfort {
  border-color: rgba(111, 211, 255, 0.9);
}

.phg-thickness-media {
  display: grid;
  gap: 10px;
}

.phg-thickness-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: CRACKS & SOUNDS LEGEND ---------- */

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

.phg-cracks-inner {
  position: relative;
}

.phg-cracks-header {
  max-width: 620px;
  margin-bottom: 20px;
}

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

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

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

.phg-cracks-scale {
  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;
}

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

.phg-cracks-row:last-child {
  margin-bottom: 0;
}

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

.phg-cracks-dot--quiet {
  background: radial-gradient(circle, #4fd6ff, #6bd5ff);
}

.phg-cracks-dot--talking {
  background: radial-gradient(circle, #f9f871, #f98f71);
}

.phg-cracks-dot--loud {
  background: radial-gradient(circle, #ff8a8a, #ff5c7a);
}

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

.phg-cracks-note {
  font-size: 13px;
}

.phg-cracks-media {
  display: grid;
  gap: 10px;
}

.phg-cracks-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: FIRST WALKING LANE ---------- */

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

.phg-firstlane-inner {
  position: relative;
}

.phg-firstlane-header {
  max-width: 620px;
  margin-bottom: 20px;
}

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

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

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

.phg-firstlane-steps {
  display: grid;
  gap: 10px;
  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);
}

.phg-firstlane-step {
  border-radius: 16px;
  padding: 8px 9px;
  background-color: rgba(6, 33, 50, 0.96);
  border: 1px solid rgba(138, 192, 221, 0.55);
}

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

.phg-firstlane-note {
  margin: 0;
  font-size: 13px;
}

.phg-firstlane-media {
  display: grid;
  gap: 10px;
}

.phg-firstlane-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 4–6 ---------- */

@media (max-width: 767px) {
  .phg-thickness-layout,
  .phg-cracks-layout,
  .phg-firstlane-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .phg-thickness-layout,
  .phg-cracks-layout,
  .phg-firstlane-layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  }
}
/* ---------- SECTION 7: SKY & LIGHT CHECKLIST ---------- */

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

.phg-light-inner {
  position: relative;
}

.phg-light-header {
  max-width: 620px;
  margin-bottom: 20px;
}

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

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

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

.phg-light-cards {
  display: grid;
  gap: 10px;
  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);
}

.phg-light-card {
  border-radius: 18px;
  padding: 8px 9px;
  background-color: rgba(6, 33, 50, 0.96);
  border: 1px solid rgba(138, 192, 221, 0.55);
}

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

.phg-light-note {
  margin: 0;
  font-size: 13px;
}

.phg-light-media {
  display: grid;
  gap: 10px;
}

.phg-light-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: WIND & SNOW DRIFT LANES ---------- */

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

.phg-wind-inner {
  position: relative;
}

.phg-wind-header {
  max-width: 620px;
  margin-bottom: 20px;
}

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

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

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

.phg-wind-grid {
  display: grid;
  gap: 10px;
  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);
}

.phg-wind-card {
  border-radius: 16px;
  padding: 8px 9px;
  background-color: rgba(6, 33, 50, 0.96);
  border: 1px solid rgba(138, 192, 221, 0.55);
}

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

.phg-wind-note {
  margin: 0;
  font-size: 13px;
}

.phg-wind-media {
  display: grid;
  gap: 10px;
}

.phg-wind-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: MINIMAL SAFETY KIT ---------- */

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

.phg-kit-inner {
  position: relative;
}

.phg-kit-header {
  max-width: 620px;
  margin-bottom: 20px;
}

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

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

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

.phg-kit-list {
  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);
}

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

.phg-kit-row:last-child {
  margin-bottom: 0;
}

.phg-kit-bullet {
  font-size: 14px;
  line-height: 1;
  align-self: center;
}

.phg-kit-note {
  font-size: 13px;
}

.phg-kit-media {
  display: grid;
  gap: 10px;
}

.phg-kit-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 7–9 ---------- */

@media (max-width: 767px) {
  .phg-light-layout,
  .phg-wind-layout,
  .phg-kit-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .phg-light-layout,
  .phg-wind-layout,
  .phg-kit-layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  }
}
/* ---------- SECTION 10: DEPTH BANDS CHEAT CARD ---------- */

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

.phg-depth-inner {
  position: relative;
}

.phg-depth-header {
  max-width: 620px;
  margin-bottom: 20px;
}

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

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

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

.phg-depth-card {
  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);
}

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

.phg-depth-row:last-child {
  margin-bottom: 0;
}

.phg-depth-tag {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  align-self: start;
}

.phg-depth-tag--shallow {
  background: linear-gradient(90deg, #7ee8ff, #b3fff0);
  color: #02121c;
}

.phg-depth-tag--middle {
  background: linear-gradient(90deg, #f9f871, #ffcf71);
  color: #02121c;
}

.phg-depth-tag--deep {
  background: linear-gradient(90deg, #c9b2ff, #7bb4ff);
  color: #02121c;
}

.phg-depth-note {
  font-size: 13px;
  margin: 0;
}

.phg-depth-media {
  display: grid;
  gap: 10px;
}

.phg-depth-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: BITE WINDOWS TIMELINE ---------- */

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

.phg-windows-inner {
  position: relative;
}

.phg-windows-header {
  max-width: 620px;
  margin-bottom: 20px;
}

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

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

.phg-windows-strip {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
  padding: 8px 10px;
  border-radius: 22px;
  background: radial-gradient(
      circle at 0 100%,
      rgba(79, 214, 255, 0.18),
      transparent 60%
    ),
    radial-gradient(
      circle at 100% 0,
      rgba(249, 248, 113, 0.18),
      transparent 60%
    ),
    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;
}

.phg-windows-pill {
  flex: 0 0 190px;
  border-radius: 18px;
  padding: 8px 10px;
  background-color: rgba(6, 33, 50, 0.96);
  border: 1px solid rgba(138, 192, 221, 0.5);
}

.phg-windows-pill--dawn {
  border-color: rgba(111, 211, 255, 0.9);
}

.phg-windows-pill--noon {
  border-color: rgba(249, 248, 113, 0.9);
}

.phg-windows-pill--dusk {
  border-color: rgba(255, 154, 187, 0.9);
}

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

.phg-windows-note {
  margin: 0;
  font-size: 13px;
}

.phg-windows-media {
  display: grid;
  gap: 10px;
}

.phg-windows-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 12: NOTE PAGES THAT STAY USEFUL ---------- */

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

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

.phg-notes-header {
  max-width: 620px;
  margin-bottom: 20px;
}

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

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

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

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

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

.phg-notes-column--must {
  border-color: rgba(111, 211, 255, 0.9);
}

.phg-notes-column--optional {
  border-color: rgba(249, 248, 113, 0.9);
}

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

.phg-notes-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

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

.phg-notes-item:last-child {
  margin-bottom: 0;
}

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

.phg-notes-dot--soft {
  background: radial-gradient(circle, #f9f871, #ffcf71);
}

.phg-notes-note {
  font-size: 13px;
}

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

.phg-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);
}

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

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

  .phg-windows-strip {
    justify-content: flex-start;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .phg-depth-layout,
  .phg-notes-layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  }
}
/* ---------- SECTION 13: WHEN THE PATTERN BREAKS ---------- */

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

.phg-breaks-inner {
  position: relative;
}

.phg-breaks-header {
  max-width: 620px;
  margin-bottom: 20px;
}

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

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

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

.phg-breaks-panel {
  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);
}

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

.phg-breaks-row:last-child {
  margin-bottom: 0;
}

.phg-breaks-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  align-self: center;
  box-shadow: 0 0 14px rgba(79, 214, 255, 0.9);
}

.phg-breaks-dot--ice {
  background: radial-gradient(circle, #4fd6ff, #6bd5ff);
}

.phg-breaks-dot--crowd {
  background: radial-gradient(circle, #f9f871, #ffcf71);
}

.phg-breaks-dot--gut {
  background: radial-gradient(circle, #ff8a8a, #ff5c7a);
}

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

.phg-breaks-note {
  margin: 0;
  font-size: 13px;
}

.phg-breaks-media {
  display: grid;
  gap: 10px;
}

.phg-breaks-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: MARKING A SAFE PATH BACK ---------- */

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

.phg-markers-inner {
  position: relative;
}

.phg-markers-header {
  max-width: 620px;
  margin-bottom: 20px;
}

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

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

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

.phg-markers-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;
}

.phg-markers-pill {
  flex: 0 0 200px;
  border-radius: 18px;
  padding: 8px 10px;
  background-color: rgba(6, 33, 50, 0.96);
  border: 1px solid rgba(138, 192, 221, 0.55);
}

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

.phg-markers-note {
  margin: 0;
  font-size: 13px;
}

.phg-markers-media {
  display: grid;
  gap: 10px;
}

.phg-markers-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: PACKING DOWN WITH A QUICK REVIEW ---------- */

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

.phg-packdown-inner {
  position: relative;
}

.phg-packdown-header {
  max-width: 620px;
  margin-bottom: 20px;
}

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

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

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

.phg-packdown-card {
  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);
}

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

.phg-packdown-step:last-child {
  margin-bottom: 0;
}

.phg-packdown-stepnum {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  background: radial-gradient(circle, #4fd6ff, #f9f871);
  color: #02121c;
  box-shadow: 0 0 14px rgba(79, 214, 255, 0.9);
}

.phg-packdown-steptext {
  margin: 0;
  font-size: 13px;
}

.phg-packdown-media {
  display: grid;
  gap: 10px;
}

.phg-packdown-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) {
  .phg-breaks-layout,
  .phg-markers-layout,
  .phg-packdown-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .phg-breaks-layout,
  .phg-markers-layout,
  .phg-packdown-layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  }
}
/* ---------- SECTION 16: SEASON BOARD OVERVIEW ---------- */

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

.phg-season-inner {
  position: relative;
}

.phg-season-header {
  max-width: 620px;
  margin-bottom: 20px;
}

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

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

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

.phg-season-columns {
  display: grid;
  gap: 10px;
  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);
}

.phg-season-col {
  border-radius: 18px;
  padding: 8px 9px;
  background-color: rgba(6, 33, 50, 0.96);
  border: 1px solid rgba(138, 192, 221, 0.55);
}

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

.phg-season-note {
  margin: 0;
  font-size: 13px;
}

.phg-season-media {
  display: grid;
  gap: 10px;
}

.phg-season-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 17: THINGS WE NO LONGER TRUST ---------- */

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

.phg-myths-inner {
  position: relative;
}

.phg-myths-header {
  max-width: 620px;
  margin-bottom: 20px;
}

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

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

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

.phg-myths-table {
  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);
}

.phg-myths-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.phg-myths-row:last-child {
  margin-bottom: 0;
}

.phg-myths-cell {
  border-radius: 16px;
  padding: 7px 8px;
  background-color: rgba(6, 33, 50, 0.96);
  border: 1px solid rgba(138, 192, 221, 0.55);
}

.phg-myths-tag {
  display: inline-block;
  margin-bottom: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.phg-myths-tag--myth {
  background: linear-gradient(90deg, #ff8a8a, #ff5c7a);
  color: #02121c;
}

.phg-myths-tag--note {
  background: linear-gradient(90deg, #7ee8ff, #b3fff0);
  color: #02121c;
}

.phg-myths-copy {
  margin: 0;
  font-size: 13px;
}

.phg-myths-media {
  display: grid;
  gap: 10px;
}

.phg-myths-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 18: POCKET CARD & QUIET PROMISE ---------- */

.phg-pocket {
  padding-block: 58px 70px;
  background-color: var(--phl-bg);
}

.phg-pocket-inner {
  position: relative;
}

.phg-pocket-header {
  max-width: 620px;
  margin-bottom: 20px;
}

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

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

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

.phg-pocket-card {
  border-radius: 22px;
  padding: 12px 14px;
  background: radial-gradient(
      circle at 0 0,
      rgba(79, 214, 255, 0.2),
      transparent 60%
    ),
    radial-gradient(
      circle at 100% 100%,
      rgba(249, 248, 113, 0.2),
      transparent 60%
    ),
    rgba(4, 18, 30, 0.98);
  border: 1px solid rgba(138, 192, 221, 0.6);
  box-shadow: var(--phl-shadow-soft);
}

.phg-pocket-line {
  margin: 0 0 6px;
  font-size: 14px;
}

.phg-pocket-line:last-child {
  margin-bottom: 0;
}

.phg-pocket-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 EXTENSION FOR 16–18 ---------- */

@media (max-width: 767px) {
  .phg-season-layout,
  .phg-myths-layout,
  .phg-pocket-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .phg-season-layout,
  .phg-myths-layout,
  .phg-pocket-layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  }
}
/* 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;
}