/* ============================================
   GlacierHook Outfitters — layouts.html
   Page-specific styles (sections 1–3)
   ============================================ */

/* SECTION 1: PAGE HERO LAYOUT MAP -------------------------------- */
/* safety: always show sections on layouts page */
.js-observe {
  opacity: 1;
  transform: none;
}

.gl-hero {
  background:
    radial-gradient(circle at 0% 0%, rgba(73, 178, 255, 0.32), transparent 55%),
    radial-gradient(circle at 100% 0%, rgba(84, 243, 255, 0.3), transparent 60%),
    radial-gradient(circle at 50% 100%, #020314 0, #000108 55%, #000000 100%);
  overflow: hidden;
}

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

.gl-hero-text {
  max-width: 30rem;
}

.gl-hero-title {
  font-family: var(--gh-font-display);
  font-size: 2.1rem;
  line-height: 1.15;
  margin: 0 0 0.7rem;
  color: #f7fbff;
}

.gl-hero-lead {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--gh-color-ink-soft);
}

.gl-hero-stack {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
}

.gl-hero-card {
  position: relative;
  padding: 0.8rem 0.9rem;
  border-radius: 1.5rem;
  background:
    radial-gradient(circle at 0% 0%, rgba(123, 219, 255, 0.24), transparent 60%),
    rgba(3, 14, 32, 0.98);
  border: 1px solid rgba(120, 214, 255, 0.6);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.95);
  transform-origin: center;
  transform: translateY(0) rotate(0);
  transition:
    transform var(--gh-transition-normal),
    box-shadow var(--gh-transition-normal),
    border-color var(--gh-transition-normal);
}

.gl-hero-card--day {
  transform: translateY(6px) rotate(-1.5deg);
}

.gl-hero-card--night {
  transform: translateY(-2px);
}

.gl-hero-card--crew {
  transform: translateY(6px) rotate(1.5deg);
}

.gl-hero-card:hover {
  transform: translateY(-6px) rotate(0deg);
  box-shadow: 0 24px 58px rgba(0, 0, 0, 1);
  border-color: rgba(150, 235, 255, 0.95);
}

.gl-hero-image {
  width: 100%;
}

.gl-hero-caption {
  margin: 0.45rem 0 0;
  font-size: 0.82rem;
  color: var(--gh-color-ink-muted);
}

/* SECTION 2: KIT FAMILIES GRID ----------------------------------- */

.gl-families {
  background:
    radial-gradient(circle at 0% 100%, rgba(58, 163, 255, 0.25), transparent 60%),
    linear-gradient(180deg, rgba(0, 2, 9, 0.98), rgba(1, 7, 18, 0.98));
}

.gl-families-inner {
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}

.gl-families-head {
  max-width: 30rem;
}

.gl-families-title {
  font-family: var(--gh-font-display);
  font-size: 1.9rem;
  margin: 0 0 0.6rem;
  color: #f6fbff;
}

.gl-families-lead {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--gh-color-ink-soft);
}

.gl-families-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.gl-family {
  padding: 0.9rem 1rem;
  border-radius: 1.5rem;
  background: rgba(3, 13, 30, 0.98);
  border: 1px solid rgba(119, 210, 255, 0.6);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.95);
  transition:
    transform var(--gh-transition-normal),
    box-shadow var(--gh-transition-normal),
    border-color var(--gh-transition-normal);
}

.gl-family:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 1);
  border-color: rgba(150, 235, 255, 0.95);
}

.gl-family-media {
  margin: 0 0 0.6rem;
}

.gl-family-image {
  width: 100%;
}

.gl-family-name {
  margin: 0 0 0.25rem;
  font-family: var(--gh-font-display);
  font-size: 1.02rem;
  color: #f6fbff;
}

.gl-family-text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--gh-color-ink-soft);
}

/* SECTION 3: BEFORE / AFTER STRIP -------------------------------- */

.gl-strip {
  background:
    radial-gradient(circle at 100% 0%, rgba(74, 187, 255, 0.28), transparent 55%),
    linear-gradient(180deg, rgba(1, 4, 14, 0.98), rgba(0, 0, 0, 0.98));
}

.gl-strip-inner {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.gl-strip-head {
  max-width: 26rem;
}

.gl-strip-title {
  font-family: var(--gh-font-display);
  font-size: 1.9rem;
  margin: 0;
  color: #f6fbff;
}

.gl-strip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
}

