/* IceShack Studio — Layouts page
   Base shell
------------------------------------- */

.isl-main {
  padding-block: 120px 72px;
}

.isl-shell {
  max-width: 1040px;
  margin: 0 auto;
  padding-inline: 16px;
}

/* ==============================
   Section 1: Layout library hero
   ============================== */

.isl-hero-inner {
  border-radius: var(--iss-radius-xl);
  padding: 28px 24px 24px;
  background:
    radial-gradient(circle at 0 0, #ffe4c8 0, #ffe4c800 55%),
    radial-gradient(circle at 100% 0, #e4f0e7 0, #e4f0e700 55%),
    var(--iss-color-paper);
  box-shadow: var(--iss-shadow-soft);
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.4fr);
  gap: 24px;
  align-items: center;
}

.isl-hero-kicker {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #7e5b34;
  margin-bottom: 6px;
}

.isl-hero-title {
  color: var(--iss-color-charcoal);
  margin-bottom: 10px;
}

.isl-hero-lead {
  font-size: 0.96rem;
  color: #655241;
  margin-bottom: 12px;
}

.isl-hero-points {
  margin: 0 0 14px;
  padding-left: 18px;
  font-size: 0.88rem;
  color: #6b5945;
}

.isl-hero-points li + li {
  margin-top: 3px;
}

/* chips */

.isl-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.isl-chip {
  border-radius: 999px;
  padding: 5px 11px;
  border: 1px solid rgba(189, 157, 121, 0.7);
  background: rgba(255, 244, 229, 0.9);
  font-size: 0.8rem;
  color: #4f3f2f;
  cursor: default;
  transition:
    background-color var(--iss-transition-med),
    transform var(--iss-transition-med),
    box-shadow var(--iss-transition-med),
    border-color var(--iss-transition-med);
}

.isl-chip--active {
  background: linear-gradient(135deg, #ffbe7a, #ffd6a4);
  border-color: rgba(150, 98, 49, 0.9);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
}

.isl-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

/* hero gallery */

.isl-hero-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.isl-hero-card {
  border-radius: 22px;
  padding: 9px 9px 10px;
  background: rgba(19, 16, 22, 0.97);
  border: 1px solid rgba(246, 220, 198, 0.6);
  color: #fdf1e4;
  box-shadow: var(--iss-shadow-subtle);
  transition:
    transform var(--iss-transition-med),
    box-shadow var(--iss-transition-med);
}

.isl-hero-card--family {
  background: radial-gradient(circle at 40% 0, #ffbe7a33, transparent 70%),
    rgba(19, 16, 22, 0.98);
}

.isl-hero-card--crew {
  background: radial-gradient(circle at 60% 0, #7fa48a33, transparent 70%),
    rgba(19, 16, 22, 0.98);
}

.isl-hero-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.8);
}

.isl-hero-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 350px;
  border-radius: 16px;
}

.isl-hero-caption {
  margin-top: 7px;
  font-size: 0.82rem;
  color: rgba(253, 241, 226, 0.9);
}

/* ==============================
   Section 2: Zone matrix strip
   ============================== */

.isl-zones-inner {
  border-radius: var(--iss-radius-xl);
  padding: 26px 22px 22px;
  background:
    radial-gradient(circle at 0 0, #ffe4cf 0, #ffe4cf00 55%),
    radial-gradient(circle at 100% 0, #e2f0e7 0, #e2f0e700 55%),
    var(--iss-color-paper-alt);
  box-shadow: var(--iss-shadow-subtle);
}

.isl-zones-header {
  max-width: 560px;
  margin-bottom: 16px;
}

.isl-zones-title {
  color: var(--iss-color-charcoal);
}

.isl-zones-text {
  font-size: 0.94rem;
  color: #655442;
}

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

/* left grid */

.isl-zones-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.isl-zone-pill {
  padding: 9px 11px;
  border-radius: 16px;
  background: rgba(248, 236, 224, 0.95);
  border: 1px solid rgba(190, 157, 121, 0.45);
}

.isl-zone-name {
  font-size: 0.9rem;
  margin-bottom: 4px;
  color: #4f3f2f;
}

.isl-zone-copy {
  font-size: 0.86rem;
  color: #6b5945;
}

/* media cards */

.isl-zones-media {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 10px;
}

.isl-zones-card {
  border-radius: 20px;
  padding: 9px 9px 10px;
  background: rgba(19, 16, 22, 0.96);
  border: 1px solid rgba(246, 220, 198, 0.5);
  color: #fdf1e4;
  box-shadow: var(--iss-shadow-subtle);
  transition:
    transform var(--iss-transition-med),
    box-shadow var(--iss-transition-med);
}

.isl-zones-card--stacked {
  max-width: 260px;
}

.isl-zones-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.78);
}

.isl-zones-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 350px;
  border-radius: 16px;
}

