/* IceGrid Guides page — page-specific layouts
   Prefix: igg-
*/

/* ===============================
   SECTION 1: GUIDES HERO
   =============================== */

.igg-hero {
  padding-top: 4.4rem;
  padding-bottom: 4rem;
}

.igg-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr);
  gap: 3.2rem;
  align-items: center;
}

.igg-hero-text {
  position: relative;
  padding: 1.7rem 1.5rem 1.9rem;
  border-radius: 28px;
  background:
    radial-gradient(circle at 0 0, rgba(71, 211, 255, 0.14), transparent 55%),
    radial-gradient(circle at 100% 0, rgba(255, 179, 77, 0.14), transparent 50%),
    linear-gradient(145deg, #081529, #050c19);
  border: 1px solid rgba(70, 114, 170, 0.95);
  box-shadow: var(--ig-shadow-soft);
  overflow: hidden;
}

.igg-hero-text::before {
  content: "";
  position: absolute;
  inset: -40%;
  background-image:
    linear-gradient(90deg, rgba(22, 52, 94, 0.8) 1px, transparent 1px),
    linear-gradient(0deg, rgba(22, 52, 94, 0.8) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: 0.35;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 14px rgba(71, 211, 255, 0.6));
  pointer-events: none;
}

.igg-kicker {
  position: relative;
  margin: 0 0 0.7rem;
  font-size: 0.86rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ig-text-muted);
}

.igg-kicker::before {
  content: "";
  position: absolute;
  left: -0.8rem;
  top: 0.55rem;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 0, #ffffff, var(--ig-accent-cyan));
  box-shadow:
    0 0 18px rgba(71, 211, 255, 0.8),
    0 0 0 3px rgba(71, 211, 255, 0.3);
}

.igg-hero-title {
  margin: 0 0 0.7rem;
  font-family: "IGDisplay", system-ui, sans-serif;
  font-size: 1.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ig-text-main);
}

.igg-hero-lead {
  margin: 0 0 1rem;
  font-size: 0.96rem;
  line-height: 1.8;
  color: var(--ig-text-soft);
}

.igg-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
}

.igg-hero-pill {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px dashed rgba(99, 142, 198, 0.95);
  font-size: 0.8rem;
  color: var(--ig-text-soft);
  background: radial-gradient(circle at 0 0, #101b2e, #050913);
}

.igg-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

/* hero images */

.igg-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 0.9rem;
  justify-items: flex-end;
  overflow: hidden;
}

.igg-hero-grid::before {
  content: "";
  position: absolute;
  inset: -16%;
  border-radius: 30px;
  background-image:
    linear-gradient(90deg, rgba(29, 64, 107, 0.9) 1px, transparent 1px),
    linear-gradient(0deg, rgba(29, 64, 107, 0.9) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.2;
  filter: drop-shadow(0 0 16px rgba(71, 211, 255, 0.45));
  mix-blend-mode: screen;
  pointer-events: none;
}

.igg-hero-card {
  position: relative;
  padding: 0.7rem;
  border-radius: 22px;
  background: radial-gradient(circle at 0 0, #18253a, #050913);
  border: 1px solid rgba(74, 117, 179, 0.95);
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.95),
    0 0 20px rgba(71, 211, 255, 0.55);
  transition:
    transform 0.45s cubic-bezier(0.19, 1, 0.22, 1),
    box-shadow 0.4s ease-out,
    border-color 0.35s ease-out;
}

.igg-hero-card--map {
  grid-row: 1 / 3;
  max-width: 260px;
  justify-self: flex-start;
}

.igg-hero-card--notes,
.igg-hero-card--sonar {
  max-width: 200px;
}

.igg-hero-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 1),
    0 0 30px rgba(71, 211, 255, 0.9);
  border-color: rgba(71, 211, 255, 0.95);
}

.igg-hero-image {
  border-radius: 18px;
}

.igg-hero-caption {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: var(--ig-text-muted);
}

/* ===============================
   SECTION 2: ICE NUMBERS PRIMER
   =============================== */

.igg-ice-inner {
  position: relative;
}

.igg-ice-layout {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr);
  gap: 1.7rem;
  align-items: center;
  padding: 1.1rem 1.1rem 1.2rem;
  border-radius: 26px;
  background:
    radial-gradient(circle at 0 0, #151f32, #050913),
    linear-gradient(145deg, rgba(71, 211, 255, 0.18), transparent 60%);
  border: 1px solid rgba(74, 117, 179, 0.95);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.98);
  overflow: hidden;
}

.igg-ice-table {
  display: grid;
  gap: 0.7rem;
}

.igg-ice-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr);
  gap: 0.7rem;
  padding: 0.55rem 0.7rem 0.65rem;
  border-radius: 16px;
  background: radial-gradient(circle at 0 0, #121f33, #040711);
  border: 1px solid rgba(62, 99, 152, 0.95);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.95);
}