.gl-strip-card {
  padding: 0.9rem 1rem;
  border-radius: 1.5rem;
  background: rgba(3, 13, 30, 0.98);
  border: 1px solid rgba(119, 210, 255, 0.6);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.95);
  transition:
    transform var(--gh-transition-normal),
    box-shadow var(--gh-transition-normal),
    border-color var(--gh-transition-normal);
}

.gl-strip-card--before {
  transform: translateY(4px);
}

.gl-strip-card--after {
  transform: translateY(-4px);
}

.gl-strip-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 1);
  border-color: rgba(150, 235, 255, 0.95);
}

.gl-strip-image {
  width: 100%;
}

.gl-strip-caption {
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  color: var(--gh-color-ink-muted);
}

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

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

  .gl-hero-text {
    max-width: 100%;
  }

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

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

  .gl-strip-card--before,
  .gl-strip-card--after {
    transform: translateY(0);
  }
}

@media (max-width: 640px) {
  .gl-hero-title,
  .gl-families-title,
  .gl-strip-title {
    font-size: 1.6rem;
  }
}

@media (max-width: 480px) {
  .gl-hero,
  .gl-families,
  .gl-strip {
    padding-block: 3.2rem;
  }

  .gl-hero-card--day,
  .gl-hero-card--night,
  .gl-hero-card--crew {
    transform: translateY(0) rotate(0);
  }
}
/* SECTION 4: DISTANCE BANDS -------------------------------------- */

.gl-distance {
  background:
    radial-gradient(circle at 0% 100%, rgba(73, 178, 255, 0.26), transparent 60%),
    linear-gradient(180deg, rgba(0, 2, 9, 0.98), rgba(1, 7, 18, 0.98));
}

.gl-distance-inner {
  display: flex;
  flex-direction: column;
  gap: 2.1rem;
}

.gl-distance-head {
  max-width: 30rem;
}

.gl-distance-title {
  font-family: var(--gh-font-display);
  font-size: 1.9rem;
  margin: 0 0 0.6rem;
  color: #f6fbff;
}

.gl-distance-lead {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--gh-color-ink-soft);
}

.gl-distance-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}

.gl-distance-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  padding: 0.85rem 0.95rem;
  border-radius: 1.4rem;
  background: rgba(3, 13, 30, 0.98);
  border: 1px solid rgba(119, 210, 255, 0.6);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.95);
  transition:
    transform var(--gh-transition-normal),
    box-shadow var(--gh-transition-normal),
    border-color var(--gh-transition-normal);
}

.gl-distance-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 1);
  border-color: rgba(150, 235, 255, 0.95);
}

.gl-distance-media {
  margin: 0;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 1.2rem;
  overflow: hidden;
}

.gl-distance-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gl-distance-body {
  min-width: 0;
}

.gl-distance-name {
  margin: 0 0 0.15rem;
  font-family: var(--gh-font-display);
  font-size: 0.98rem;
  color: #f6fbff;
}

.gl-distance-text {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--gh-color-ink-soft);
}

/* SECTION 5: LAYER STACK PANELS ---------------------------------- */

.gl-layers {
  background:
    radial-gradient(circle at 100% 0%, rgba(84, 243, 255, 0.29), transparent 55%),
    linear-gradient(180deg, rgba(1, 4, 14, 0.98), rgba(0, 0, 0, 0.98));
}

.gl-layers-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr);
  gap: 2.4rem;
  align-items: center;
}

.gl-layers-text {
  max-width: 28rem;
}

.gl-layers-title {
  font-family: var(--gh-font-display);
  font-size: 1.9rem;
  margin: 0 0 0.6rem;
  color: #f7fbff;
}

.gl-layers-lead {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--gh-color-ink-soft);
}

.gl-layers-panels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}

.gl-layers-card {
  padding: 0.8rem 0.85rem;
  border-radius: 1.4rem;
  background: rgba(3, 13, 30, 0.98);
  border: 1px solid rgba(119, 210, 255, 0.6);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.95);
  transition:
    transform var(--gh-transition-normal),
    box-shadow var(--gh-transition-normal),
    border-color var(--gh-transition-normal);
}

.gl-layers-card--base {
  transform: translateY(4px);
}

.gl-layers-card--mid {
  transform: translateY(-2px);
}

