/* GoPatooh public layout standard – full-width backgrounds, centred content.
   Desktop content occupies 80% of viewport; tablets and phones gain room to breathe. */
:root {
  --gp-content-width: 80vw;
  --gp-sticky-offset: 128px;
  --gp-readmore-height: 360px;
}
/* All major public-page section interiors follow one horizontal rhythm. */
body .shell,
body .public-shell,
body .tc-front-shell,
body .ol-footer-shell,
body .start-here-shell,
body .destination-catalog-width,
body .package-page-width,
body .destination-page-width,
body .experience-page-width,
body .hotel-detail-width,
body .hotel-page-width,
body .eu-about-width,
body .legal-page-width,
body .blog-index-width,
body .blog-article-layout,
body .experience-catalog-width,
body .wishlist-page-width,
body .gallery-page .public-shell,
body .gopato-taxonomy-hero .public-shell,
body .gopato-taxonomy-content,
body .gopato-taxonomy-cta .public-shell,
body .quote-share-width {
  width: var(--gp-content-width) !important;
  max-width: none !important;
  margin-left: auto;
  margin-right: auto;
  min-width: 0;
}
/* Do not narrow the introduction *again* inside its already centred section. */
body .home-intro .home-intro-content {width: 100%;max-width: none;}
/* Nested section grids must be allowed to shrink instead of escaping the page. */
body .public-detail,body .package-main-layout,body .gopato-taxonomy-editorial,
body .destination-content-grid,body .blog-article-layout,body .hotel-overview-layout,
body .tours-catalog-layout,body .legal-layout,body .start-here-guide-grid {min-width:0;}
body .public-detail > *,body .package-main-layout > *,body .gopato-taxonomy-editorial > *,
body .blog-article-layout > *,body .hotel-overview-layout > *,body .tours-catalog-layout > * {min-width:0;}
body .public-prose img,body .gopato-taxonomy-editorial-content img,body .blog-article-prose img,
body .destination-prose img,body .eu-about-prose img {max-width:100%;height:auto;}

/* Floating sidebars: they move with their section, never cover adjacent content.
   Only an outer rail is sticky. Its child stays in normal flow. */