.igg-ice-cell {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.igg-ice-cell--band {
  border-right: 1px solid rgba(62, 99, 152, 0.85);
  padding-right: 0.6rem;
}

.igg-ice-label {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ig-text-muted);
}

.igg-ice-value {
  font-size: 0.92rem;
  color: var(--ig-text-main);
}

.igg-ice-text {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ig-text-soft);
}

/* lane tints */

.igg-ice-row--lane-a {
  border-color: rgba(71, 211, 255, 0.95);
}

.igg-ice-row--lane-b {
  border-color: rgba(123, 255, 139, 0.95);
}

.igg-ice-row--lane-c {
  border-color: rgba(255, 179, 77, 0.95);
}

/* images */

.igg-ice-media {
  display: grid;
  gap: 0.7rem;
  justify-items: flex-end;
}

.igg-ice-figure {
  margin: 0;
  max-width: 230px;
}

.igg-ice-figure--small {
  max-width: 180px;
  transform: translateX(-12px);
}

.igg-ice-image {
  border-radius: 16px;
}

/* ===============================
   SECTION 3: PRE-ICE TIMELINE
   =============================== */

.igg-timeline-inner {
  position: relative;
}

.igg-timeline-layout {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr);
  gap: 1.7rem;
  align-items: center;
  padding: 1.1rem 1.1rem 1.2rem;
  border-radius: 26px;
  background:
    radial-gradient(circle at 0 0, #151f32, #050913),
    linear-gradient(145deg, rgba(255, 179, 77, 0.22), transparent 60%);
  border: 1px solid rgba(74, 117, 179, 0.95);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.98);
  overflow: hidden;
}

.igg-timeline-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
}

.igg-timeline-step {
  padding: 0.55rem 0.7rem 0.7rem;
  border-radius: 18px;
  background: radial-gradient(circle at 0 0, #121f33, #040711);
  border: 1px solid rgba(62, 99, 152, 0.95);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.95);
}

.igg-timeline-label {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ig-text-muted);
}

.igg-timeline-title {
  margin: 0 0 0.2rem;
  font-size: 0.96rem;
  color: var(--ig-text-main);
}

.igg-timeline-text {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ig-text-soft);
}

/* media */

.igg-timeline-media {
  display: grid;
  gap: 0.7rem;
  justify-items: flex-end;
}

.igg-timeline-figure {
  margin: 0;
  max-width: 220px;
}

.igg-timeline-figure--small {
  max-width: 180px;
  transform: translateX(-12px);
}

.igg-timeline-image {
  border-radius: 16px;
}

/* ===============================
   RESPONSIVE (guides page 1–3)
   =============================== */

@media (max-width: 1024px) {
  .igg-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.4rem;
  }

  .igg-hero-grid {
    max-width: 430px;
  }

  .igg-ice-layout,
  .igg-timeline-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .igg-ice-media,
  .igg-timeline-media {
    justify-items: flex-start;
  }

  .igg-ice-figure--small,
  .igg-timeline-figure--small {
    transform: none;
  }
}

@media (max-width: 768px) {
  .igg-hero {
    padding-top: 3.6rem;
  }

  .igg-hero-text {
    padding: 1.5rem 1.3rem 1.7rem;
  }

  .igg-hero-title {
    font-size: 1.6rem;
  }

  .igg-ice-layout,
  .igg-timeline-layout {
    padding: 0.95rem 0.9rem 1.05rem;
    gap: 1.3rem;
  }

  .igg-ice-figure {
    max-width: 210px;
  }

  .igg-ice-figure--small {
    max-width: 170px;
  }

  .igg-timeline-figure {
    max-width: 210px;
  }

  .igg-timeline-figure--small {
    max-width: 170px;
  }

  .igg-timeline-band {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .igg-hero {
    padding-top: 3.2rem;
  }

  .igg-hero-title {
    font-size: 1.4rem;
  }

  .igg-hero-card--map {
    max-width: 220px;
  }

  .igg-hero-card--notes,
  .igg-hero-card--sonar {
    max-width: 180px;
  }

  .igg-ice-figure,
  .igg-timeline-figure {
    max-width: 200px;
  }

  .igg-ice-figure--small,
  .igg-timeline-figure--small {
    max-width: 170px;
  }
}
/* ===============================
   SECTION 4: LANE SAFETY CARDS
   =============================== */

.igg-lanes-inner {
  position: relative;
}

.igg-lanes-layout {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr);
  gap: 1.7rem;
  align-items: center;
  padding: 1.1rem 1.1rem 1.2rem;
  border-radius: 26px;
  background:
    radial-gradient(circle at 0 0, #151f32, #050913),
    linear-gradient(145deg, rgba(71, 211, 255, 0.18), transparent 60%);
  border: 1px solid rgba(74, 117, 179, 0.95);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.98);
  overflow: hidden;
}