.gl-layers-card--shell {
  transform: translateY(4px);
}

.gl-layers-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 1);
  border-color: rgba(150, 235, 255, 0.95);
}

.gl-layers-image {
  width: 100%;
}

.gl-layers-caption {
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  color: var(--gh-color-ink-muted);
}

/* SECTION 6: ROD RACK OVERVIEW ----------------------------------- */

.gl-rack {
  background:
    radial-gradient(circle at 50% 0%, rgba(95, 210, 255, 0.3), transparent 60%),
    linear-gradient(180deg, rgba(1, 4, 15, 0.98), rgba(0, 0, 0, 0.98));
}

.gl-rack-inner {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.gl-rack-head {
  max-width: 28rem;
}

.gl-rack-title {
  font-family: var(--gh-font-display);
  font-size: 1.9rem;
  margin: 0;
  color: #f6fbff;
}

.gl-rack-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}

.gl-rack-slot {
  padding: 0.9rem 0.95rem;
  border-radius: 1.4rem;
  background: rgba(3, 13, 30, 0.98);
  border: 1px solid rgba(119, 210, 255, 0.6);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.95);
  transition:
    transform var(--gh-transition-normal),
    box-shadow var(--gh-transition-normal),
    border-color var(--gh-transition-normal);
}

.gl-rack-slot:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 1);
  border-color: rgba(150, 235, 255, 0.95);
}

.gl-rack-media {
  margin: 0 0 0.55rem;
}

.gl-rack-image {
  width: 100%;
}

.gl-rack-name {
  margin: 0 0 0.2rem;
  font-family: var(--gh-font-display);
  font-size: 1.02rem;
  color: #f6fbff;
}

.gl-rack-text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--gh-color-ink-soft);
}
@media (max-width: 960px) {
  .gl-distance-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .gl-layers-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .gl-layers-panels {
    grid-template-columns: minmax(0, 1fr);
  }

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

@media (max-width: 640px) {
  .gl-distance-title,
  .gl-layers-title,
  .gl-rack-title {
    font-size: 1.6rem;
  }
}

@media (max-width: 480px) {
  .gl-distance,
  .gl-layers,
  .gl-rack {
    padding-block: 3.2rem;
  }
}
/* SECTION 7: SLED LANE STRIP ------------------------------------- */

.gl-sled {
  background:
    radial-gradient(circle at 0% 0%, rgba(73, 178, 255, 0.26), transparent 60%),
    linear-gradient(180deg, rgba(0, 2, 9, 0.98), rgba(1, 7, 18, 0.98));
}

.gl-sled-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr);
  gap: 2.4rem;
  align-items: center;
}

.gl-sled-text {
  max-width: 30rem;
}

.gl-sled-title {
  font-family: var(--gh-font-display);
  font-size: 1.9rem;
  margin: 0 0 0.6rem;
  color: #f6fbff;
}

.gl-sled-copy {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--gh-color-ink-soft);
}

.gl-sled-list {
  margin: 0;
  padding-left: 1.1rem;
}

.gl-sled-item {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--gh-color-ink-main);
}

.gl-sled-item + .gl-sled-item {
  margin-top: 0.2rem;
}

.gl-sled-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
}

.gl-sled-card {
  padding: 0.8rem 0.85rem;
  border-radius: 1.5rem;
  background: rgba(3, 13, 30, 0.98);
  border: 1px solid rgba(119, 210, 255, 0.6);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.95);
  transition:
    transform var(--gh-transition-normal),
    box-shadow var(--gh-transition-normal),
    border-color var(--gh-transition-normal);
}

.gl-sled-card--front {
  transform: translateY(4px);
}

.gl-sled-card--rear {
  transform: translateY(-2px);
}

.gl-sled-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 1);
  border-color: rgba(150, 235, 255, 0.95);
}

.gl-sled-image {
  width: 100%;
  max-width: 350px;
  margin-inline: auto;
  display: block;
}

.gl-sled-caption {
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  color: var(--gh-color-ink-muted);
}

/* SECTION 8: HOLE CLUSTER GRID ----------------------------------- */

.gl-clusters {
  background:
    radial-gradient(circle at 100% 0%, rgba(84, 243, 255, 0.29), transparent 55%),
    linear-gradient(180deg, rgba(1, 4, 14, 0.98), rgba(0, 0, 0, 0.98));
}

