/**
 * Filaro media frame - plate framing engine
 *
 * HTML:
 *   <div class="filaro-frame"
 *     data-filaro-frame
 *     data-fit-phone="cover|contain|whole"
 *     data-fit-tablet="cover|contain|whole"
 *     data-fit-desktop="cover|contain|whole"
 *     style="
 *       --ff-focus-x: 50%;
 *       --ff-focus-y: 40%;
 *       --ff-aspect-phone: 3 / 4;
 *       --ff-aspect-tablet: 4 / 3;
 *       --ff-aspect-desktop: 16 / 10;
 *     ">
 *     <img class="filaro-frame__img" src="..." alt="" width="" height="">
 *   </div>
 *
 * fit:
 *   whole   = show entire photo; height follows aspect (no crop)
 *   cover   = fill the device frame; may crop; focus stays in view
 *   contain = letterbox inside the device frame; no crop
 *
 * Breakpoints: phone <768 / tablet 768-1099 / desktop >=1100
 * SSOT workflow: FL_Media_Frame_Card_05Aug26.md
 */

.filaro-frame {
  --ff-focus-x: 50%;
  --ff-focus-y: 50%;
  --ff-focus-x-phone: var(--ff-focus-x);
  --ff-focus-y-phone: var(--ff-focus-y);
  --ff-focus-x-tablet: var(--ff-focus-x);
  --ff-focus-y-tablet: var(--ff-focus-y);
  --ff-focus-x-desktop: var(--ff-focus-x);
  --ff-focus-y-desktop: var(--ff-focus-y);
  --ff-aspect-phone: 3 / 4;
  --ff-aspect-tablet: 4 / 3;
  --ff-aspect-desktop: 16 / 10;
  --ff-width: 100%;

  position: relative;
  z-index: 0;
  width: var(--ff-width);
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  line-height: 0;
  background: var(--page-bg, #5b2c2d);
}

.filaro-frame__img {
  display: block;
  width: 100%;
  max-width: none;
  /* Phone defaults - overridden per fit + breakpoint */
  height: 100%;
  object-fit: cover;
  object-position: var(--ff-focus-x-phone) var(--ff-focus-y-phone);
}

/* ----- Phone (<768) ----- */
.filaro-frame[data-fit-phone="cover"],
.filaro-frame:not([data-fit-phone]) {
  aspect-ratio: var(--ff-aspect-phone);
}
.filaro-frame[data-fit-phone="cover"] .filaro-frame__img,
.filaro-frame:not([data-fit-phone]) .filaro-frame__img {
  height: 100%;
  object-fit: cover;
  object-position: var(--ff-focus-x-phone) var(--ff-focus-y-phone);
}

.filaro-frame[data-fit-phone="contain"] {
  aspect-ratio: var(--ff-aspect-phone);
}
.filaro-frame[data-fit-phone="contain"] .filaro-frame__img {
  height: 100%;
  object-fit: contain;
  object-position: var(--ff-focus-x-phone) var(--ff-focus-y-phone);
}

.filaro-frame[data-fit-phone="whole"] {
  aspect-ratio: auto;
}
.filaro-frame[data-fit-phone="whole"] .filaro-frame__img {
  height: auto;
  object-fit: unset;
  object-position: center top;
}

/* ----- Tablet (768+) ----- */
@media (min-width: 768px) {
  .filaro-frame[data-fit-tablet="cover"],
  .filaro-frame:not([data-fit-tablet]) {
    aspect-ratio: var(--ff-aspect-tablet);
  }
  .filaro-frame[data-fit-tablet="cover"] .filaro-frame__img,
  .filaro-frame:not([data-fit-tablet]) .filaro-frame__img {
    height: 100%;
    object-fit: cover;
    object-position: var(--ff-focus-x-tablet) var(--ff-focus-y-tablet);
  }

  .filaro-frame[data-fit-tablet="contain"] {
    aspect-ratio: var(--ff-aspect-tablet);
  }
  .filaro-frame[data-fit-tablet="contain"] .filaro-frame__img {
    height: 100%;
    object-fit: contain;
    object-position: var(--ff-focus-x-tablet) var(--ff-focus-y-tablet);
  }

  .filaro-frame[data-fit-tablet="whole"] {
    aspect-ratio: auto;
  }
  .filaro-frame[data-fit-tablet="whole"] .filaro-frame__img {
    height: auto;
    object-fit: unset;
    object-position: center top;
  }
}

/* ----- Desktop (1100+) ----- */
@media (min-width: 1100px) {
  .filaro-frame[data-fit-desktop="cover"],
  .filaro-frame:not([data-fit-desktop]) {
    aspect-ratio: var(--ff-aspect-desktop);
  }
  .filaro-frame[data-fit-desktop="cover"] .filaro-frame__img,
  .filaro-frame:not([data-fit-desktop]) .filaro-frame__img {
    height: 100%;
    object-fit: cover;
    object-position: var(--ff-focus-x-desktop) var(--ff-focus-y-desktop);
  }

  .filaro-frame[data-fit-desktop="contain"] {
    aspect-ratio: var(--ff-aspect-desktop);
  }
  .filaro-frame[data-fit-desktop="contain"] .filaro-frame__img {
    height: 100%;
    object-fit: contain;
    object-position: var(--ff-focus-x-desktop) var(--ff-focus-y-desktop);
  }

  .filaro-frame[data-fit-desktop="whole"] {
    aspect-ratio: auto;
  }
  .filaro-frame[data-fit-desktop="whole"] .filaro-frame__img {
    height: auto;
    object-fit: unset;
    object-position: center top;
  }
}

/* Optional scrim (add .filaro-frame--scrim) */
.filaro-frame--scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(20, 12, 12, 0) 55%,
      rgba(20, 12, 12, 0.18) 100%
    ),
    linear-gradient(
      180deg,
      rgba(20, 12, 12, 0.28) 0%,
      rgba(20, 12, 12, 0.06) 42%,
      rgba(20, 12, 12, 0) 70%
    );
}