/* Categorized guide layout — index → subpage panel + back button.
   Light defaults + .guide-palette-night dark overrides. Brand green #0b4f55,
   gold #c5a059 / night #d7b56d. */

.guide-subpage {
  padding-top: 1.3rem;
  padding-bottom: 2.2rem;
}

.guide-subpage__back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 1.1rem;
  padding: 0.6rem 1.05rem;
  border: 1px solid rgba(11, 79, 85, 0.22);
  border-radius: 999px;
  background: #ffffff;
  color: #0b4f55;
  font: inherit;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.guide-subpage__back:hover,
.guide-subpage__back:focus-visible {
  background: #0b4f55;
  color: #ffffff;
  border-color: #0b4f55;
  outline: none;
}

.guide-subpage__slot > .is-subpage-open {
  display: block;
  /* The moved block often carries its own top margin; normalise it so it sits
     cleanly at the top of the subpage. */
  margin-top: 0;
}

/* R3-12: keep the subpage a single, centred, full-width column. Some variants
   (e.g. photo/airbnb) lay sections + recommendations out in a main+rail grid,
   which pushed a lone moved block into a narrow right column with the left half
   empty. Neutralise that grid inside the subpage and centre the block. */
.guide-subpage .main-container,
.guide-subpage__slot {
  display: block;
}
.guide-subpage__slot > * {
  width: 100% !important;
  max-width: 880px;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
  grid-column: auto !important;
}

/* Night / boutique dark mode */
.guide-palette-night .guide-subpage__back {
  background: rgba(255, 255, 255, 0.06);
  color: #f4efe4;
  border-color: rgba(255, 255, 255, 0.18);
}
.guide-palette-night .guide-subpage__back:hover,
.guide-palette-night .guide-subpage__back:focus-visible {
  background: #d7b56d;
  color: #16323a;
  border-color: #d7b56d;
}