.gl-clusters-inner {
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}

.gl-clusters-head {
  max-width: 32rem;
}

.gl-clusters-title {
  font-family: var(--gh-font-display);
  font-size: 1.9rem;
  margin: 0 0 0.6rem;
  color: #f6fbff;
}

.gl-clusters-lead {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--gh-color-ink-soft);
}

.gl-clusters-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-auto-rows: auto;
  gap: 1.1rem;
}

.gl-cluster {
  padding: 0.8rem 0.9rem;
  border-radius: 1.5rem;
  background: rgba(3, 13, 30, 0.98);
  border: 1px solid rgba(119, 210, 255, 0.6);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.95);
}

.gl-cluster--map {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.gl-cluster--top {
  grid-column: 2;
  grid-row: 1;
}

.gl-cluster--shelter {
  grid-column: 2;
  grid-row: 2;
}

.gl-cluster-image {
  width: 100%;
  max-width: 350px;
  margin-inline: auto;
  display: block;
}

.gl-cluster-caption {
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  color: var(--gh-color-ink-muted);
}

/* SECTION 9: DOORWAY LISTS --------------------------------------- */

.gl-check {
  background:
    radial-gradient(circle at 50% 0%, rgba(95, 210, 255, 0.3), transparent 60%),
    linear-gradient(180deg, rgba(1, 4, 15, 0.98), rgba(0, 0, 0, 0.98));
}

.gl-check-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr);
  gap: 2.4rem;
  align-items: center;
}

.gl-check-text {
  max-width: 30rem;
}

.gl-check-title {
  font-family: var(--gh-font-display);
  font-size: 1.9rem;
  margin: 0 0 0.6rem;
  color: #f6fbff;
}

.gl-check-copy {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--gh-color-ink-soft);
}

.gl-check-list {
  margin: 0;
  padding-left: 1.1rem;
}

.gl-check-item {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--gh-color-ink-main);
}

.gl-check-item + .gl-check-item {
  margin-top: 0.2rem;
}

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

.gl-check-card {
  padding: 0.8rem 0.85rem;
  border-radius: 1.5rem;
  background: rgba(3, 13, 30, 0.98);
  border: 1px solid rgba(119, 210, 255, 0.6);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.95);
}

.gl-check-card--door {
  transform: translateY(4px);
}

.gl-check-card--phone {
  transform: translateY(-2px);
}

.gl-check-image {
  width: 100%;
  max-width: 350px;
  margin-inline: auto;
  display: block;
}

.gl-check-caption {
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  color: var(--gh-color-ink-muted);
}
@media (max-width: 960px) {
  .gl-sled-inner {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .gl-cluster--map,
  .gl-cluster--top,
  .gl-cluster--shelter {
    grid-column: 1;
    grid-row: auto;
  }

  .gl-check-inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .gl-sled-title,
  .gl-clusters-title,
  .gl-check-title {
    font-size: 1.6rem;
  }
}

@media (max-width: 480px) {
  .gl-sled,
  .gl-clusters,
  .gl-check {
    padding-block: 3.2rem;
  }

  .gl-sled-card--front,
  .gl-sled-card--rear,
  .gl-check-card--door,
  .gl-check-card--phone {
    transform: translateY(0);
  }
}
/* SECTION 10: TEMPERATURE BANDS ---------------------------------- */

.gl-temp {
  background:
    radial-gradient(circle at 0% 100%, rgba(73, 178, 255, 0.26), transparent 60%),
    linear-gradient(180deg, rgba(0, 2, 9, 0.98), rgba(1, 7, 18, 0.98));
}

.gl-temp-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr);
  gap: 2.4rem;
  align-items: center;
}

.gl-temp-text {
  max-width: 30rem;
}

.gl-temp-title {
  font-family: var(--gh-font-display);
  font-size: 1.9rem;
  margin: 0 0 0.6rem;
  color: #f6fbff;
}

.gl-temp-copy {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--gh-color-ink-soft);
}

.gl-temp-list {
  margin: 0;
  padding-left: 1.1rem;
}

.gl-temp-item {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--gh-color-ink-main);
}

.gl-temp-item + .gl-temp-item {
  margin-top: 0.2rem;
}

.gl-temp-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
}

