/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* === CSS 兼容性降级 (Android 9+ WebView) === */

/* 1. aspect-ratio 降级：旧 WebView (<Chrome 88) 不支持 */
.aspect-compat {
  position: relative;
  height: 0;
  padding-bottom: 133.33%; /* 3:4 比例 */
  overflow: hidden;
}
.aspect-compat > * {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
@supports (aspect-ratio: 3/4) {
  .aspect-compat {
    position: static;
    height: auto;
    padding-bottom: 0;
    overflow: visible;
    aspect-ratio: 3/4;
  }
  .aspect-compat > * {
    position: static;
    width: 100%; height: 100%;
  }
}

/* 2. backdrop-filter 降级：不支持时用纯色半透明背景 */
.backdrop-compat {
  background-color: rgba(255, 255, 255, 0.97);
}
@supports (backdrop-filter: blur(4px)) {
  .backdrop-compat {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

/* 3. flex gap polyfill：旧 WebView (<Chrome 84) flex gap 不生效 */
.flex-gap-compat > * + * {
  margin-left: 0.375rem; /* gap-1.5 fallback */
}
@supports (gap: 1px) {
  .flex-gap-compat > * + * {
    margin-left: 0;
  }
}