/* css/cards-gallery.css — v3: modal anchored to main-content, height based on viewport */

.cards-heading{margin-top:1rem;font-weight:700;font-size:1.05rem;opacity:.95}
.cards-controls{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.25rem;align-items:end}
.cards-control{display:flex;flex-direction:column;gap:.35rem;min-width:220px}
.cards-control label{font-size:.9rem;opacity:.85}
.cards-control input,.cards-control select{padding:.6rem .75rem;border:1px solid rgba(0,0,0,.15);border-radius:10px;background:#fff;outline:none}
.cards-control input:focus,.cards-control select:focus{border-color:rgba(0,0,0,.30);box-shadow:0 0 0 3px rgba(0,0,0,.08)}
.cards-reset{padding:.65rem 1rem;border-radius:10px;border:1px solid rgba(0,0,0,.18);background:#fff;cursor:pointer}
.cards-reset:hover{box-shadow:0 10px 24px rgba(0,0,0,.10)}
.cards-status{margin-top:.75rem;opacity:.85}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.25rem;margin-top:1.25rem}
.card-thumb{margin:0;background:#f3f4f6;border-radius:14px;padding:12px;cursor:pointer;border:1px solid rgba(0,0,0,.06);transition:transform .15s ease,box-shadow .15s ease}
.card-thumb:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.12)}
.card-thumb img{width:100%;height:auto;display:block;border-radius:10px}
.card-thumb figcaption{margin-top:.6rem;font-size:.85rem;opacity:.82;word-break:break-word}

/* ===== MODAL (viewport height, aligned to top of overlay) ===== */

/* main-content remains normal; modal is a fixed overlay sized/positioned by JS vars */
main.main-content{position:relative}
main.main-content.cards-modal-open{overflow:hidden}

/* CSS variables set by JS:
   --modal-left, --modal-width, --modal-top, --modal-height
*/
main.main-content .card-modal{
  position: fixed;
  left: var(--modal-left, 0px);
  width: var(--modal-width, 100vw);
  top: var(--modal-top, 0px);
  height: var(--modal-height, 100vh);

  z-index: 9999;
  display: none;
  padding: 14px;

  /* content should start from top, not vertical center */
  box-sizing: border-box;
}

main.main-content .card-modal[aria-hidden="false"]{
  display: block;
}

main.main-content .card-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  border-radius: 14px;
}

/* Put the box near the top, not centered */
main.main-content .card-modal-content{
  position: relative;
  z-index: 1;

  width: min(1200px, calc(100% - 28px));
  margin: 0 auto;              /* center horizontally only */
  margin-top: 0;               /* stays at top */
  max-height: calc(100% - 28px);

  border-radius: 18px;
  overflow: hidden;

  background: #f3f4f6;
  box-shadow: 0 24px 70px rgba(0,0,0,.38);

  display: flex;
  align-items: flex-start;     /* top align */
  justify-content: center;
}

/* Image fits inside the modal box without creating huge scroll */
main.main-content #card-modal-img{
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100% - 0px);
  object-fit: contain;
  background: #f3f4f6;
}

main.main-content .card-modal-close{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;

  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;

  background: rgba(0,0,0,.45);
  color: #fff;

  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
main.main-content .card-modal-close:hover{background: rgba(0,0,0,.62)}

@media (max-width: 640px){
  .cards-control{min-width:160px}
  .cards-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  main.main-content .card-modal{padding:10px}
  main.main-content .card-modal-backdrop{border-radius:12px}
  main.main-content .card-modal-content{border-radius:14px}
}