.gl-temp-card {
  padding: 0.8rem 0.85rem;
  border-radius: 1.5rem;
  background: rgba(3, 13, 30, 0.98);
  border: 1px solid rgba(119, 210, 255, 0.6);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.95);
  transition:
    transform var(--gh-transition-normal),
    box-shadow var(--gh-transition-normal),
    border-color var(--gh-transition-normal);
}

.gl-temp-card--scale {
  transform: translateY(4px);
}

.gl-temp-card--camp {
  transform: translateY(-2px);
}

.gl-temp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 1);
  border-color: rgba(150, 235, 255, 0.95);
}

.gl-temp-image {
  width: 100%;
  max-width: 350px;
  margin-inline: auto;
  display: block;
}

.gl-temp-caption {
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  color: var(--gh-color-ink-muted);
}

/* SECTION 11: WALL SHELF & HOOKS --------------------------------- */

.gl-shelf {
  background:
    radial-gradient(circle at 100% 0%, rgba(84, 243, 255, 0.29), transparent 55%),
    linear-gradient(180deg, rgba(1, 4, 14, 0.98), rgba(0, 0, 0, 0.98));
}

.gl-shelf-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.1fr);
  gap: 2.4rem;
  align-items: center;
}

.gl-shelf-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
}

.gl-shelf-card {
  padding: 0.8rem 0.85rem;
  border-radius: 1.5rem;
  background: rgba(3, 13, 30, 0.98);
  border: 1px solid rgba(119, 210, 255, 0.6);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.95);
  transition:
    transform var(--gh-transition-normal),
    box-shadow var(--gh-transition-normal),
    border-color var(--gh-transition-normal);
}

.gl-shelf-card--rods {
  transform: translateY(4px);
}

.gl-shelf-card--boots {
  transform: translateY(-2px);
}

.gl-shelf-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 1);
  border-color: rgba(150, 235, 255, 0.95);
}

.gl-shelf-image {
  width: 100%;
  max-width: 350px;
  margin-inline: auto;
  display: block;
}

.gl-shelf-caption {
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  color: var(--gh-color-ink-muted);
}

.gl-shelf-text {
  max-width: 30rem;
}

.gl-shelf-title {
  font-family: var(--gh-font-display);
  font-size: 1.9rem;
  margin: 0 0 0.6rem;
  color: #f6fbff;
}

.gl-shelf-copy {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--gh-color-ink-soft);
}

/* SECTION 12: SESSION FLOW LINES --------------------------------- */

.gl-flow {
  background:
    radial-gradient(circle at 50% 0%, rgba(95, 210, 255, 0.3), transparent 60%),
    linear-gradient(180deg, rgba(1, 4, 15, 0.98), rgba(0, 0, 0, 0.98));
}

.gl-flow-inner {
  display: flex;
  flex-direction: column;
  gap: 2.1rem;
}

.gl-flow-head {
  max-width: 32rem;
}

.gl-flow-title {
  font-family: var(--gh-font-display);
  font-size: 1.9rem;
  margin: 0 0 0.6rem;
  color: #f6fbff;
}

.gl-flow-lead {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--gh-color-ink-soft);
}

.gl-flow-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}

.gl-flow-step {
  padding: 0.9rem 0.95rem;
  border-radius: 1.5rem;
  background: rgba(3, 13, 30, 0.98);
  border: 1px solid rgba(119, 210, 255, 0.6);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.95);
  display: grid;
  grid-template-columns: auto minmax(0, 1.2fr);
  gap: 0.8rem;
  align-items: center;
}

.gl-flow-media {
  margin: 0;
  width: 5.2rem;
  height: 5.2rem;
  border-radius: 1.6rem;
  overflow: hidden;
}

.gl-flow-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gl-flow-body {
  min-width: 0;
}

.gl-flow-name {
  margin: 0 0 0.25rem;
  font-family: var(--gh-font-display);
  font-size: 1.02rem;
  color: #f6fbff;
}

