/*
 * Alipsa Ventures public-site content widths.
 * Section backgrounds, hero images and decorative full-bleed elements stay
 * full width; their content areas are centered at 80% on large screens.
 * Only outer wrappers are included. Nested grids retain their full width.
 */

:root {
  --alipsa-page-content-width: 80%;
}

:where(
  .container,
  .hero-search-outer,
  .pkg-hero-inner,
  .pkg-body > .pkg-layout,
  .dest-hero-inner,
  .dest-container,
  .blog-hero-inner,
  .blog-layout,
  .contact-hero-inner,
  .contact-inner,
  .about-hero-inner,
  .ac-hero-inner,
  .ac-layout,
  .pp-hero-inner,
  .pp-layout,
  .post-hero-inner,
  .post-layout,
  .gallery-filters,
  .gallery-section,
  .dp-hero-content,
  .dp-breadcrumb,
  .dp-stats-inner,
  .dp-body,
  .dp-related-inner,
  .sf-newsletter-inner,
  .sf-body,
  .sf-map-inner,
  .sf-bottom-inner,
  .alipsa-policy-container
) {
  box-sizing: border-box !important;
  width: var(--alipsa-page-content-width) !important;
  max-width: none !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

/* A shared container nested inside another content wrapper must not become 64%. */
:where(.container, .pkg-body > .pkg-layout, .dp-body, .blog-layout, .post-layout) .container {
  width: 100% !important;
}

/* Use available space on tablets and phones, without edge-to-edge text. */
@media (max-width: 1100px) {
  :root { --alipsa-page-content-width: 90%; }
}

@media (max-width: 768px) {
  :root { --alipsa-page-content-width: 94%; }
}

@media (max-width: 480px) {
  :root { --alipsa-page-content-width: calc(100% - 28px); }
}