/* Year-filtered magazine archive (Spirit of Islam, Al-Risala).
   See Views/Shared/_MagazineArchive.cshtml. The cards reuse the ported theme classes
   (.singlebook / .magazinedate / .singlebookimage / .booklinks) from css/pages/media.css;
   only the year filter and the grid that replaces the old SiteOrigin rows live here. */

/* Top padding clears the hero band — the .offhome title row above is zero-height, so content
   would otherwise start flush against the bottom of the banner. */
.mag-archive{padding:60px 0 40px}

/* ---- year filter ----
   .mag-archive scoping is needed to beat `.getinvolved form` in common.css, which is on the
   body of these pages and would otherwise drop a grey 10%-padded panel behind the filter. */
.mag-archive .mag-filter{
display:flex;align-items:center;justify-content:center;gap:10px;
margin:0 0 45px;padding:0;background:none}
.mag-filter label{margin:0;font-weight:600;color:#383838;text-transform:uppercase;letter-spacing:.5px;font-size:14px}
/* No `background` here: virtue.css draws the dropdown caret with a background shorthand
   (appearance is set to none), so setting one would erase the arrow. Right padding leaves
   room for it. */
.mag-filter select{
min-width:140px;padding:9px 30px 9px 12px;font-size:16px;color:#191919;
border:1px solid #999;border-radius:0;box-sizing:border-box;height:auto;cursor:pointer}
.mag-filter select:focus{outline:2px solid #4eb8e9;outline-offset:1px}
.mag-go{
padding:9px 18px;font-size:14px;font-weight:bold;color:#fff;background:#4eb8e9;
border:none;border-radius:0;cursor:pointer;transition:background .3s ease-out}
.mag-go:hover{background:#2d5c88}

/* ---- issue grid: at most four covers per row ---- */
.mag-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 30px;align-items:start}
/* .singlebook's 20% side padding is sized for the old SiteOrigin cells and would squeeze the
   covers to thumbnails inside a four-column grid track. */
.mag-grid .singlebook{padding:0 0 30px}
.mag-grid .singlebookimage{display:block;width:100%;max-width:240px;height:auto;margin:0 auto}

/* placeholder when an issue has no cover in the archive */
.mag-nocover{
display:flex;align-items:center;justify-content:center;width:100%;max-width:240px;
aspect-ratio:1/1.5;margin:0 auto;padding:16px;box-sizing:border-box;
background:#f1f1f2;border:1px solid #ddd;color:#777;font-size:15px;text-align:center}

.mag-unavailable{color:#999}
.mag-empty{text-align:center;color:#777;padding:40px 0}

@media only screen and (max-width:1199px){
.mag-grid{grid-template-columns:repeat(3,1fr)}
}
@media only screen and (max-width:991px){
.mag-grid{grid-template-columns:repeat(2,1fr)}
}
/* Phones: one cover per row, matching how the other resource pages stack (css/pages/media.css). */
@media only screen and (max-width:767px){
.mag-archive{padding-top:40px}
.mag-grid{grid-template-columns:1fr;gap:0}
.mag-filter{flex-wrap:wrap}
/* >=16px keeps iOS from zooming the page when the select takes focus */
.mag-filter select{font-size:16px;width:100%;max-width:260px}
.mag-archive .mag-filter{margin-bottom:32px}
}