.gl-flow-text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--gh-color-ink-soft);
}
@media (max-width: 960px) {
  .gl-temp-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .gl-shelf-inner {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .gl-flow-step {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .gl-temp-title,
  .gl-shelf-title,
  .gl-flow-title {
    font-size: 1.6rem;
  }
}

@media (max-width: 480px) {
  .gl-temp,
  .gl-shelf,
  .gl-flow {
    padding-block: 3.2rem;
  }

  .gl-temp-card--scale,
  .gl-temp-card--camp,
  .gl-shelf-card--rods,
  .gl-shelf-card--boots {
    transform: translateY(0);
  }
}
/* SECTION 13: BUNDLE LABEL RING ---------------------------------- */

.gl-labels {
  background:
    radial-gradient(circle at 0% 0%, rgba(73, 178, 255, 0.26), transparent 60%),
    linear-gradient(180deg, rgba(0, 2, 9, 0.98), rgba(1, 7, 18, 0.98));
}

.gl-labels-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr);
  gap: 2.4rem;
  align-items: center;
}

.gl-labels-text {
  max-width: 30rem;
}

.gl-labels-title {
  font-family: var(--gh-font-display);
  font-size: 1.9rem;
  margin: 0 0 0.6rem;
  color: #f6fbff;
}

.gl-labels-copy {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--gh-color-ink-soft);
}

.gl-labels-ring {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
}

.gl-labels-card {
  padding: 0.8rem 0.9rem;
  border-radius: 1.5rem;
  background: rgba(3, 13, 30, 0.98);
  border: 1px solid rgba(119, 210, 255, 0.6);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.95);
  transition:
    transform var(--gh-transition-normal),
    box-shadow var(--gh-transition-normal),
    border-color var(--gh-transition-normal);
}

.gl-labels-card--handle {
  transform: translateY(4px);
}

.gl-labels-card--card {
  transform: translateY(-2px);
}

.gl-labels-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 1);
  border-color: rgba(150, 235, 255, 0.95);
}

.gl-labels-image {
  width: 100%;
  max-width: 350px;
  margin-inline: auto;
  display: block;
}

.gl-labels-caption {
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  color: var(--gh-color-ink-muted);
}

/* SECTION 14: PACKING MISTAKES & FIXES --------------------------- */

.gl-mistakes {
  background:
    radial-gradient(circle at 100% 0%, rgba(84, 243, 255, 0.29), transparent 55%),
    linear-gradient(180deg, rgba(1, 4, 14, 0.98), rgba(0, 0, 0, 0.98));
}

.gl-mistakes-inner {
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}

.gl-mistakes-head {
  max-width: 32rem;
}

.gl-mistakes-title {
  font-family: var(--gh-font-display);
  font-size: 1.9rem;
  margin: 0 0 0.6rem;
  color: #f6fbff;
}

.gl-mistakes-lead {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--gh-color-ink-soft);
}

.gl-mistakes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}

.gl-mistakes-card {
  padding: 0.9rem 0.95rem;
  border-radius: 1.5rem;
  background: rgba(3, 13, 30, 0.98);
  border: 1px solid rgba(119, 210, 255, 0.6);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.95);
  display: grid;
  grid-template-columns: minmax(0, 1.3fr);
  gap: 0.75rem;
  align-items: start;
  transition:
    transform var(--gh-transition-normal),
    box-shadow var(--gh-transition-normal),
    border-color var(--gh-transition-normal);
}

.gl-mistakes-card--wide {
  transform: translateY(4px);
}

.gl-mistakes-card--strip {
  transform: translateY(-2px);
}

.gl-mistakes-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 1);
  border-color: rgba(150, 235, 255, 0.95);
}

.gl-mistakes-media {
  margin: 0;
}

.gl-mistakes-image {
  width: 100%;
  max-width: 350px;
  margin-inline: auto;
  display: block;
}

.gl-mistakes-body {
  min-width: 0;
}

.gl-mistakes-name {
  margin: 0 0 0.25rem;
  font-family: var(--gh-font-display);
  font-size: 1.02rem;
  color: #f6fbff;
}

.gl-mistakes-text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--gh-color-ink-soft);
}

/* SECTION 15: SNOW NOTE STRIPS ----------------------------------- */

.gl-notes {
  background:
    radial-gradient(circle at 50% 0%, rgba(95, 210, 255, 0.3), transparent 60%),
    linear-gradient(180deg, rgba(1, 4, 15, 0.98), rgba(0, 0, 0, 0.98));
}

.gl-notes-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.1fr);
  gap: 2.4rem;
  align-items: center;
}

.gl-notes-text {
  max-width: 30rem;
}

.gl-notes-title {
  font-family: var(--gh-font-display);
  font-size: 1.9rem;
  margin: 0 0 0.6rem;
  color: #f6fbff;
}

