<div class="container">
  <h2>Background Content</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
  <div class="actions">
    <button class="button" @click="$refs.overlay.showModal()">Open Overlay Card</button>
  </div>
</div>

<dialog class="overlay -card webOnly" ref="overlay">
  <div class="overlay__panel">
    <button class="overlay__close webOnly" aria-label="Close" @click="$refs.overlay.close()">
      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect x="3" y="3.75" width="1" height="16" rx="0.5" transform="rotate(-45 3 3.75)" fill="currentColor" />
        <rect x="14.25" y="3" width="1" height="16" rx="0.5" transform="rotate(45 14.25 3)" fill="currentColor" />
      </svg>
    </button>
    <div class="overlay__imageWrapper">
      <img class="overlay__image" src="https://picsum.photos/800/800" alt="Portrait of Michael Creator" />
    </div>
    <div class="overlay__body">
      <div class="overlay__intro">
        <h2 class="overlay__title">Some human name</h2>
        <p class="overlay__subtitle">Website Developer</p>
        <p class="overlay__description">Donec sit amet vestibulum turpis. Ut eget nibh pretium ipsum auctor pharetra. Curabitur maximus tristique pellentesque. Etiam pulvinar, tortor sed finibus scelerisque, neque libero vehicula neque, ut molestie mauris risus ac dui. Quisque vel imperdiet leo. Eget nibh pretium ipsum auctor pharetra.</p>
        <nav class="overlay__social actions" aria-label="Social links">
          <a class="button -square -ghost" href="#">
            <span class="srOnly">On Instagram</span>
            <svg class="button__icon" viewBox="0 0 29 29" aria-hidden="true">
              <use href="/main-icons-sprite.svg#instagram" />
            </svg>
          </a>
          <a class="button -square -ghost" href="#">
            <span class="srOnly">On LinkedIn</span>
            <svg class="button__icon" viewBox="0 0 28 29" aria-hidden="true">
              <use href="/main-icons-sprite.svg#linkedin" />
            </svg>
          </a>
          <a class="button -square -ghost" href="#">
            <span class="srOnly">On YouTube</span>
            <svg class="button__icon" viewBox="0 0 36 24" aria-hidden="true">
              <use href="/main-icons-sprite.svg#youtube" />
            </svg>
          </a>
        </nav>
      </div>
      <blockquote class="overlay__quote">
        <svg class="overlay__quoteIcon icon" role="presentation">
          <use href="/main-icons-sprite.svg#quote" />
        </svg>
        <p class="overlay__quoteText">Suspendisse ac blandit nisi, non tempor purus. Pellentesque ornare tellus molestie quam pretium!</p>
      </blockquote>
    </div>
  </div>
</dialog>

@use '@/core' as *;