.isl-zones-caption {
  margin-top: 7px;
  font-size: 0.82rem;
  color: rgba(253, 241, 226, 0.9);
}

/* ==============================
   Section 3: Hole spacing ribbons
   ============================== */

.isl-spacing-inner {
  border-radius: var(--iss-radius-xl);
  padding: 26px 22px 22px;
  background:
    radial-gradient(circle at 0 0, #ffe3c9 0, #ffe3c900 55%),
    radial-gradient(circle at 100% 0, #e3efe6 0, #e3efe600 55%),
    var(--iss-color-paper);
  box-shadow: var(--iss-shadow-subtle);
}

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

.isl-spacing-title {
  color: var(--iss-color-charcoal);
}

.isl-spacing-lead {
  font-size: 0.94rem;
  color: #655241;
  margin-bottom: 10px;
}

.isl-spacing-list {
  margin: 0;
  padding-left: 18px;
  font-size: 0.86rem;
  color: #6b5945;
}

.isl-spacing-list li + li {
  margin-top: 3px;
}

/* media */

.isl-spacing-media {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 10px;
}

.isl-spacing-card {
  border-radius: 20px;
  padding: 9px 9px 10px;
  background: rgba(19, 16, 22, 0.96);
  border: 1px solid rgba(246, 220, 198, 0.5);
  color: #fdf1e4;
  box-shadow: var(--iss-shadow-subtle);
  transition:
    transform var(--iss-transition-med),
    box-shadow var(--iss-transition-med);
}

.isl-spacing-card--markers {
  background: radial-gradient(circle at 50% 0, #ffbe7a33, transparent 70%),
    rgba(18, 16, 24, 0.98);
}

.isl-spacing-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.78);
}

.isl-spacing-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 350px;
  border-radius: 16px;
}

.isl-spacing-caption {
  margin-top: 7px;
  font-size: 0.82rem;
  color: rgba(253, 241, 226, 0.9);
}

/* ============
   Responsive
   ============ */

@media (max-width: 980px) {
  .isl-hero-inner {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr);
  }

  .isl-zones-layout,
  .isl-spacing-layout {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.3fr);
  }
}

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

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

  .isl-zones-layout,
  .isl-spacing-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .isl-zones-media,
  .isl-spacing-media {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-auto-rows: auto;
  }
}

