/* com_aphenom — frontend. Deliberately light: the site template supplies the
   design system (Bootstrap 5 in v1). These rules only lay out component-specific
   structures the template can't know about. */

.aphenom-filterbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.aphenom-filterbar .form-control,
.aphenom-filterbar .form-select { width: auto; flex: 0 1 auto; }
.aphenom-filterbar input[type="search"] { flex: 1 1 12rem; }

.aphenom-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.aphenom-card { border: 1px solid rgba(0,0,0,.12); border-radius: .5rem; overflow: hidden; display: flex; flex-direction: column; }
.aphenom-card__media { position: relative; display: block; aspect-ratio: 16 / 10; background: #223; }
.aphenom-card__media img { width: 100%; height: 100%; object-fit: cover; }
.aphenom-card__badge { position: absolute; top: .4rem; left: .4rem; background: rgba(0,0,0,.65); color: #fff; font-size: .72rem; padding: .1rem .4rem; border-radius: .2rem; }
.aphenom-card__body { padding: .6rem .75rem; }
.aphenom-card__body h3 { font-size: 1rem; margin: 0 0 .25rem; }
.aphenom-card__meta { font-size: .8rem; opacity: .7; margin: 0; }

.aphenom-detail__layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.5rem; }
@media (max-width: 48rem) { .aphenom-detail__layout { grid-template-columns: 1fr; } }
.aphenom-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.aphenom-gallery img, .aphenom-gallery video { width: 100%; border-radius: .35rem; }
.aphenom-embed { position: relative; aspect-ratio: 16 / 9; }
.aphenom-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: .35rem; }
.aphenom-datatable dl { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .75rem; font-size: .9rem; }
.aphenom-datatable dt { opacity: .6; }
.aphenom-locator { height: 12rem; border-radius: .35rem; overflow: hidden; margin-top: 1rem; }
.aphenom-map-full { height: 70vh; min-height: 24rem; }