/*
 * Tandem Guru Native Media Sidebar v1.7.8
 * Keeps Gantry/Joomla wrappers quiet but preserves the native geometry,
 * aspect ratios, spacing and internal design of the embedded modules.
 */

:root {
  --tg-sidebar-gap: clamp(2rem, 3vw, 3rem);
}

#g-aside {
  position: relative !important;
  overflow: visible !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#g-aside::before {
  content: '' !important;
  position: absolute !important;
  z-index: -1 !important;
  inset: -1rem -.65rem !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: 2rem !important;
  background:
    radial-gradient(circle at 88% 7%, rgba(244, 212, 95, .15) 0 4.5rem, transparent 4.75rem),
    radial-gradient(circle at 8% 58%, rgba(227, 78, 154, .07), transparent 10rem),
    linear-gradient(155deg, rgba(226, 249, 244, .42), rgba(248, 245, 255, .30)) !important;
  box-shadow: none !important;
}

#g-aside::after {
  content: 'SURF · LOVE · FLY' !important;
  position: absolute !important;
  z-index: -1 !important;
  top: 5rem !important;
  right: -1.1rem !important;
  color: rgba(8, 43, 49, .04) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: clamp(1.2rem, 2vw, 2rem) !important;
  letter-spacing: .09em !important;
  writing-mode: vertical-rl;
}

/* Only the outer Joomla/Gantry wrappers are neutralised. */
#g-aside > .g-content,
#g-aside .g-content {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

#g-aside .platform-content,
#g-aside .moduletable {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  color: #173f45 !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
  filter: none !important;
  transform: none !important;
  box-sizing: border-box !important;
}

/* Reliable spacing for separate Joomla modules. */
#g-aside .platform-content + .platform-content,
#g-aside .moduletable + .moduletable,
#g-aside .g-content > * + * {
  margin-top: var(--tg-sidebar-gap) !important;
}

/* If rating and video happen to be rendered inside one wrapper, separate them there too. */
#g-aside .platform-content:has(.tggr):has(iframe[src*='youtube']) .tggr,
#g-aside .platform-content:has(.tggr):has(iframe[src*='youtu.be']) .tggr,
#g-aside .moduletable:has(.tggr):has(iframe[src*='youtube']) .tggr,
#g-aside .moduletable:has(.tggr):has(iframe[src*='youtu.be']) .tggr {
  margin-bottom: var(--tg-sidebar-gap) !important;
}

#g-aside .platform-content::before,
#g-aside .platform-content::after,
#g-aside .moduletable::before,
#g-aside .moduletable::after {
  content: none !important;
  display: none !important;
}

/* Preserve each module's own design and dimensions. */
#g-aside .tggr,
#g-aside .tgvc,
#g-aside .tg-skysurf {
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Restore the Google rating geometry expected by its module stylesheet. */
#g-aside .tggr {
  width: 100% !important;
  max-width: min(100%, 520px) !important;
  height: auto !important;
}

#g-aside .tggr__shell {
  width: 100% !important;
  max-width: 430px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Do not globally reset SVG/canvas heights: those are part of module artwork. */
#g-aside img,
#g-aside picture {
  max-width: 100% !important;
  height: auto !important;
}

#g-aside iframe,
#g-aside video {
  display: block;
  max-width: 100% !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* YouTube embeds keep a true 16:9 frame instead of collapsing to 150px. */
#g-aside iframe[src*='youtube.com'],
#g-aside iframe[src*='youtube-nocookie.com'],
#g-aside iframe[src*='youtu.be'] {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 16 / 9 !important;
  margin: 0 auto !important;
  border-radius: .85rem !important;
}

#g-aside lite-youtube,
#g-aside .youtube-player,
#g-aside .youtube-embed,
#g-aside .video-responsive {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
}

#g-aside lite-youtube iframe,
#g-aside .youtube-player iframe,
#g-aside .youtube-embed iframe,
#g-aside .video-responsive iframe {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
}

#g-aside .g-title,
#g-aside h2,
#g-aside h3,
#g-aside h4 {
  margin: 0 0 .85rem !important;
  padding: 0 !important;
  color: #9f4335 !important;
  text-shadow: none !important;
}

@media only all and (max-width: 63.99rem) {
  :root {
    --tg-sidebar-gap: clamp(1.8rem, 6vw, 2.6rem);
  }

  #g-aside {
    margin-top: clamp(2rem, 6vw, 3rem) !important;
  }

  #g-aside::before {
    inset: -.75rem -.35rem !important;
    border-radius: 1.25rem !important;
    opacity: .72 !important;
  }

  #g-aside::after {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #g-aside *,
  #g-aside *::before,
  #g-aside *::after {
    transition: none !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}