.igg-lanes-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.8rem;
}

.igg-lane-card {
  padding: 0.6rem 0.7rem 0.7rem;
  border-radius: 18px;
  background: radial-gradient(circle at 0 0, #121f33, #040711);
  border: 1px solid rgba(62, 99, 152, 0.95);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.95);
}

.igg-lane-title {
  margin: 0 0 0.2rem;
  font-size: 0.96rem;
  color: var(--ig-text-main);
}

.igg-lane-text {
  margin: 0 0 0.25rem;
  font-size: 0.88rem;
  color: var(--ig-text-soft);
}

.igg-lane-small {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ig-text-muted);
}

/* lane colour hints */

.igg-lane-card--a {
  border-color: rgba(71, 211, 255, 0.95);
}

.igg-lane-card--b {
  border-color: rgba(123, 255, 139, 0.95);
}

.igg-lane-card--c {
  border-color: rgba(255, 179, 77, 0.95);
}

/* images */

.igg-lanes-media {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  grid-template-rows: auto auto;
  gap: 0.7rem;
  justify-items: flex-end;
}

.igg-lanes-figure {
  margin: 0;
  max-width: 210px;
}

.igg-lanes-figure--stack,
.igg-lanes-figure--wall {
  max-width: 180px;
}

.igg-lanes-image {
  border-radius: 16px;
}

/* ===============================
   SECTION 5: NIGHT SIGNALS & VISIBILITY
   =============================== */

.igg-signals-inner {
  position: relative;
}

.igg-signals-layout {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr);
  gap: 1.7rem;
  align-items: center;
  padding: 1.1rem 1.1rem 1.2rem;
  border-radius: 26px;
  background:
    radial-gradient(circle at 0 0, #151f32, #050913),
    linear-gradient(145deg, rgba(255, 179, 77, 0.22), transparent 60%);
  border: 1px solid rgba(74, 117, 179, 0.95);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.98);
  overflow: hidden;
}

.igg-signals-list {
  display: grid;
  gap: 0.8rem;
}

.igg-signals-item {
  padding: 0.55rem 0.7rem 0.7rem;
  border-radius: 18px;
  background: radial-gradient(circle at 0 0, #121f33, #040711);
  border: 1px solid rgba(62, 99, 152, 0.95);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.95);
}

.igg-signals-title {
  margin: 0 0 0.2rem;
  font-size: 0.96rem;
  color: var(--ig-text-main);
}

.igg-signals-text {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ig-text-soft);
}

/* images */

.igg-signals-media {
  display: grid;
  gap: 0.7rem;
  justify-items: flex-end;
}

.igg-signals-figure {
  margin: 0;
  max-width: 220px;
}

.igg-signals-figure--small {
  max-width: 180px;
  transform: translateX(-12px);
}

.igg-signals-image {
  border-radius: 16px;
}

/* ===============================
   SECTION 6: WEATHER WINDOWS & CANCEL
   =============================== */

.igg-weather-inner {
  position: relative;
}

.igg-weather-layout {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr);
  gap: 1.7rem;
  align-items: center;
  padding: 1.1rem 1.1rem 1.2rem;
  border-radius: 26px;
  background:
    radial-gradient(circle at 0 0, #151f32, #050913),
    linear-gradient(145deg, rgba(71, 211, 255, 0.18), transparent 60%);
  border: 1px solid rgba(74, 117, 179, 0.95);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.98);
  overflow: hidden;
}

.igg-weather-table {
  display: grid;
  gap: 0.7rem;
}

.igg-weather-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr);
  gap: 0.7rem;
  padding: 0.55rem 0.7rem 0.65rem;
  border-radius: 16px;
  background: radial-gradient(circle at 0 0, #121f33, #040711);
  border: 1px solid rgba(62, 99, 152, 0.95);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.95);
}

.igg-weather-cell {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.igg-weather-cell--label {
  border-right: 1px solid rgba(62, 99, 152, 0.85);
  padding-right: 0.6rem;
}

.igg-weather-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  border: 1px dashed rgba(99, 142, 198, 0.95);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ig-text-muted);
}

.igg-weather-text {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ig-text-soft);
}

/* row tints */

.igg-weather-row--short {
  border-color: rgba(255, 179, 77, 0.95);
}

.igg-weather-row--cancel {
  border-color: rgba(255, 86, 86, 0.95);
}

/* images */

.igg-weather-media {
  display: grid;
  gap: 0.7rem;
  justify-items: flex-end;
}

.igg-weather-figure {
  margin: 0;
  max-width: 220px;
}