.gl-notes-copy {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--gh-color-ink-soft);
}

.gl-notes-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
}

.gl-notes-card {
  padding: 0.8rem 0.85rem;
  border-radius: 1.5rem;
  background: rgba(3, 13, 30, 0.98);
  border: 1px solid rgba(119, 210, 255, 0.6);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.95);
}

.gl-notes-card--track {
  transform: translateY(4px);
}

.gl-notes-card--margin {
  transform: translateY(-2px);
}

.gl-notes-image {
  width: 100%;
  max-width: 350px;
  margin-inline: auto;
  display: block;
}

.gl-notes-caption {
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  color: var(--gh-color-ink-muted);
}

/* SECTION 16: CREW CIRCLE LAYOUT --------------------------------- */

.gl-crew {
  background:
    radial-gradient(circle at 0% 100%, rgba(73, 178, 255, 0.26), transparent 60%),
    linear-gradient(180deg, rgba(0, 2, 9, 0.98), rgba(1, 7, 18, 0.98));
}

.gl-crew-inner {
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}

.gl-crew-head {
  max-width: 32rem;
}

.gl-crew-title {
  font-family: var(--gh-font-display);
  font-size: 1.9rem;
  margin: 0 0 0.6rem;
  color: #f6fbff;
}

.gl-crew-lead {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--gh-color-ink-soft);
}

.gl-crew-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}

.gl-crew-card {
  padding: 0.9rem 0.95rem;
  border-radius: 1.5rem;
  background: rgba(3, 13, 30, 0.98);
  border: 1px solid rgba(119, 210, 255, 0.6);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.95);
}

.gl-crew-card--overhead {
  transform: translateY(4px);
}

.gl-crew-card--shelter {
  transform: translateY(-2px);
}

.gl-crew-image {
  width: 100%;
  max-width: 350px;
  margin-inline: auto;
  display: block;
}

.gl-crew-caption {
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  color: var(--gh-color-ink-muted);
}

/* SECTION 17: PICK YOUR LANE CTA --------------------------------- */

.gl-cta {
  background:
    radial-gradient(circle at 100% 0%, rgba(84, 243, 255, 0.29), transparent 55%),
    linear-gradient(180deg, rgba(1, 4, 14, 0.98), rgba(0, 0, 0, 0.98));
}

.gl-cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr);
  gap: 2.6rem;
  align-items: center;
}

.gl-cta-text {
  max-width: 32rem;
}

.gl-cta-title {
  font-family: var(--gh-font-display);
  font-size: 1.9rem;
  margin: 0 0 0.6rem;
  color: #f6fbff;
}

.gl-cta-copy {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--gh-color-ink-soft);
}

.gl-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 0.3rem;
}

.gl-cta-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
}

.gl-cta-card {
  padding: 0.8rem 0.85rem;
  border-radius: 1.5rem;
  background: rgba(3, 13, 30, 0.98);
  border: 1px solid rgba(119, 210, 255, 0.6);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.95);
}

.gl-cta-card--day {
  transform: translateY(4px);
}

.gl-cta-card--night {
  transform: translateY(-2px);
}

.gl-cta-image {
  width: 100%;
  max-width: 350px;
  margin-inline: auto;
  display: block;
}

.gl-cta-caption {
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  color: var(--gh-color-ink-muted);
}
@media (max-width: 960px) {
  .gl-labels-inner,
  .gl-notes-inner,
  .gl-cta-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .gl-mistakes-grid,
  .gl-crew-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .gl-labels-title,
  .gl-mistakes-title,
  .gl-notes-title,
  .gl-crew-title,
  .gl-cta-title {
    font-size: 1.6rem;
  }
}

@media (max-width: 480px) {
  .gl-labels,
  .gl-mistakes,
  .gl-notes,
  .gl-crew,
  .gl-cta {
    padding-block: 3.2rem;
  }

  .gl-labels-card--handle,
  .gl-labels-card--card,
  .gl-mistakes-card--wide,
  .gl-mistakes-card--strip,
  .gl-notes-card--track,
  .gl-notes-card--margin,
  .gl-crew-card--overhead,
  .gl-crew-card--shelter,
  .gl-cta-card--day,
  .gl-cta-card--night {
    transform: translateY(0);
  }

  .gl-cta-actions {
    flex-direction: column;
    align-items: flex-start;
  }
}