/* Shared patterned-glass panel rendering. Pattern asset variables are generated separately. */

:is(.article-body, .panel-pattern-host) :is(.panel-glass--pattern, .panel-glass--pattern-1) > .panel-glass__inner{
  isolation: isolate;
  padding:
    clamp(34px, 5vw, 48px)
    clamp(38px, 6vw, 58px);
  border: 1px solid rgba(150,205,166,0.18);
  box-shadow:
    inset 0 0 0 1px rgba(226,255,232,0.035),
    inset 0 0 34px rgba(50,104,70,0.12),
    0 12px 32px rgba(0,0,0,0.24);
}

/* The frame's 13-slice artwork supplies the edge and glow. Keep legacy
   inset shadows from drawing a straight seam inside unskinned patterns. */
:is(.article-body, .panel-pattern-host)
  :is(.panel-glass--pattern, .panel-glass--pattern-1).panel-frame:not(.panel-skin):not(.panel-frame--overlay)
  > .panel-glass__inner{
  border: 0;
  box-shadow: 0 12px 32px rgba(0,0,0,0.24);
}

:is(.article-body, .panel-pattern-host) :is(.panel-glass--pattern, .panel-glass--pattern-1) > .panel-glass__inner::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background-image: var(--panel-pattern-fallback-800, none);
  background-image: var(--panel-pattern-image-800, var(--panel-pattern-fallback-800, none));
  background-position: center calc(50% + 400px);
  background-repeat: repeat-y;
  background-size: 800px 1600px;
  opacity: 0.84;
  filter: brightness(1.2) saturate(1.06);
  pointer-events: none;
  -webkit-mask-image: var(--panel-pattern-mask, radial-gradient(
    ellipse 82% 74% at center,
    transparent 0%,
    transparent 44%,
    rgba(0,0,0,0.08) 58%,
    rgba(0,0,0,0.45) 77%,
    #000 100%
  ));
  mask-image: var(--panel-pattern-mask, radial-gradient(
    ellipse 82% 74% at center,
    transparent 0%,
    transparent 44%,
    rgba(0,0,0,0.08) 58%,
    rgba(0,0,0,0.45) 77%,
    #000 100%
  ));
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

@media (max-width: 617px){
  :is(.article-body, .panel-pattern-host) :is(.panel-glass--pattern, .panel-glass--pattern-1) > .panel-glass__inner::before{
    background-image: var(--panel-pattern-fallback-480, none);
    background-image: var(--panel-pattern-image-480, var(--panel-pattern-fallback-480, none));
    background-position-y: calc(50% + 240px);
    background-size: 480px 960px;
  }
}

/* Info/article panels grow continuously above the 1920px design width.
   Switch tiers before a panel can become wider than the current bitmap so
   the centered, vertically repeating pattern never leaves bare side strips. */
@media (min-width: 2022px){
  :is(.article-body, .panel-pattern-host) :is(.panel-glass--pattern, .panel-glass--pattern-1) > .panel-glass__inner::before{
    background-image: var(--panel-pattern-fallback-1000, none);
    background-image: var(--panel-pattern-image-1000, var(--panel-pattern-fallback-1000, none));
    background-position-y: calc(50% + 500px);
    background-size: 1000px 2000px;
  }
}

@media (min-width: 2527px){
  :is(.article-body, .panel-pattern-host) :is(.panel-glass--pattern, .panel-glass--pattern-1) > .panel-glass__inner::before{
    background-image: var(--panel-pattern-fallback-1400, none);
    background-image: var(--panel-pattern-image-1400, var(--panel-pattern-fallback-1400, none));
    background-position-y: calc(50% + 700px);
    background-size: 1400px 2800px;
  }
}

/* The largest pattern masters are 1400px wide. Keep directly embedded
   patterned panels at or below that native width rather than upscaling them. */
:is(.article-body, .panel-pattern-host) > :is(.panel-glass--pattern, .panel-glass--pattern-1){
  max-width: 1400px;
}

:is(.article-body, .panel-pattern-host) :is(.panel-glass--pattern, .panel-glass--pattern-1) > .panel-glass__inner::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: radial-gradient(
    ellipse 78% 68% at center,
    rgba(12,17,16,0.2) 0%,
    rgba(12,17,16,0.12) 52%,
    rgba(12,17,16,0.04) 72%,
    transparent 100%
  );
  box-shadow: inset 0 0 0 1px rgba(187,231,198,0.12);
  pointer-events: none;
}

:is(.article-body, .panel-pattern-host) :is(.panel-glass--pattern, .panel-glass--pattern-1) > .panel-glass__inner > *{
  position: relative;
  z-index: 2;
}

:is(.article-body, .panel-pattern-host) :is(.panel-glass--pattern, .panel-glass--pattern-1) .panel-glass__title{
  color: rgba(249,255,247,0.98);
  text-shadow: 0 2px 10px rgba(0,0,0,0.72);
}

:is(.article-body, .panel-pattern-host) :is(.panel-glass--pattern, .panel-glass--pattern-1) .panel-glass__text,
:is(.article-body, .panel-pattern-host) :is(.panel-glass--pattern, .panel-glass--pattern-1) .panel-glass__list{
  color: rgba(247,247,239,0.96);
  text-shadow: 0 1px 6px rgba(0,0,0,0.82);
}

/* Keep the center identical to an ordinary glass card. */
:is(.article-body, .panel-pattern-host) .panel-glass--pattern-clear-zone > .panel-glass__inner::after{
  background: none;
}

/* Optional themed surface: keep the fractal fully present underneath, then
   tint the complete interior with the frame theme's associated panel color. */
:is(.article-body, .panel-pattern-host) .panel-glass--pattern-clear-zone.panel-frame--overlay > .panel-glass__inner::after{
  background: var(--panel-runtime-surface-color);
}

:is(.article-body, .panel-pattern-host) [data-panel-pattern-mask="edge"] > .panel-glass__inner::after{
  background: none;
}

:is(.article-body, .panel-pattern-host) .panel-glass--pattern-clear-zone .panel-glass__clear-zone{
  position: relative;
  z-index: 2;
  margin: 0 auto;
  border-radius: inherit;
  isolation: isolate;
}

:is(.article-body, .panel-pattern-host) .panel-glass--pattern-clear-zone .panel-glass__title{
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
}

:is(.article-body, .panel-pattern-host) .panel-glass--pattern-clear-zone .panel-glass__clear-body{
  position: relative;
  z-index: 1;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
}

:is(.article-body, .panel-pattern-host) .panel-glass--pattern-clear-zone .panel-glass__clear-body > :first-child{
  margin-top: 0;
}

:is(.article-body, .panel-pattern-host) .panel-glass--pattern-clear-zone .panel-glass__clear-body > :last-child{
  margin-bottom: 0;
}

@media (min-width: 1920px){
  :is(.article-body, .panel-pattern-host) :is(.panel-glass--pattern, .panel-glass--pattern-1) > .panel-glass__inner{
    padding:
      clamp(48px, calc(48 / 1920 * 100vw), calc(48px * var(--wide-scale)))
      clamp(58px, calc(58 / 1920 * 100vw), calc(58px * var(--wide-scale)));
  }
}