.igg-weather-figure--small {
  max-width: 180px;
  transform: translateX(-12px);
}

.igg-weather-image {
  border-radius: 16px;
}

/* ===============================
   RESPONSIVE (sections 4–6)
   =============================== */

@media (max-width: 1024px) {
  .igg-lanes-layout,
  .igg-signals-layout,
  .igg-weather-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .igg-lanes-media,
  .igg-signals-media,
  .igg-weather-media {
    justify-items: flex-start;
  }

  .igg-lanes-figure--stack,
  .igg-lanes-figure--wall,
  .igg-signals-figure--small,
  .igg-weather-figure--small {
    transform: none;
  }
}

@media (max-width: 768px) {
  .igg-lanes-layout,
  .igg-signals-layout,
  .igg-weather-layout {
    padding: 0.95rem 0.9rem 1.05rem;
    gap: 1.3rem;
  }

  .igg-lanes-figure {
    max-width: 210px;
  }

  .igg-lanes-figure--stack,
  .igg-lanes-figure--wall {
    max-width: 170px;
  }

  .igg-signals-figure {
    max-width: 210px;
  }

  .igg-signals-figure--small {
    max-width: 170px;
  }

  .igg-weather-figure {
    max-width: 210px;
  }

  .igg-weather-figure--small {
    max-width: 170px;
  }

  .igg-weather-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .igg-weather-cell--label {
    border-right: none;
    padding-right: 0;
  }
}

@media (max-width: 480px) {
  .igg-lanes-figure,
  .igg-signals-figure,
  .igg-weather-figure {
    max-width: 200px;
  }
}
/* ===============================
   SECTION 7: ON-ICE LANE GRID
   =============================== */

.igg-gridpath-inner {
  position: relative;
}

.igg-gridpath-layout {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr);
  gap: 1.7rem;
  align-items: center;
  padding: 1.1rem 1.1rem 1.2rem;
  border-radius: 26px;
  background:
    radial-gradient(circle at 0 0, #151f32, #050913),
    linear-gradient(145deg, rgba(71, 211, 255, 0.18), transparent 60%);
  border: 1px solid rgba(74, 117, 179, 0.95);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.98);
  overflow: hidden;
}

.igg-gridpath-steps {
  display: grid;
  gap: 0.7rem;
}

.igg-gridpath-step {
  padding: 0.55rem 0.7rem 0.7rem;
  border-radius: 18px;
  background: radial-gradient(circle at 0 0, #121f33, #040711);
  border: 1px solid rgba(62, 99, 152, 0.95);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.95);
}

.igg-gridpath-title {
  margin: 0 0 0.2rem;
  font-size: 0.96rem;
  color: var(--ig-text-main);
}

.igg-gridpath-text {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ig-text-soft);
}

/* images */

.igg-gridpath-media {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  grid-template-rows: auto auto;
  gap: 0.7rem;
  justify-items: flex-end;
}

.igg-gridpath-figure {
  margin: 0;
  max-width: 190px;
}

.igg-gridpath-figure--map {
  grid-row: 1 / 3;
  max-width: 230px;
  justify-self: flex-start;
}

.igg-gridpath-image {
  border-radius: 16px;
}

/* ===============================
   SECTION 8: HOLE SPACING BAND
   =============================== */

.igg-spacing-inner {
  position: relative;
}

.igg-spacing-layout {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr);
  gap: 1.7rem;
  align-items: center;
  padding: 1.1rem 1.1rem 1.2rem;
  border-radius: 26px;
  background:
    radial-gradient(circle at 0 0, #151f32, #050913),
    linear-gradient(145deg, rgba(255, 179, 77, 0.22), transparent 60%);
  border: 1px solid rgba(74, 117, 179, 0.95);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.98);
  overflow: hidden;
}

.igg-spacing-bands {
  display: grid;
  gap: 0.7rem;
}

.igg-spacing-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.5rem 0.7rem 0.65rem;
  border-radius: 16px;
  background: radial-gradient(circle at 0 0, #121f33, #040711);
  border: 1px solid rgba(62, 99, 152, 0.95);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.95);
}

.igg-spacing-tag {
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  border: 1px dashed rgba(99, 142, 198, 0.95);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ig-text-muted);
  white-space: nowrap;
}

.igg-spacing-text {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ig-text-soft);
}

/* subtle band colours */

.igg-spacing-row--mid {
  border-color: rgba(71, 211, 255, 0.95);
}

.igg-spacing-row--wide {
  border-color: rgba(255, 179, 77, 0.95);
}

/* images */

.igg-spacing-media {
  display: grid;
  gap: 0.7rem;
  justify-items: flex-end;
}

.igg-spacing-figure {
  margin: 0;
  max-width: 220px;
}