.overlay {
  $b: &;

  background: rgb(13 0 26 / 0.7);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: grid;
  height: 100%;
  inset: 0;
  justify-items: center;
  max-height: 100%;
  max-width: 100%;
  padding: var(--root-gap);
  place-content: center;
  position: fixed;
  width: 100%;

  &::backdrop {
    backdrop-filter: blur(12px);
    background: rgb(13 0 26 / 0.7);
  }

  &:not([open]) {
    display: none;
  }

  &__close {
    appearance: none;
    background: transparent;
    border: 0;
    color: #ffffff;
    cursor: pointer;
    height: 5.25rem;
    padding: 0;
    position: absolute;
    right: 1rem;
    top: 1rem;
    transition:
      opacity var(--root-ease-out-fast),
      transform var(--root-ease-out-fast);
    width: 5.25rem;
    z-index: 1;

    &:hover {
      opacity: 0.8;
      transform: scale(1.1);
    }
  }

  &__content {
    display: grid;
    gap: 1rem;
    justify-items: center;
    max-height: calc(100vh - var(--root-gap) * 2);
    max-width: min(90vw, 56rem);
  }

  &__figure {
    display: grid;
    gap: 1rem;
    justify-items: center;
    margin: 0;
  }

  &__image {
    border-radius: 0.25rem;
    box-shadow: var(--root-box-shadow-high);
    display: block;
    height: auto;
    max-height: calc(100vh - 8rem);
    max-width: 100%;
    object-fit: contain;
  }

  &__caption {
    color: rgb(255 255 255 / 0.9);
    font-size: 1rem;
    text-align: center;
  }

  /**
   * Two-column bio / profile card variant (image + text).
   * Keeps the fullscreen dark overlay; the white card lives in __panel.
   */
  &.-card {
    #{$b}__panel {
      --overlay-card-max-height: calc(100vh - var(--root-gap) * 2);
      --overlay-card-width: min(81.25rem, calc(100vw - var(--root-gap) * 2), calc(var(--overlay-card-max-height) * 2));

      background: var(--root-background-color);
      border-radius: 1rem;
      box-shadow: var(--root-box-shadow-med);
      color: var(--root-color);
      display: grid;
      grid-template-columns: 1fr;
      max-height: var(--overlay-card-max-height);
      overflow: auto;
      position: relative;
      width: min(100%, var(--overlay-card-width));

      @include at(md) {
        grid-template-columns: 1fr 1fr;
        height: min(calc(var(--overlay-card-width) / 2), var(--overlay-card-max-height));
        overflow: hidden;
        width: var(--overlay-card-width);
      }
    }

    #{$b}__close {
      color: var(--color-blue);
      height: 1.125rem;
      right: 1.5rem;
      top: 1.5rem;
      width: 1.125rem;

      svg {
        display: block;
        height: 100%;
        width: 100%;
      }
    }

    #{$b}__imageWrapper {
      background: var(--accent-color-50);
      min-height: 0;
      padding: 2rem;

      @include at(md) {
        display: grid;
      }
    }

    #{$b}__image {
      aspect-ratio: 1;
      box-shadow: none;
      display: block;
      height: auto;
      max-height: 100%;
      object-fit: cover;
      width: 100%;

      @include at(md) {
        height: 100%;
      }
    }

    #{$b}__body {
      display: grid;
      gap: 1.5rem;
      min-height: 0;
      padding: 1.5rem 2rem 2rem;

      @include at(md) {
        display: flex;
        flex-direction: column;
        gap: 4rem;
        overflow: hidden auto;
      }
    }

    #{$b}__intro {
      display: grid;
      gap: 1rem;

      @include at(md) {
        margin-top: auto;
      }
    }

    #{$b}__title {
      font-size: var(--root-font-size-h1);
      font-weight: 700;
      line-height: 1.125;
      margin: 0;
    }

    #{$b}__subtitle {
      color: var(--root-color-headings);
      font-size: var(--root-font-size-lg);
      line-height: 1.5;
      margin: 0;
    }

    #{$b}__title,
    #{$b}__subtitle {
      --root-color-headings: #333333;
    }

    #{$b}__description {
      line-height: 1.5;
      margin: 0;
    }

    #{$b}__social {
      --accent-color: var(--color-blue);

      align-items: center;
      gap: 3rem;
      margin-bottom: 0;

      .button.-square {
        height: 2rem;
        width: 2rem;
      }

      .button__icon {
        display: block;
        height: 2rem;
        margin: 0;
        width: 2rem;
      }
    }

    #{$b}__quote {
      box-shadow: none;
      display: grid;
      gap: 1rem;
      margin: 0;
      padding-left: 0;
    }

    #{$b}__quoteIcon {
      --icon-color: var(--accent-color);

      display: block;
      height: 2.75rem;
      width: 3rem;
    }

    #{$b}__quoteText {
      font-size: 1.25rem;
      line-height: 1.5;
      margin: 0;

      @include at(md) {
        font-size: var(--root-font-size-lg);
      }
    }
  }

  /**
   * Slider variant: centered feature card with side prev/next controls.
   * Each slide is text + CTA | square image (image fills card height).
   */
  &.-slider {
    --overlay-slider-nav-size: 3rem;
    --overlay-slider-nav-gap: 1.5rem;

    box-sizing: border-box;
    max-width: 100%;
    overflow-x: hidden;

    #{$b}__slider {
      box-sizing: border-box;
      display: grid;
      gap: 0.75rem;
      grid-template-areas:
        "slide slide slide"
        ". prev next";
      grid-template-columns: 1fr auto auto;
      max-width: 100%;
      width: min(100%, calc(67.375rem + (var(--overlay-slider-nav-size) + var(--overlay-slider-nav-gap)) * 2));

      @include at(md) {
        align-items: center;
        gap: var(--overlay-slider-nav-gap);
        grid-template-areas: "prev slide next";
        grid-template-columns: var(--overlay-slider-nav-size) minmax(0, 1fr) var(--overlay-slider-nav-size);
      }
    }

    #{$b}__nav {
      --accent-color: var(--color-blue);
      --accent-color-text: #ffffff;

      align-items: center;
      display: inline-flex;
      flex-shrink: 0;
      height: var(--overlay-slider-nav-size);
      justify-content: center;
      padding: 0;
      width: var(--overlay-slider-nav-size);

      .button__icon {
        height: 0.75rem;
        margin: 0;
        width: 0.75rem;
      }

      &.-prev {
        grid-area: prev;
      }

      &.-next {
        grid-area: next;
      }
    }

    swiper-container {
      display: block;
      grid-area: slide;
      max-width: 100%;
      min-width: 0;
      overflow: hidden;
      width: 100%;
    }

    swiper-container::part(container) {
      overflow: hidden;
    }

    swiper-slide {
      box-sizing: border-box;
      height: auto;
      max-width: 100%;
      width: 100%;
    }

    swiper-container::part(pagination),
    swiper-container::part(button-prev),
    swiper-container::part(button-next) {
      display: none;
    }

    #{$b}__panel {
      background: var(--root-background-color);
      border-radius: 1rem;
      box-shadow: var(--root-box-shadow-med);
      color: var(--root-color);
      display: grid;
      grid-template-columns: 1fr;
      max-height: calc(100vh - var(--root-gap) * 2);
      max-width: 100%;
      overflow: hidden;
      width: 100%;

      @include at(lg) {
        grid-template-columns: 1fr auto;
        height: min(26.75rem, calc(100vh - var(--root-gap) * 2));
      }
    }

    #{$b}__body {
      display: grid;
      gap: 2rem;
      padding: 2rem;

      @include at(md) {
        align-content: center;
        overflow: hidden auto;
      }
    }

    #{$b}__intro {
      display: grid;
      gap: 1rem;
    }

    #{$b}__eyebrow {
      color: var(--accent-color);
      font-size: 1rem;
      font-weight: 700;
      line-height: 1;
      margin: 0;
      text-transform: uppercase;
    }

    #{$b}__title {
      color: var(--root-color-headings);
      font-size: var(--root-font-size-h2);
      font-weight: 700;
      line-height: 1.125;
      margin: 0;
    }

    #{$b}__description {
      line-height: 1.5;
      margin: 0;
    }

    #{$b}__cta {
      --accent-color: var(--color-blue);

      justify-self: start;
    }

    #{$b}__imageWrapper {
      min-height: 0;

      @include at(lg) {
        aspect-ratio: 1;
        height: 100%;
        width: auto;
      }
    }

    #{$b}__image {
      aspect-ratio: 1;
      border-radius: 0;
      box-shadow: none;
      display: block;
      height: auto;
      object-fit: cover;
      width: 100%;

      @include at(lg) {
        height: 100%;
        width: 100%;
      }
    }
  }
}