:root{
  --cob-font-ui:var(--font-ui,var(--lh-font-ui,var(--font-sans,'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif)));
  --cob-button-top:var(--lh-btn-bg-top,var(--color-button-top,var(--cv2-color-light-brand,#2f8b84)));
  --cob-button-mid:var(--lh-btn-bg-mid,var(--color-button-mid,color-mix(in srgb, var(--cv2-color-light-brand,#2f8b84) 90%, black 10%)));
  --cob-button-bottom:var(--lh-btn-bg-bottom,var(--color-button-bottom,color-mix(in srgb, var(--cv2-color-light-brand,#2f8b84) 82%, black 18%)));
  --cob-button-text:var(--lh-btn-text,var(--color-button-text,#ffffff));
  --cob-note-text:rgba(255,255,255,.92);
  --cob-note-bg:rgba(7,16,18,.34);
  --cob-alt-text:#ffffff;
  --cob-alt-bg:rgba(7,16,18,.10);
  --cob-alt-border:rgba(255,255,255,.16);
  --cob-alt-shadow:0 1px 2px rgba(0,0,0,.82), 0 0 .22rem rgba(0,0,0,.68);
  --cob-focus:var(--lh-focus,var(--color-focus,#ffbf47));
  --cob-shadow:0 1rem 2.1rem rgba(4,12,14,.24), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -.42rem .7rem rgba(0,0,0,.13);
  --cob-shadow-hover:0 1.2rem 2.5rem rgba(4,12,14,.30), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -.42rem .7rem rgba(0,0,0,.12);
  --cob-radius:0 .875rem .875rem .875rem;
  --cob-gap:.42rem;
  --cob-inset:clamp(.7rem,2.3vw,1rem);
}

html[data-theme="mid"]{
  --cob-button-top:color-mix(in srgb, var(--cv2-color-mid-brand,#e8f1ee) 92%, white 8%);
  --cob-button-mid:var(--cv2-color-mid-brand,#e8f1ee);
  --cob-button-bottom:color-mix(in srgb, var(--cv2-color-mid-brand,#e8f1ee) 82%, black 18%);
  --cob-button-text:#173f41;
  --cob-note-text:var(--cv2-color-mid-text,#edf4f2);
  --cob-note-bg:rgba(4,10,8,.34);
  --cob-alt-text:var(--cv2-color-mid-text,#edf4f2);
  --cob-alt-bg:rgba(4,10,8,.10);
  --cob-alt-border:rgba(255,255,255,.16);
  --cob-alt-shadow:0 1px 2px rgba(0,0,0,.82), 0 0 .22rem rgba(0,0,0,.68);
}

html[data-theme="dark"]{
  --cob-button-top:color-mix(in srgb, var(--cv2-color-dark-brand,#7abeb6) 90%, white 10%);
  --cob-button-mid:var(--cv2-color-dark-brand,#7abeb6);
  --cob-button-bottom:color-mix(in srgb, var(--cv2-color-dark-brand,#7abeb6) 80%, black 20%);
  --cob-button-text:#102030;
  --cob-note-text:var(--cv2-color-dark-text,#edf2f1);
  --cob-note-bg:rgba(4,10,8,.44);
  --cob-alt-text:var(--cv2-color-dark-text,#edf2f1);
  --cob-alt-bg:rgba(4,10,8,.10);
  --cob-alt-border:rgba(255,255,255,.16);
  --cob-alt-shadow:0 1px 2px rgba(0,0,0,.82), 0 0 .22rem rgba(0,0,0,.68);
}

.cob-media,
.cob-media *{
  box-sizing:border-box;
}

.cob-media{
  position:relative;
  display:inline-block;
  max-width:100%;
  overflow:hidden;
  isolation:isolate;
  vertical-align:middle;
}

.cob-media > img,
.cob-media > a > img{
  display:block;
  max-width:100%;
  height:auto;
}

.wp-block-image .cob-media{
  display:inline-block;
}

.wp-block-image.aligncenter .cob-media{
  margin-inline:auto;
}

.cob-media__overlay{
  position:absolute;
  z-index:1;
  inset:auto 0 0 0;
  height:48%;
  pointer-events:none;
  background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.08) 22%, rgba(0,0,0,.36) 100%);
  opacity:.92;
}

.cob-media--top-right .cob-media__overlay,
.cob-media--top-left .cob-media__overlay{
  inset:0 0 auto 0;
  background:linear-gradient(0deg, transparent 0%, rgba(0,0,0,.08) 22%, rgba(0,0,0,.34) 100%);
}

.cob-media__actions{
  position:absolute;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--cob-gap);
  max-width:min(calc(100% - 2 * var(--cob-inset)), 19rem);
  pointer-events:auto;
}

.cob-media--bottom-right .cob-media__actions{
  right:var(--cob-inset);
  bottom:var(--cob-inset);
  align-items:flex-end;
}

.cob-media--bottom-left .cob-media__actions{
  left:var(--cob-inset);
  bottom:var(--cob-inset);
}

.cob-media--bottom-center .cob-media__actions{
  left:50%;
  bottom:var(--cob-inset);
  transform:translateX(-50%);
  align-items:center;
}

.cob-media--top-right .cob-media__actions{
  right:var(--cob-inset);
  top:var(--cob-inset);
  align-items:flex-end;
}

.cob-media--top-left .cob-media__actions{
  left:var(--cob-inset);
  top:var(--cob-inset);
}

.cob-media__button{
  appearance:none;
  border:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.48rem;
  min-height:2.75rem;
  max-width:100%;
  padding:.72rem .92rem .72rem 1rem;
  border-radius:var(--cob-radius);
  background:linear-gradient(180deg,var(--cob-button-top) 0%, var(--cob-button-mid) 56%, var(--cob-button-bottom) 100%);
  color:var(--cob-button-text);
  font:inherit;
  font-family:var(--cob-font-ui);
  font-size:clamp(.86rem,1.55vw,.96rem);
  font-weight:750;
  line-height:1.1;
  letter-spacing:.005em;
  text-decoration:none !important;
  white-space:nowrap;
  box-shadow:var(--cob-shadow);
  text-shadow:none;
  backdrop-filter:blur(.45rem);
  -webkit-backdrop-filter:blur(.45rem);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease, background-color .18s ease, color .18s ease;
}

.cob-media__button:hover{
  transform:translateY(-1px);
  box-shadow:var(--cob-shadow-hover);
  filter:saturate(1.04) brightness(1.02);
  color:var(--cob-button-text);
  text-decoration:none !important;
}

.cob-media__button:active{
  transform:translateY(0);
  box-shadow:var(--cob-shadow);
}

.cob-media__button:focus-visible{
  outline:.18rem solid color-mix(in srgb, var(--cob-focus) 90%, white 10%);
  outline-offset:.16rem;
}

.cob-media__button-text{
  overflow:hidden;
  text-overflow:ellipsis;
}

.cob-media__icon{
  flex:0 0 auto;
  width:1.05rem;
  height:1.05rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.cob-media__icon svg{
  width:100%;
  height:100%;
  display:block;
  fill:currentColor;
}

.cob-media__note{
  display:inline-flex;
  max-width:100%;
  padding:.32rem .58rem;
  border-radius:999px;
  background:var(--cob-note-bg);
  color:var(--cob-note-text);
  font-family:var(--cob-font-ui);
  font-size:clamp(.68rem,1.25vw,.76rem);
  font-weight:700;
  letter-spacing:.035em;
  line-height:1.2;
  text-transform:uppercase;
  box-shadow:0 .6rem 1.4rem rgba(0,0,0,.16);
  backdrop-filter:blur(.5rem);
  -webkit-backdrop-filter:blur(.5rem);
}


.cob-media__alt{
  position:absolute;
  z-index:3;
  top:clamp(.34rem,1.2vw,.56rem);
  left:clamp(.34rem,1.2vw,.56rem);
  display:inline-block;
  max-width:min(calc(100% - 1rem), 17rem);
  padding:.18rem .42rem .2rem;
  border:1px solid var(--cob-alt-border);
  border-radius:999px;
  background:var(--cob-alt-bg);
  color:var(--cob-alt-text);
  font-family:var(--cob-font-ui);
  font-size:clamp(.58rem,1.02vw,.68rem);
  font-weight:750;
  letter-spacing:.02em;
  line-height:1.12;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-shadow:var(--cob-alt-shadow);
  pointer-events:none;
  box-shadow:0 .35rem .9rem rgba(0,0,0,.08);
  backdrop-filter:blur(.28rem) saturate(1.04);
  -webkit-backdrop-filter:blur(.28rem) saturate(1.04);
}

.cob-media--style-light{
  --cob-button-top:rgba(255,255,255,.94);
  --cob-button-mid:rgba(255,255,255,.86);
  --cob-button-bottom:rgba(236,241,239,.82);
  --cob-button-text:#173f41;
  --cob-alt-text:#102030;
  --cob-alt-bg:rgba(255,255,255,.10);
  --cob-alt-border:rgba(16,32,48,.16);
  --cob-alt-shadow:0 1px 1px rgba(255,255,255,.86), 0 0 .22rem rgba(255,255,255,.72);
}

.cob-media--style-dark{
  --cob-button-top:rgba(29,43,47,.94);
  --cob-button-mid:rgba(20,32,35,.92);
  --cob-button-bottom:rgba(8,15,17,.94);
  --cob-button-text:#f7fffe;
  --cob-alt-text:#f7fffe;
  --cob-alt-bg:rgba(7,16,18,.10);
  --cob-alt-border:rgba(255,255,255,.16);
  --cob-alt-shadow:0 1px 2px rgba(0,0,0,.82), 0 0 .22rem rgba(0,0,0,.68);
}

.cob-media--style-glass{
  --cob-button-top:rgba(255,255,255,.22);
  --cob-button-mid:rgba(255,255,255,.14);
  --cob-button-bottom:rgba(255,255,255,.10);
  --cob-button-text:#ffffff;
  --cob-alt-text:#ffffff;
  --cob-alt-bg:rgba(255,255,255,.10);
  --cob-alt-border:rgba(255,255,255,.18);
  --cob-alt-shadow:0 1px 2px rgba(0,0,0,.78), 0 0 .2rem rgba(0,0,0,.64);
}

.cob-media--style-glass .cob-media__button{
  border:1px solid rgba(255,255,255,.26);
}

@media (max-width:48rem){
  :root{
    --cob-inset:.72rem;
  }

  .cob-media__button{
    min-height:2.6rem;
    padding:.66rem .78rem .66rem .88rem;
  }

  .cob-media__note{
    max-width:13rem;
  }

  .cob-media__alt{
    max-width:min(calc(100% - .9rem), 13rem);
    font-size:.6rem;
  }
}

@media (max-width:30rem){
  .cob-media__actions{
    max-width:calc(100% - 1.2rem);
  }

  .cob-media--bottom-center .cob-media__actions{
    width:calc(100% - 1.2rem);
  }

  .cob-media--bottom-center .cob-media__button{
    width:100%;
  }
}

@media (prefers-reduced-motion: reduce){
  .cob-media__button{
    transition:none;
  }

  .cob-media__button:hover{
    transform:none;
  }
}