.igg-spacing-figure--small {
  max-width: 180px;
  transform: translateX(-12px);
}

.igg-spacing-image {
  border-radius: 16px;
}

/* ===============================
   SECTION 9: SONAR & HOLES OVERLAY
   =============================== */

.igg-sonar-inner {
  position: relative;
}

.igg-sonar-layout {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr);
  gap: 1.7rem;
  align-items: center;
  padding: 1.1rem 1.1rem 1.2rem;
  border-radius: 26px;
  background:
    radial-gradient(circle at 0 0, #151f32, #050913),
    linear-gradient(145deg, rgba(71, 211, 255, 0.18), transparent 60%);
  border: 1px solid rgba(74, 117, 179, 0.95);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.98);
  overflow: hidden;
}

.igg-sonar-panel {
  display: grid;
  gap: 0.7rem;
}

.igg-sonar-block {
  padding: 0.55rem 0.7rem 0.7rem;
  border-radius: 18px;
  background: radial-gradient(circle at 0 0, #121f33, #040711);
  border: 1px solid rgba(62, 99, 152, 0.95);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.95);
}

.igg-sonar-title {
  margin: 0 0 0.2rem;
  font-size: 0.96rem;
  color: var(--ig-text-main);
}

.igg-sonar-text {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ig-text-soft);
}

/* images */

.igg-sonar-media {
  display: grid;
  gap: 0.7rem;
  justify-items: flex-end;
}

.igg-sonar-figure {
  margin: 0;
  max-width: 220px;
}

.igg-sonar-figure--small {
  max-width: 180px;
  transform: translateX(-12px);
}

.igg-sonar-image {
  border-radius: 16px;
}

/* ===============================
   RESPONSIVE (sections 7–9)
   =============================== */

@media (max-width: 1024px) {
  .igg-gridpath-layout,
  .igg-spacing-layout,
  .igg-sonar-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .igg-gridpath-media,
  .igg-spacing-media,
  .igg-sonar-media {
    justify-items: flex-start;
  }

  .igg-gridpath-figure--map,
  .igg-spacing-figure--small,
  .igg-sonar-figure--small {
    transform: none;
  }
}

@media (max-width: 768px) {
  .igg-gridpath-layout,
  .igg-spacing-layout,
  .igg-sonar-layout {
    padding: 0.95rem 0.9rem 1.05rem;
    gap: 1.3rem;
  }

  .igg-gridpath-figure--map {
    max-width: 210px;
  }

  .igg-gridpath-figure {
    max-width: 180px;
  }

  .igg-spacing-figure {
    max-width: 210px;
  }

  .igg-spacing-figure--small {
    max-width: 170px;
  }

  .igg-sonar-figure {
    max-width: 210px;
  }

  .igg-sonar-figure--small {
    max-width: 170px;
  }

  .igg-timeline-band {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .igg-gridpath-figure,
  .igg-spacing-figure,
  .igg-sonar-figure {
    max-width: 200px;
  }

  .igg-gridpath-figure--map {
    max-width: 200px;
  }
}
/* ===============================
   SECTION 10: EMERGENCY POCKET LANE
   =============================== */

.igg-emergency-inner {
  position: relative;
}

.igg-emergency-layout {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr);
  gap: 1.7rem;
  align-items: center;
  padding: 1.1rem 1.1rem 1.2rem;
  border-radius: 26px;
  background:
    radial-gradient(circle at 0 0, #151f32, #050913),
    linear-gradient(145deg, rgba(255, 179, 77, 0.22), transparent 60%);
  border: 1px solid rgba(74, 117, 179, 0.95);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.98);
  overflow: hidden;
}

.igg-emergency-list {
  display: grid;
  gap: 0.8rem;
}

.igg-emergency-item {
  padding: 0.55rem 0.7rem 0.7rem;
  border-radius: 18px;
  background: radial-gradient(circle at 0 0, #121f33, #040711);
  border: 1px solid rgba(62, 99, 152, 0.95);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.95);
}

.igg-emergency-title {
  margin: 0 0 0.2rem;
  font-size: 0.96rem;
  color: var(--ig-text-main);
}

.igg-emergency-text {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ig-text-soft);
}

/* images */

.igg-emergency-media {
  display: grid;
  gap: 0.7rem;
  justify-items: flex-end;
}

.igg-emergency-figure {
  margin: 0;
  max-width: 220px;
}

.igg-emergency-figure--small {
  max-width: 180px;
  transform: translateX(-12px);
}

.igg-emergency-image {
  border-radius: 16px;
}

/* ===============================
   SECTION 11: GROUP ROLES RING
   =============================== */

.igg-roles-inner {
  position: relative;
}

