/* A26 Web Design System — Image foundation */
@layer a26.foundation {
  .a26-image-frame {
    position: relative;
    overflow: hidden;
    border-radius: var(--a26-radius-xl);
    background: var(--a26-fill-tertiary);
    border: 1px solid var(--a26-separator);
  }

  .a26-image-frame[data-ratio="square"] { aspect-ratio: 1 / 1; }
  .a26-image-frame[data-ratio="wide"] { aspect-ratio: 16 / 9; }
  .a26-image-frame[data-ratio="poster"] { aspect-ratio: 2 / 3; }

  .a26-image-frame__placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--a26-text-tertiary);
    background:
      linear-gradient(145deg, color-mix(in srgb, var(--a26-accent) 14%, transparent), transparent 45%),
      var(--a26-bg-surface);
    font: var(--a26-font-footnote);
  }

  .a26-image-frame__placeholder::before {
    content: '';
    position: absolute;
    inset: 14%;
    border-radius: inherit;
    border: 1px dashed var(--a26-separator);
  }
}