@media (min-width:1100px) {
  body .package-sidebar,body .destination-sidebar,body .experience-sidebar,
  body .public-detail > .public-aside,body .blog-sidebar,body .gopato-category-side,
  body .tours-filter-panel,body .hotel-filter-panel,body .start-here-index,
  body .legal-sidebar-inner,body .hotel-booking-card,body .eu-about-licence-card {
    position: sticky !important;
    top: var(--gp-sticky-offset) !important;
    align-self: start;
    height: max-content;
    min-width: 0;
  }
  body .package-sidebar-inner,body .destination-sidebar-inner,body .experience-sidebar-inner,
  body .blog-sidebar-inner {
    position: static !important;
    top: auto !important;
    max-height: calc(100dvh - var(--gp-sticky-offset) - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  body .gopato-category-side,body .legal-sidebar-inner,body .tours-filter-panel,
  body .hotel-filter-panel,body .hotel-booking-card {
    max-height: calc(100dvh - var(--gp-sticky-offset) - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}
/* Less lateral space: stack the rail and keep it non-sticky to prevent cramped text. */
@media (max-width:1099px) {
  :root {--gp-content-width:92vw;}
  body .package-sidebar,body .destination-sidebar,body .experience-sidebar,
  body .public-detail > .public-aside,body .blog-sidebar,body .gopato-category-side,
  body .tours-filter-panel,body .hotel-filter-panel,body .start-here-index,
  body .legal-sidebar-inner,body .hotel-booking-card,body .eu-about-licence-card {
    position: static !important;top:auto !important;height:auto;max-height:none;overflow:visible;
  }
  body .package-sidebar-inner,body .destination-sidebar-inner,body .experience-sidebar-inner,
  body .blog-sidebar-inner {position:static !important;top:auto !important;max-height:none;overflow:visible;}
  body .gopato-taxonomy-editorial {grid-template-columns: minmax(0,1fr);}
}
@media (max-width:767px) {
  :root {--gp-content-width:calc(100% - 28px);--gp-readmore-height:280px;}
  body .gopato-taxonomy-editorial-content,body .destination-prose,body .public-prose {overflow-wrap:break-word;}
  body .gopato-taxonomy-hero,body .gopato-browse-section {min-width:0;}
}
@media (max-width:360px) { :root {--gp-content-width:calc(100% - 20px);} }

/* Read More is progressive enhancement: no JS means full text remains visible. */
body .gp-readmore-content {position:relative;min-width:0;}
body .gp-readmore-content.gp-readmore-clipped {max-height:var(--gp-readmore-height);overflow:hidden;}
body .gp-readmore-content.gp-readmore-expanded {max-height:none;overflow:visible;}
body .gp-readmore-button {
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  margin:15px 0 8px;padding:10px 17px;min-height:42px;
  border:1px solid #0B513A;border-radius:8px;background:#fff;color:#0B513A;
  font:inherit;font-size:13px;font-weight:700;line-height:1.3;cursor:pointer;
}
body .gp-readmore-button:hover {background:#0B513A;color:#fff;}
body .gp-readmore-button:focus-visible {outline:3px solid #EE6A04;outline-offset:3px;}
body .gp-readmore-button .gp-readmore-icon {display:inline-block;font-size:17px;line-height:1;}
body .gp-readmore-button[aria-expanded="true"] .gp-readmore-icon {transform:rotate(180deg);}
@media (prefers-reduced-motion:reduce) {body .gp-readmore-button .gp-readmore-icon{transition:none;}}


/* GoPatooh Read More alignment — one presentation across all public editorial pages.
   Individual view scripts keep managing visibility; this stylesheet only unifies layout.
   The [hidden] rule is essential: display:inline-flex must never reveal a hidden button. */
body .gp-readmore-button[hidden],
body .package-description-toggle[hidden],
body .experience-description-toggle[hidden] {display:none!important;}

body .gp-readmore-button,
body.public-inner .package-description-toggle,
body.public-inner .experience-page-scope .experience-description-toggle,
body .gopato-category-read-more > summary,
body .gopato-variation-readmore > summary {
  box-sizing:border-box;
  display:inline-flex;
  width:auto;
  max-width:100%;
  min-height:42px;
  align-items:center;
  justify-content:center;
  gap:10px;
  vertical-align:middle;
  margin:12px 0 0!important;
  padding:10px 16px;
  border:1px solid #b6cfc3;
  border-radius:10px;
  background:#fff;
  color:#0B513A;
  font-family:var(--site-body-font,inherit)!important;
  font-size:13px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:0;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
  box-shadow:none;
  transform:none;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
/* The Experience button must remain hidden until its own JS marks the shell ready. */
body.public-inner .experience-page-scope .experience-description-toggle {display:none;}
body.public-inner .experience-page-scope .experience-description-shell.is-ready .experience-description-toggle {display:inline-flex;}
body .gp-readmore-button {float:none;clear:both;flex:0 0 auto;align-self:flex-start;}
body .gp-readmore-button:hover,
body.public-inner .package-description-toggle:hover,
body.public-inner .experience-page-scope .experience-description-toggle:hover,
body .gopato-category-read-more > summary:hover,
body .gopato-variation-readmore > summary:hover {
  color:#fff;
  background:#0B513A;
  border-color:#0B513A;
  transform:none;
}
body .gp-readmore-button:focus-visible,
body.public-inner .package-description-toggle:focus-visible,
body.public-inner .experience-page-scope .experience-description-toggle:focus-visible,
body .gopato-category-read-more > summary:focus-visible,
body .gopato-variation-readmore > summary:focus-visible {
  outline:2px solid #EE6A04;
  outline-offset:3px;
}
body .gp-readmore-icon,
body .package-description-toggle i,
body .experience-description-toggle i,
body .gopato-category-read-more > summary i,
body .gopato-variation-readmore > summary i {
  display:inline-block;
  flex:0 0 auto;
  margin:0;
  font-size:13px;
  line-height:1;
  color:inherit;
  transition:transform .18s ease;
}
/* Draw the generic chevron in CSS instead of using a misaligned font glyph. */
body .gp-readmore-button .gp-readmore-icon {
  width:8px;
  height:8px;
  margin-top:-3px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
}
body .gp-readmore-button[aria-expanded="true"] .gp-readmore-icon {
  margin-top:3px;
  transform:rotate(225deg);
}
body .gopato-category-read-more[open] > summary i,
body .gopato-variation-readmore[open] > summary i,
body.public-inner .package-description-toggle[aria-expanded="true"] i,
body.public-inner .experience-page-scope .experience-description-shell.is-expanded .experience-description-toggle i {
  transform:rotate(180deg);
}
/* Keep the control with the text, not in an artificially tall footer area. */
body.public-inner .destination-card > .gp-readmore-button,
body.public-inner .destination-prose + .gp-readmore-button,
body .gp-readmore-content + .gp-readmore-button {
  margin-top:12px!important;
  margin-bottom:0!important;
}
body .gopato-category-read-more,
body .gopato-variation-readmore {
  margin:14px 0 0;
  padding:0;
  border:0;
  background:transparent;
}
body .gopato-category-read-more > summary,
body .gopato-variation-readmore > summary {
  list-style:none;
  white-space:normal;
  max-width:100%;
}
body .gopato-category-read-more > summary::-webkit-details-marker,
body .gopato-variation-readmore > summary::-webkit-details-marker {display:none;}
body .gopato-category-read-more-body,
body .gopato-variation-readmore > p {padding-top:14px;margin-top:0;}
@media(max-width:767px){
  body .gp-readmore-button,
  body.public-inner .package-description-toggle,
  body.public-inner .experience-page-scope .experience-description-toggle,
  body .gopato-category-read-more > summary,
  body .gopato-variation-readmore > summary {
    min-height:44px;
    padding:11px 14px;
    font-size:12px;
  }
  body .gp-readmore-button {max-width:100%;}
}
@media(prefers-reduced-motion:reduce){
  body .gp-readmore-button,
  body .gp-readmore-button .gp-readmore-icon,
  body .gopato-category-read-more > summary i,
  body .gopato-variation-readmore > summary i {transition:none!important;}
}