.igg-roles-layout {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr);
  gap: 1.7rem;
  align-items: center;
  padding: 1.1rem 1.1rem 1.2rem;
  border-radius: 26px;
  background:
    radial-gradient(circle at 0 0, #151f32, #050913),
    linear-gradient(145deg, rgba(71, 211, 255, 0.18), transparent 60%);
  border: 1px solid rgba(74, 117, 179, 0.95);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.98);
  overflow: hidden;
}

.igg-roles-ring {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.igg-role-card {
  padding: 0.6rem 0.7rem 0.7rem;
  border-radius: 18px;
  background: radial-gradient(circle at 0 0, #121f33, #040711);
  border: 1px solid rgba(62, 99, 152, 0.95);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.95);
}

.igg-role-title {
  margin: 0 0 0.2rem;
  font-size: 0.96rem;
  color: var(--ig-text-main);
}

.igg-role-text {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ig-text-soft);
}

/* subtle tints per role */

.igg-role-card--lead {
  border-color: rgba(71, 211, 255, 0.95);
}

.igg-role-card--time {
  border-color: rgba(123, 255, 139, 0.95);
}

.igg-role-card--lane {
  border-color: rgba(255, 179, 77, 0.95);
}

.igg-role-card--care {
  border-color: rgba(255, 86, 86, 0.95);
}

/* images */

.igg-roles-media {
  display: grid;
  gap: 0.7rem;
  justify-items: flex-end;
}

.igg-roles-figure {
  margin: 0;
  max-width: 220px;
}

.igg-roles-figure--small {
  max-width: 180px;
  transform: translateX(-12px);
}

.igg-roles-image {
  border-radius: 16px;
}

/* ===============================
   SECTION 12: NIGHT PACE STRIP
   =============================== */

.igg-pace-inner {
  position: relative;
}

.igg-pace-layout {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr);
  gap: 1.7rem;
  align-items: center;
  padding: 1.1rem 1.1rem 1.2rem;
  border-radius: 26px;
  background:
    radial-gradient(circle at 0 0, #151f32, #050913),
    linear-gradient(145deg, rgba(255, 179, 77, 0.22), transparent 60%);
  border: 1px solid rgba(74, 117, 179, 0.95);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.98);
  overflow: hidden;
}

.igg-pace-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
}

.igg-pace-step {
  padding: 0.55rem 0.7rem 0.7rem;
  border-radius: 18px;
  background: radial-gradient(circle at 0 0, #121f33, #040711);
  border: 1px solid rgba(62, 99, 152, 0.95);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.95);
}

.igg-pace-time {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ig-text-muted);
}

.igg-pace-title {
  margin: 0 0 0.2rem;
  font-size: 0.96rem;
  color: var(--ig-text-main);
}

.igg-pace-text {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ig-text-soft);
}

/* images */

.igg-pace-media {
  display: grid;
  gap: 0.7rem;
  justify-items: flex-end;
}

.igg-pace-figure {
  margin: 0;
  max-width: 220px;
}

.igg-pace-figure--small {
  max-width: 180px;
  transform: translateX(-12px);
}

.igg-pace-image {
  border-radius: 16px;
}

/* ===============================
   RESPONSIVE (sections 10–12)
   =============================== */

@media (max-width: 1024px) {
  .igg-emergency-layout,
  .igg-roles-layout,
  .igg-pace-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .igg-emergency-media,
  .igg-roles-media,
  .igg-pace-media {
    justify-items: flex-start;
  }

  .igg-emergency-figure--small,
  .igg-roles-figure--small,
  .igg-pace-figure--small {
    transform: none;
  }
}

@media (max-width: 768px) {
  .igg-emergency-layout,
  .igg-roles-layout,
  .igg-pace-layout {
    padding: 0.95rem 0.9rem 1.05rem;
    gap: 1.3rem;
  }

  .igg-roles-ring {
    grid-template-columns: minmax(0, 1fr);
  }

  .igg-pace-band {
    grid-template-columns: minmax(0, 1fr);
  }

  .igg-emergency-figure {
    max-width: 210px;
  }

  .igg-emergency-figure--small {
    max-width: 170px;
  }

  .igg-roles-figure {
    max-width: 210px;
  }

  .igg-roles-figure--small {
    max-width: 170px;
  }

  .igg-pace-figure {
    max-width: 210px;
  }

  .igg-pace-figure--small {
    max-width: 170px;
  }
}

@media (max-width: 480px) {
  .igg-emergency-figure,
  .igg-roles-figure,
  .igg-pace-figure {
    max-width: 200px;
  }
}
/* ===============================
   SECTION 13: KIDS & FIRST-TIMERS STRIP
   =============================== */

.igg-family-inner {
  position: relative;
}