@media (max-width: 640px) {
  .isl-main {
    padding-block: 96px 64px;
  }

  .isl-hero-inner,
  .isl-zones-inner,
  .isl-spacing-inner {
    padding: 22px 18px 18px;
  }

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

  .isl-zones-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .isl-zones-media,
  .isl-spacing-media {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* страховка: картинки не шире 350 и не выходят за контейнер */

.isl-hero-image,
.isl-zones-image,
.isl-spacing-image {
  max-width: 350px;
}
/* ==============================
   Section 4: Solo pod presets track
   ============================== */

.isl-solo-inner {
  border-radius: var(--iss-radius-xl);
  padding: 26px 22px 22px;
  background:
    radial-gradient(circle at 0 0, #ffe4ce 0, #ffe4ce00 55%),
    radial-gradient(circle at 100% 0, #e4f0e7 0, #e4f0e700 55%),
    var(--iss-color-paper);
  box-shadow: var(--iss-shadow-subtle);
}

.isl-solo-head {
  max-width: 560px;
  margin-bottom: 16px;
}

.isl-solo-title {
  color: var(--iss-color-charcoal);
}

.isl-solo-text {
  font-size: 0.94rem;
  color: #655241;
}

/* track */

.isl-solo-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.isl-solo-card {
  border-radius: 20px;
  padding: 9px 10px 10px;
  background: rgba(19, 16, 22, 0.97);
  border: 1px solid rgba(246, 220, 198, 0.55);
  color: #fdf1e4;
  box-shadow: var(--iss-shadow-subtle);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition:
    transform var(--iss-transition-med),
    box-shadow var(--iss-transition-med);
}

.isl-solo-card--bunk {
  background: radial-gradient(circle at 50% 0, #ffbe7a33, transparent 70%),
    rgba(19, 16, 22, 0.98);
}

.isl-solo-card--pack {
  background: radial-gradient(circle at 100% 0, #7fa48a33, transparent 70%),
    rgba(19, 16, 22, 0.98);
}

.isl-solo-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.8);
}

.isl-solo-card-head {
  margin-bottom: 2px;
}

.isl-solo-name {
  font-size: 0.94rem;
}

.isl-solo-note {
  font-size: 0.84rem;
  color: rgba(253, 241, 226, 0.84);
}

.isl-solo-media {
  margin: 0;
}

.isl-solo-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 350px;
  border-radius: 16px;
}

.isl-solo-caption {
  margin-top: 5px;
  font-size: 0.8rem;
  color: rgba(253, 241, 226, 0.9);
}

.isl-solo-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
}

.isl-solo-tags li {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(28, 23, 31, 0.96);
  border: 1px solid rgba(248, 226, 202, 0.5);
}

/* ==============================
   Section 5: Family strip comparison
   ============================== */

.isl-family-inner {
  border-radius: var(--iss-radius-xl);
  padding: 26px 22px 22px;
  background:
    radial-gradient(circle at 0 0, #ffe5cf 0, #ffe5cf00 55%),
    radial-gradient(circle at 100% 0, #e5f0e8 0, #e5f0e800 55%),
    var(--iss-color-paper-alt);
  box-shadow: var(--iss-shadow-subtle);
}

.isl-family-header {
  max-width: 560px;
  margin-bottom: 16px;
}

.isl-family-title {
  color: var(--iss-color-charcoal);
}

.isl-family-text {
  font-size: 0.94rem;
  color: #655342;
}

/* columns */

.isl-family-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.isl-family-column {
  border-radius: 20px;
  padding: 10px 11px 11px;
  background: rgba(248, 236, 224, 0.96);
  border: 1px solid rgba(190, 157, 121, 0.45);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.isl-family-column--chat {
  background: radial-gradient(circle at 40% 0, #ffbe7a33, transparent 70%),
    rgba(248, 236, 224, 0.97);
}

.isl-family-column--play {
  background: radial-gradient(circle at 60% 0, #7fa48a33, transparent 70%),
    rgba(248, 236, 224, 0.97);
}

.isl-family-label {
  font-size: 0.9rem;
  color: #4f3f2f;
}

.isl-family-note {
  font-size: 0.86rem;
  color: #6c5945;
}

.isl-family-media {
  margin: 0;
}

.isl-family-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 350px;
  border-radius: 16px;
  box-shadow: var(--iss-shadow-subtle);
}

.isl-family-caption {
  margin-top: 6px;
  font-size: 0.8rem;
  color: #5b4936;
}

/* ==============================
   Section 6: Crew base flow line
   ============================== */

.isl-crew-inner {
  border-radius: var(--iss-radius-xl);
  padding: 26px 22px 22px;
  background:
    radial-gradient(circle at 0 0, #ffe3c9 0, #ffe3c900 55%),
    radial-gradient(circle at 100% 0, #e3efe6 0, #e3efe600 55%),
    var(--iss-color-paper);
  box-shadow: var(--iss-shadow-subtle);
}

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

.isl-crew-title {
  color: var(--iss-color-charcoal);
}

.isl-crew-lead {
  font-size: 0.94rem;
  color: #655241;
  margin-bottom: 10px;
}

.isl-crew-steps {
  margin: 0;
  padding-left: 18px;
  font-size: 0.86rem;
  color: #6b5945;
}

.isl-crew-step + .isl-crew-step {
  margin-top: 3px;
}

.isl-crew-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.isl-crew-pill {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(249, 236, 223, 0.96);
  border: 1px solid rgba(189, 156, 122, 0.45);
  font-size: 0.8rem;
  color: #5b4936;
}

/* media cards */

.isl-crew-media {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 10px;
}

.isl-crew-card {
  border-radius: 20px;
  padding: 9px 9px 10px;
  background: rgba(19, 16, 22, 0.96);
  border: 1px solid rgba(246, 220, 198, 0.5);
  color: #fdf1e4;
  box-shadow: var(--iss-shadow-subtle);
  transition:
    transform var(--iss-transition-med),
    box-shadow var(--iss-transition-med);
}

.isl-crew-card--rack {
  background: radial-gradient(circle at 50% 0, #ffbe7a33, transparent 70%),
    rgba(18, 16, 24, 0.98);
}

.isl-crew-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.78);
}

.isl-crew-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 350px;
  border-radius: 16px;
}

.isl-crew-caption {
  margin-top: 7px;
  font-size: 0.82rem;
  color: rgba(253, 241, 226, 0.9);
}
/* ==============================
   Section 7: Day-to-night transitions
   ============================== */

.isl-transitions-inner {
  border-radius: var(--iss-radius-xl);
  padding: 26px 22px 22px;
  background:
    radial-gradient(circle at 0 0, #ffe4cf 0, #ffe4cf00 55%),
    radial-gradient(circle at 100% 0, #e4f0e7 0, #e4f0e700 55%),
    var(--iss-color-paper-alt);
  box-shadow: var(--iss-shadow-subtle);
}

.isl-transitions-header {
  max-width: 560px;
  margin-bottom: 16px;
}

.isl-transitions-title {
  color: var(--iss-color-charcoal);
}

.isl-transitions-text {
  font-size: 0.94rem;
  color: #655342;
}

.isl-transitions-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr);
  gap: 22px;
  align-items: flex-start;
}

/* steps */

.isl-transitions-steps {
  margin: 0;
  padding-left: 18px;
  font-size: 0.86rem;
  color: #6b5945;
  border-left: 1px dashed rgba(189, 156, 122, 0.7);
}

.isl-transitions-step {
  position: relative;
  padding: 6px 0 6px 14px;
}

.isl-transitions-step::before {
  content: "";
  position: absolute;
  inset-inline-start: -5px;
  inset-block-start: 14px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #e26b3f;
  box-shadow: 0 0 0 4px rgba(226, 107, 63, 0.26);
}

.isl-transitions-step-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #4f3f2f;
}

.isl-transitions-step-note {
  margin-top: 2px;
}

/* media */

.isl-transitions-media {
  display: grid;
  grid-template-rows: auto auto;
  gap: 10px;
}

.isl-transitions-card {
  border-radius: 20px;
  padding: 9px 9px 10px;
  background: rgba(19, 16, 22, 0.96);
  border: 1px solid rgba(246, 220, 198, 0.5);
  color: #fdf1e4;
  box-shadow: var(--iss-shadow-subtle);
  transition:
    transform var(--iss-transition-med),
    box-shadow var(--iss-transition-med);
}

.isl-transitions-card--night {
  background: radial-gradient(circle at 50% 0, #ffbe7a33, transparent 70%),
    rgba(18, 16, 24, 0.98);
}

.isl-transitions-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.8);
}

.isl-transitions-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 350px;
  border-radius: 16px;
}

.isl-transitions-caption {
  margin-top: 7px;
  font-size: 0.82rem;
  color: rgba(253, 241, 226, 0.9);
}

/* ==============================
   Section 8: Door direction panel
   ============================== */

.isl-doors-inner {
  border-radius: var(--iss-radius-xl);
  padding: 26px 22px 22px;
  background:
    radial-gradient(circle at 0 0, #ffe5d0 0, #ffe5d000 55%),
    radial-gradient(circle at 100% 0, #e5f0e8 0, #e5f0e800 55%),
    var(--iss-color-paper);
  box-shadow: var(--iss-shadow-subtle);
}

.isl-doors-header {
  max-width: 560px;
  margin-bottom: 16px;
}

.isl-doors-title {
  color: var(--iss-color-charcoal);
}

.isl-doors-text {
  font-size: 0.94rem;
  color: #655342;
}

.isl-doors-layout {
  display: grid;
  gap: 10px;
}

/* rows */

.isl-doors-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr);
  gap: 14px;
  align-items: center;
  padding: 9px 11px;
  border-radius: 18px;
  background: rgba(248, 236, 224, 0.96);
  border: 1px solid rgba(190, 157, 121, 0.45);
}

.isl-doors-copy {
  max-width: 440px;
}

.isl-doors-label {
  font-size: 0.9rem;
  color: #4f3f2f;
}

.isl-doors-note {
  font-size: 0.86rem;
  color: #6c5945;
}

/* media */

.isl-doors-media {
  margin: 0;
}

.isl-doors-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 350px;
  border-radius: 16px;
  box-shadow: var(--iss-shadow-subtle);
}

.isl-doors-caption {
  margin-top: 6px;
  font-size: 0.8rem;
  color: #5b4936;
}

/* ==============================
   Section 9: Bench height lab
   ============================== */

.isl-benches-inner {
  border-radius: var(--iss-radius-xl);
  padding: 26px 22px 22px;
  background:
    radial-gradient(circle at 0 0, #ffe4cf 0, #ffe4cf00 55%),
    radial-gradient(circle at 100% 0, #e4f0e7 0, #e4f0e700 55%),
    var(--iss-color-paper-alt);
  box-shadow: var(--iss-shadow-subtle);
}

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

.isl-benches-title {
  color: var(--iss-color-charcoal);
}

.isl-benches-text-main {
  font-size: 0.94rem;
  color: #655342;
  margin-bottom: 12px;
}

/* grid cells */

.isl-benches-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.isl-benches-cell {
  padding: 9px 11px;
  border-radius: 16px;
  background: rgba(248, 236, 224, 0.96);
  border: 1px solid rgba(190, 157, 121, 0.45);
}

.isl-benches-label {
  font-size: 0.9rem;
  color: #4f3f2f;
}

.isl-benches-note {
  font-size: 0.86rem;
  color: #6b5945;
}

/* media column */

.isl-benches-media {
  display: grid;
  grid-template-rows: auto auto;
  gap: 10px;
}

.isl-benches-card {
  border-radius: 20px;
  padding: 9px 9px 10px;
  background: rgba(19, 16, 22, 0.96);
  border: 1px solid rgba(246, 220, 198, 0.5);
  color: #fdf1e4;
  box-shadow: var(--iss-shadow-subtle);
  transition:
    transform var(--iss-transition-med),
    box-shadow var(--iss-transition-med);
}

.isl-benches-card--storage {
  background: radial-gradient(circle at 50% 0, #ffbe7a33, transparent 70%),
    rgba(18, 16, 24, 0.98);
}

.isl-benches-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.8);
}

.isl-benches-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 350px;
  border-radius: 16px;
}

.isl-benches-caption {
  margin-top: 7px;
  font-size: 0.82rem;
  color: rgba(253, 241, 226, 0.9);
}
/* ==============================
   Section 13: Mini camp clusters
   ============================== */

.isl-clusters-inner {
  border-radius: var(--iss-radius-xl);
  padding: 26px 22px 22px;
  background:
    radial-gradient(circle at 0 0, #ffe5d0 0, #ffe5d000 55%),
    radial-gradient(circle at 100% 0, #e5f0e8 0, #e5f0e800 55%),
    var(--iss-color-paper-alt);
  box-shadow: var(--iss-shadow-subtle);
}

.isl-clusters-header {
  max-width: 560px;
  margin-bottom: 16px;
}

.isl-clusters-title {
  color: var(--iss-color-charcoal);
}

.isl-clusters-text {
  font-size: 0.94rem;
  color: #655342;
}

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

/* left text column */

.isl-clusters-copy {
  display: grid;
  gap: 8px;
}

.isl-clusters-block {
  padding: 9px 11px;
  border-radius: 16px;
  background: rgba(248, 236, 224, 0.96);
  border: 1px solid rgba(190, 157, 121, 0.45);
}

.isl-clusters-label {
  font-size: 0.9rem;
  color: #4f3f2f;
  margin-bottom: 3px;
}

.isl-clusters-note {
  font-size: 0.86rem;
  color: #6b5945;
}

/* media column */

.isl-clusters-media {
  display: grid;
  grid-template-rows: auto auto;
  gap: 10px;
}

.isl-clusters-card {
  border-radius: 20px;
  padding: 9px 9px 10px;
  background: rgba(19, 16, 22, 0.96);
  border: 1px solid rgba(246, 220, 198, 0.5);
  color: #fdf1e4;
  box-shadow: var(--iss-shadow-subtle);
  transition:
    transform var(--iss-transition-med),
    box-shadow var(--iss-transition-med);
}

.isl-clusters-card--ring {
  background: radial-gradient(circle at 50% 0, #ffbe7a33, transparent 70%),
    rgba(18, 16, 24, 0.98);
}

.isl-clusters-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.8);
}

.isl-clusters-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 350px;
  border-radius: 16px;
}

.isl-clusters-caption {
  margin-top: 7px;
  font-size: 0.82rem;
  color: rgba(253, 241, 226, 0.9);
}

/* ==============================
   Section 14: Layout autopsy panel
   ============================== */

.isl-autopsy-inner {
  border-radius: var(--iss-radius-xl);
  padding: 26px 22px 22px;
  background:
    radial-gradient(circle at 0 0, #ffe4cf 0, #ffe4cf00 55%),
    radial-gradient(circle at 100% 0, #e4f0e7 0, #e4f0e700 55%),
    var(--iss-color-paper);
  box-shadow: var(--iss-shadow-subtle);
}

.isl-autopsy-header {
  max-width: 560px;
  margin-bottom: 16px;
}

.isl-autopsy-title {
  color: var(--iss-color-charcoal);
}

.isl-autopsy-text {
  font-size: 0.94rem;
  color: #655342;
}

.isl-autopsy-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.isl-autopsy-card {
  border-radius: 20px;
  padding: 9px 9px 10px;
  background: rgba(19, 16, 22, 0.96);
  border: 1px solid rgba(246, 220, 198, 0.5);
  color: #fdf1e4;
  box-shadow: var(--iss-shadow-subtle);
  transition:
    transform var(--iss-transition-med),
    box-shadow var(--iss-transition-med);
}

.isl-autopsy-card--before {
  box-shadow: 0 0 0 1px rgba(222, 112, 70, 0.6),
    0 18px 34px rgba(0, 0, 0, 0.76);
}

.isl-autopsy-card--after {
  background: radial-gradient(circle at 50% 0, #7fa48a33, transparent 70%),
    rgba(18, 16, 24, 0.98);
}

.isl-autopsy-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.8);
}

.isl-autopsy-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 350px;
  border-radius: 16px;
}

.isl-autopsy-caption {
  margin-top: 7px;
  font-size: 0.82rem;
  color: rgba(253, 241, 226, 0.9);
}

/* ==============================
   Section 15: End-of-day pack map
   ============================== */

.isl-pack-inner {
  border-radius: var(--iss-radius-xl);
  padding: 26px 22px 22px;
  background:
    radial-gradient(circle at 0 0, #ffe5d0 0, #ffe5d000 55%),
    radial-gradient(circle at 100% 0, #e5f0e8 0, #e5f0e800 55%),
    var(--iss-color-paper-alt);
  box-shadow: var(--iss-shadow-subtle);
}

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

.isl-pack-title {
  color: var(--iss-color-charcoal);
}

.isl-pack-lead {
  font-size: 0.94rem;
  color: #655342;
  margin-bottom: 10px;
}

.isl-pack-list {
  margin: 0;
  padding-left: 18px;
  font-size: 0.86rem;
  color: #6b5945;
}

.isl-pack-list li + li {
  margin-top: 3px;
}

.isl-pack-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.isl-pack-flag {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(249, 236, 223, 0.96);
  border: 1px solid rgba(189, 156, 122, 0.45);
  font-size: 0.8rem;
  color: #5b4936;
}

/* media column */

.isl-pack-media {
  display: grid;
  grid-template-rows: auto auto;
  gap: 10px;
}

.isl-pack-card {
  border-radius: 20px;
  padding: 9px 9px 10px;
  background: rgba(19, 16, 22, 0.96);
  border: 1px solid rgba(246, 220, 198, 0.5);
  color: #fdf1e4;
  box-shadow: var(--iss-shadow-subtle);
  transition:
    transform var(--iss-transition-med),
    box-shadow var(--iss-transition-med);
}

.isl-pack-card--notes {
  background: radial-gradient(circle at 50% 0, #ffbe7a33, transparent 70%),
    rgba(18, 16, 24, 0.98);
}

.isl-pack-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.8);
}

.isl-pack-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 350px;
  border-radius: 16px;
}

.isl-pack-caption {
  margin-top: 7px;
  font-size: 0.82rem;
  color: rgba(253, 241, 226, 0.9);
}
@media (max-width: 980px) {
  .isl-clusters-layout,
  .isl-pack-layout {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.3fr);
  }
}

@media (max-width: 820px) {
  .isl-clusters-layout,
  .isl-pack-layout {
    grid-template-columns: minmax(0, 1fr);
  }

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

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

@media (max-width: 640px) {
  .isl-clusters-inner,
  .isl-autopsy-inner,
  .isl-pack-inner {
    padding: 22px 18px 18px;
  }

  .isl-pack-media {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* ==============================
   Section 10: Grid layers board
   ============================== */

.isl-layers-inner {
  border-radius: var(--iss-radius-xl);
  padding: 26px 22px 22px;
  background:
    radial-gradient(circle at 0 0, #ffe4cf 0, #ffe4cf00 55%),
    radial-gradient(circle at 100% 0, #e4f0e7 0, #e4f0e700 55%),
    var(--iss-color-paper);
  box-shadow: var(--iss-shadow-subtle);
}

.isl-layers-header {
  max-width: 560px;
  margin-bottom: 16px;
}

.isl-layers-title {
  color: var(--iss-color-charcoal);
}

.isl-layers-text {
  font-size: 0.94rem;
  color: #655342;
}

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

/* legend pills */

.isl-layers-legend {
  display: grid;
  gap: 8px;
}

.isl-layers-pill {
  padding: 9px 11px;
  border-radius: 16px;
  background: rgba(248, 236, 224, 0.96);
  border: 1px solid rgba(190, 157, 121, 0.45);
}

.isl-layers-label {
  font-size: 0.9rem;
  color: #4f3f2f;
  margin-bottom: 3px;
}

.isl-layers-note {
  font-size: 0.86rem;
  color: #6b5945;
}

/* media */

.isl-layers-media {
  display: grid;
  grid-template-rows: auto auto;
  gap: 10px;
}

.isl-layers-card {
  border-radius: 20px;
  padding: 9px 9px 10px;
  background: rgba(19, 16, 22, 0.96);
  border: 1px solid rgba(246, 220, 198, 0.5);
  color: #fdf1e4;
  box-shadow: var(--iss-shadow-subtle);
  transition:
    transform var(--iss-transition-med),
    box-shadow var(--iss-transition-med);
}

.isl-layers-card--zones {
  background: radial-gradient(circle at 50% 0, #ffbe7a33, transparent 70%),
    rgba(18, 16, 24, 0.98);
}

.isl-layers-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.8);
}

.isl-layers-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 350px;
  border-radius: 16px;
}

.isl-layers-caption {
  margin-top: 7px;
  font-size: 0.82rem;
  color: rgba(253, 241, 226, 0.9);
}

/* ==============================
   Section 11: Printable layout cards
   ============================== */

.isl-print-inner {
  border-radius: var(--iss-radius-xl);
  padding: 26px 22px 22px;
  background:
    radial-gradient(circle at 0 0, #ffe5d0 0, #ffe5d000 55%),
    radial-gradient(circle at 100% 0, #e5f0e8 0, #e5f0e800 55%),
    var(--iss-color-paper-alt);
  box-shadow: var(--iss-shadow-subtle);
}

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

.isl-print-title {
  color: var(--iss-color-charcoal);
}

.isl-print-lead {
  font-size: 0.94rem;
  color: #655342;
  margin-bottom: 10px;
}

.isl-print-list {
  margin: 0;
  padding-left: 18px;
  font-size: 0.86rem;
  color: #6b5945;
}

.isl-print-list li + li {
  margin-top: 3px;
}

/* media */

.isl-print-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.isl-print-card {
  border-radius: 20px;
  padding: 9px 9px 10px;
  background: rgba(19, 16, 22, 0.96);
  border: 1px solid rgba(246, 220, 198, 0.5);
  color: #fdf1e4;
  box-shadow: var(--iss-shadow-subtle);
  transition:
    transform var(--iss-transition-med),
    box-shadow var(--iss-transition-med);
}

.isl-print-card--laminated {
  background: radial-gradient(circle at 50% 0, #ffbe7a33, transparent 70%),
    rgba(18, 16, 24, 0.98);
}

.isl-print-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.8);
}

.isl-print-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 350px;
  border-radius: 16px;
}

.isl-print-caption {
  margin-top: 7px;
  font-size: 0.82rem;
  color: rgba(253, 241, 226, 0.9);
}

/* ==============================
   Section 12: String lines & wall markers
   ============================== */

.isl-markers-inner {
  border-radius: var(--iss-radius-xl);
  padding: 26px 22px 22px;
  background:
    radial-gradient(circle at 0 0, #ffe4cf 0, #ffe4cf00 55%),
    radial-gradient(circle at 100% 0, #e4f0e7 0, #e4f0e700 55%),
    var(--iss-color-paper);
  box-shadow: var(--iss-shadow-subtle);
}

.isl-markers-header {
  max-width: 560px;
  margin-bottom: 16px;
}

.isl-markers-title {
  color: var(--iss-color-charcoal);
}

.isl-markers-text {
  font-size: 0.94rem;
  color: #655342;
}

/* layout */

.isl-markers-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.isl-markers-card {
  border-radius: 20px;
  padding: 9px 9px 10px;
  background: rgba(19, 16, 22, 0.96);
  border: 1px solid rgba(246, 220, 198, 0.5);
  color: #fdf1e4;
  box-shadow: var(--iss-shadow-subtle);
  transition:
    transform var(--iss-transition-med),
    box-shadow var(--iss-transition-med);
}

.isl-markers-card--dots {
  background: radial-gradient(circle at 50% 0, #ffbe7a33, transparent 70%),
    rgba(18, 16, 24, 0.98);
}

.isl-markers-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.8);
}

.isl-markers-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 350px;
  border-radius: 16px;
}

.isl-markers-caption {
  margin-top: 7px;
  font-size: 0.82rem;
  color: rgba(253, 241, 226, 0.9);
}
@media (max-width: 980px) {
  .isl-layers-layout,
  .isl-print-layout {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.3fr);
  }
}

@media (max-width: 820px) {
  .isl-layers-layout,
  .isl-print-layout {
    grid-template-columns: minmax(0, 1fr);
  }

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

@media (max-width: 640px) {
  .isl-layers-inner,
  .isl-print-inner,
  .isl-markers-inner {
    padding: 22px 18px 18px;
  }
}
/* ==============================
   Section 16: Season layout timeline
   ============================== */

.isl-timeline-inner {
  border-radius: var(--iss-radius-xl);
  padding: 26px 22px 22px;
  background:
    radial-gradient(circle at 0 0, #ffe4cf 0, #ffe4cf00 55%),
    radial-gradient(circle at 100% 0, #e4f0e7 0, #e4f0e700 55%),
    var(--iss-color-paper);
  box-shadow: var(--iss-shadow-subtle);
}

.isl-timeline-header {
  max-width: 560px;
  margin-bottom: 16px;
}

.isl-timeline-title {
  color: var(--iss-color-charcoal);
}

.isl-timeline-text {
  font-size: 0.94rem;
  color: #655342;
}

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

/* vertical list with line */

.isl-timeline-list {
  margin: 0;
  padding-left: 18px;
  font-size: 0.86rem;
  color: #6b5945;
  border-left: 1px dashed rgba(189, 156, 122, 0.7);
}

.isl-timeline-item {
  position: relative;
  padding: 6px 0 6px 14px;
}

.isl-timeline-item::before {
  content: "";
  position: absolute;
  inset-inline-start: -5px;
  inset-block-start: 14px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #e26b3f;
  box-shadow: 0 0 0 4px rgba(226, 107, 63, 0.26);
}

.isl-timeline-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #4f3f2f;
}

.isl-timeline-note {
  margin-top: 2px;
}

/* media */

.isl-timeline-media {
  display: grid;
  grid-template-rows: auto auto;
  gap: 10px;
}

.isl-timeline-card {
  border-radius: 20px;
  padding: 9px 9px 10px;
  background: rgba(19, 16, 22, 0.96);
  border: 1px solid rgba(246, 220, 198, 0.5);
  color: #fdf1e4;
  box-shadow: var(--iss-shadow-subtle);
  transition:
    transform var(--iss-transition-med),
    box-shadow var(--iss-transition-med);
}

.isl-timeline-card--wall {
  background: radial-gradient(circle at 50% 0, #ffbe7a33, transparent 70%),
    rgba(18, 16, 24, 0.98);
}

.isl-timeline-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.8);
}

.isl-timeline-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 350px;
  border-radius: 16px;
}

.isl-timeline-caption {
  margin-top: 7px;
  font-size: 0.82rem;
  color: rgba(253, 241, 226, 0.9);
}

/* ==============================
   Section 17: Guide bridge CTA
   ============================== */

.isl-cta-inner {
  border-radius: var(--iss-radius-xl);
  padding: 26px 22px 24px;
  background:
    radial-gradient(circle at 0 0, #ffe5d0 0, #ffe5d000 55%),
    radial-gradient(circle at 100% 0, #e5f0e8 0, #e5f0e800 55%),
    var(--iss-color-paper-alt);
  box-shadow: var(--iss-shadow-soft);
}

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

/* media column */

.isl-cta-media {
  display: grid;
  grid-template-rows: auto auto;
  gap: 10px;
}

.isl-cta-card {
  border-radius: 20px;
  padding: 9px 9px 10px;
  background: rgba(19, 16, 22, 0.96);
  border: 1px solid rgba(246, 220, 198, 0.5);
  color: #fdf1e4;
  box-shadow: var(--iss-shadow-subtle);
  transition:
    transform var(--iss-transition-med),
    box-shadow var(--iss-transition-med);
}

.isl-cta-card--page {
  background: radial-gradient(circle at 50% 0, #ffbe7a33, transparent 70%),
    rgba(18, 16, 24, 0.98);
}

.isl-cta-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.8);
}

.isl-cta-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 350px;
  border-radius: 16px;
}

.isl-cta-caption {
  margin-top: 7px;
  font-size: 0.82rem;
  color: rgba(253, 241, 226, 0.9);
}

/* text column */

.isl-cta-text {
  max-width: 520px;
}

.isl-cta-title {
  color: var(--iss-color-charcoal);
}

.isl-cta-lead {
  font-size: 0.94rem;
  color: #655342;
  margin-bottom: 10px;
}

.isl-cta-list {
  margin: 0 0 14px;
  padding-left: 18px;
  font-size: 0.86rem;
  color: #6b5945;
}

.isl-cta-list li + li {
  margin-top: 3px;
}

.isl-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
@media (max-width: 980px) {
  .isl-timeline-layout,
  .isl-cta-layout {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.3fr);
  }
}

@media (max-width: 820px) {
  .isl-timeline-layout,
  .isl-cta-layout {
    grid-template-columns: minmax(0, 1fr);
  }

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

@media (max-width: 640px) {
  .isl-timeline-inner,
  .isl-cta-inner {
    padding: 22px 18px 20px;
  }

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

/* страховка по ширине новых картинок */
.isl-timeline-image,
.isl-cta-image {
  max-width: 350px;
}