/* DSMT-specific layout safeguards.
   These rules intentionally load after the shared workflow stylesheet. */

.flip-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  margin-bottom: 10px;
}

.flip-card {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  inline-size: 100%;
  width: 100%;
  min-inline-size: 0;
  max-inline-size: none;
  block-size: 230px;
  min-block-size: 230px;
  justify-self: stretch;
  align-self: stretch;
  overflow: visible;
}

.flip-inner {
  display: block;
  inline-size: 100%;
  width: 100%;
  block-size: 100%;
  min-block-size: 0;
}

.flip-face { display: block; overflow: hidden; }
.flip-face h3 { margin: 8px 0 0; font-size: clamp(1rem, 1.35vw, 1.18rem); line-height: 1.28; overflow-wrap: anywhere; }
.flip-back p { margin: 8px 0 0; line-height: 1.45; }
#knowledge-check { clear: both; }

@media (max-width: 1100px) {
  .flip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* iOS/WebKit-safe phone fallback: no perspective, no absolute-positioned faces. */
@media (max-width: 680px) {
  .flip-grid {
    display: block !important;
    grid-template-columns: none !important;
    inline-size: 100% !important;
    width: 100% !important;
  }

  .flip-card {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: block !important;
    inline-size: 100% !important;
    width: 100% !important;
    min-inline-size: 100% !important;
    min-width: 100% !important;
    max-inline-size: 100% !important;
    max-width: 100% !important;
    block-size: auto !important;
    height: auto !important;
    min-block-size: 0 !important;
    min-height: 0 !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    text-align: left !important;
    overflow: visible !important;
    perspective: none !important;
    transform: none !important;
  }

  .flip-inner {
    position: relative !important;
    display: block !important;
    inline-size: 100% !important;
    width: 100% !important;
    block-size: auto !important;
    height: auto !important;
    min-block-size: 210px !important;
    min-height: 210px !important;
    transform: none !important;
    transform-style: flat !important;
    transition: none !important;
  }

  .flip-face {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    inline-size: 100% !important;
    width: 100% !important;
    min-block-size: 210px !important;
    min-height: 210px !important;
    transform: none !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    overflow: hidden !important;
  }

  .flip-back { display: none !important; }
  .flip-card[aria-pressed="true"] .flip-inner { transform: none !important; }
  .flip-card[aria-pressed="true"] .flip-face:not(.flip-back) { display: none !important; }
  .flip-card[aria-pressed="true"] .flip-back { display: block !important; }
}