.igg-family-layout {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr);
  gap: 1.7rem;
  align-items: center;
  padding: 1.1rem 1.1rem 1.2rem;
  border-radius: 26px;
  background:
    radial-gradient(circle at 0 0, #151f32, #050913),
    linear-gradient(145deg, rgba(71, 211, 255, 0.18), transparent 60%);
  border: 1px solid rgba(74, 117, 179, 0.95);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.98);
  overflow: hidden;
}

.igg-family-grid {
  display: grid;
  gap: 0.7rem;
}

.igg-family-card {
  padding: 0.55rem 0.7rem 0.7rem;
  border-radius: 18px;
  background: radial-gradient(circle at 0 0, #121f33, #040711);
  border: 1px solid rgba(62, 99, 152, 0.95);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.95);
}

.igg-family-title {
  margin: 0 0 0.2rem;
  font-size: 0.96rem;
  color: var(--ig-text-main);
}

.igg-family-text {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ig-text-soft);
}

/* colour bands */

.igg-family-card--green {
  border-color: rgba(123, 255, 139, 0.95);
}

.igg-family-card--yellow {
  border-color: rgba(255, 179, 77, 0.95);
}

.igg-family-card--red {
  border-color: rgba(255, 86, 86, 0.95);
}

/* images */

.igg-family-media {
  display: grid;
  gap: 0.7rem;
  justify-items: flex-end;
}

.igg-family-figure {
  margin: 0;
  max-width: 220px;
}

.igg-family-figure--small {
  max-width: 180px;
  transform: translateX(-12px);
}

.igg-family-image {
  border-radius: 16px;
}

/* ===============================
   SECTION 14: COMFORT MICRO-CHECKS
   =============================== */

.igg-comfort-inner {
  position: relative;
}

.igg-comfort-title {
  margin: 0 0 0.4rem;
  font-family: "IGDisplay", system-ui, sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ig-text-main);
}

.igg-comfort-layout {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr);
  gap: 1.7rem;
  align-items: center;
  padding: 1.1rem 1.1rem 1.2rem;
  border-radius: 26px;
  background:
    radial-gradient(circle at 0 0, #151f32, #050913),
    linear-gradient(145deg, rgba(255, 179, 77, 0.22), transparent 60%);
  border: 1px solid rgba(74, 117, 179, 0.95);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.98);
  overflow: hidden;
}

.igg-comfort-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.igg-comfort-step {
  padding: 0.55rem 0.7rem 0.7rem;
  border-radius: 18px;
  background: radial-gradient(circle at 0 0, #121f33, #040711);
  border: 1px solid rgba(62, 99, 152, 0.95);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.95);
}

.igg-comfort-step-title {
  margin: 0 0 0.2rem;
  font-size: 0.96rem;
  color: var(--ig-text-main);
}

.igg-comfort-step-text {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ig-text-soft);
}

/* images */

.igg-comfort-media {
  display: grid;
  gap: 0.7rem;
  justify-items: flex-end;
}

.igg-comfort-figure {
  margin: 0;
  max-width: 220px;
}

.igg-comfort-figure--small {
  max-width: 180px;
  transform: translateX(-12px);
}

.igg-comfort-image {
  border-radius: 16px;
}

/* ===============================
   SECTION 15: AFTER-TRIP NOTES PANEL
   =============================== */

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

.igg-notes-layout {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr);
  gap: 1.7rem;
  align-items: center;
  padding: 1.1rem 1.1rem 1.2rem;
  border-radius: 26px;
  background:
    radial-gradient(circle at 0 0, #151f32, #050913),
    linear-gradient(145deg, rgba(71, 211, 255, 0.18), transparent 60%);
  border: 1px solid rgba(74, 117, 179, 0.95);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.98);
  overflow: hidden;
}

.igg-notes-panel {
  padding: 0.6rem 0.7rem 0.7rem;
  border-radius: 18px;
  background: radial-gradient(circle at 0 0, #121f33, #040711);
  border: 1px solid rgba(62, 99, 152, 0.95);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.95);
}

.igg-notes-line {
  margin: 0 0 0.35rem;
  font-size: 0.88rem;
  color: var(--ig-text-soft);
}

.igg-notes-line:last-child {
  margin-bottom: 0;
}

/* image */

.igg-notes-figure {
  margin: 0;
  max-width: 230px;
}

.igg-notes-image {
  border-radius: 16px;
}

/* ===============================
   RESPONSIVE (sections 13–15)
   =============================== */

@media (max-width: 1024px) {
  .igg-family-layout,
  .igg-comfort-layout,
  .igg-notes-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .igg-family-media,
  .igg-comfort-media {
    justify-items: flex-start;
  }

  .igg-family-figure--small,
  .igg-comfort-figure--small {
    transform: none;
  }
}

@media (max-width: 768px) {
  .igg-family-layout,
  .igg-comfort-layout,
  .igg-notes-layout {
    padding: 0.95rem 0.9rem 1.05rem;
    gap: 1.3rem;
  }

  .igg-comfort-band {
    grid-template-columns: minmax(0, 1fr);
  }

  .igg-family-figure {
    max-width: 210px;
  }

  .igg-family-figure--small {
    max-width: 170px;
  }

  .igg-comfort-figure {
    max-width: 210px;
  }

  .igg-comfort-figure--small {
    max-width: 170px;
  }

  .igg-notes-figure {
    max-width: 210px;
  }
}

@media (max-width: 480px) {
  .igg-family-figure,
  .igg-comfort-figure,
  .igg-notes-figure {
    max-width: 200px;
  }
}
/* ===============================
   SECTION 16: SAFETY OVERVIEW BOARD
   =============================== */

.igg-overview-inner {
  position: relative;
}

.igg-overview-layout {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr);
  gap: 1.7rem;
  align-items: center;
  padding: 1.1rem 1.1rem 1.2rem;
  border-radius: 26px;
  background:
    radial-gradient(circle at 0 0, #151f32, #050913),
    linear-gradient(145deg, rgba(71, 211, 255, 0.18), transparent 60%);
  border: 1px solid rgba(74, 117, 179, 0.95);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.98);
  overflow: hidden;
}

.igg-overview-copy {
  display: grid;
  gap: 0.8rem;
}

.igg-overview-block {
  padding: 0.55rem 0.7rem 0.7rem;
  border-radius: 18px;
  background: radial-gradient(circle at 0 0, #121f33, #040711);
  border: 1px solid rgba(62, 99, 152, 0.95);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.95);
}

.igg-overview-title {
  margin: 0 0 0.2rem;
  font-size: 0.96rem;
  color: var(--ig-text-main);
}

.igg-overview-text {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ig-text-soft);
}

/* images */

.igg-overview-media {
  display: grid;
  gap: 0.7rem;
  justify-items: flex-end;
}

.igg-overview-figure {
  margin: 0;
  max-width: 220px;
}

.igg-overview-figure--small {
  max-width: 180px;
}

.igg-overview-image {
  border-radius: 16px;
}

/* ===============================
   SECTION 17: PACK YOUR SAFETY PATTERN
   =============================== */

.igg-wrapup-inner {
  position: relative;
}

.igg-wrapup-panel {
  margin-top: 2.1rem;
  padding: 1.2rem 1.2rem 1.35rem;
  border-radius: 26px;
  background:
    radial-gradient(circle at 0 0, #131f33, #050913),
    linear-gradient(145deg, rgba(255, 179, 77, 0.22), transparent 60%);
  border: 1px solid rgba(74, 117, 179, 0.95);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.98);
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.9fr);
  gap: 1.8rem;
  align-items: center;
  overflow: hidden;
}

.igg-wrapup-main {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.igg-wrapup-title {
  margin: 0;
  font-family: "IGDisplay", system-ui, sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ig-text-main);
}

.igg-wrapup-text {
  margin: 0;
  font-size: 0.94rem;
  color: var(--ig-text-soft);
}

.igg-wrapup-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.igg-wrapup-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem;
  align-items: flex-start;
}

.igg-wrapup-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  border: 1px dashed rgba(99, 142, 198, 0.95);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ig-text-muted);
  white-space: nowrap;
}

.igg-wrapup-note {
  font-size: 0.88rem;
  color: var(--ig-text-soft);
}

.igg-wrapup-links {
  display: grid;
  gap: 0.6rem;
}

/* .ig-next-link уже описан в style.css, тут только сетка */

.igg-wrapup-media {
  display: grid;
  justify-items: flex-end;
}

.igg-wrapup-figure {
  margin: 0;
  max-width: 220px;
}

.igg-wrapup-image {
  border-radius: 16px;
}

/* ===============================
   RESPONSIVE (sections 16–17)
   =============================== */

@media (max-width: 1024px) {
  .igg-overview-layout,
  .igg-wrapup-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .igg-overview-media,
  .igg-wrapup-media {
    justify-items: flex-start;
  }
}

@media (max-width: 768px) {
  .igg-overview-layout,
  .igg-wrapup-panel {
    padding: 0.95rem 0.9rem 1.05rem;
    gap: 1.3rem;
  }

  .igg-wrapup-title {
    font-size: 1.2rem;
  }

  .igg-overview-figure {
    max-width: 210px;
  }

  .igg-overview-figure--small {
    max-width: 170px;
  }

  .igg-wrapup-figure {
    max-width: 210px;
  }
}

@media (max-width: 480px) {
  .igg-overview-figure,
  .igg-wrapup-figure {
    max-width: 200px;
  }
}