/* ==========================================================================
   Free Cyber Security Wallpapers (/free-cyber-security-wallpapers)
   The page's own parts on top of the shared Toybox Calm look (assets/css/toybox-calm.css, loaded first by
   _ToyboxCalmHead): the wallpaper cards (title, 16:9 preview that enlarges, description) and their download menus.
   Every class starts with cyw-. Views/Public/Wallpapers.cshtml links it in its FinalHeader section with a ?v= cache
   buster from StaticAssetVersion; Scripts/security-wallpapers/security-wallpapers.js closes the download menus.
   ========================================================================== */

/* A little more room for the cards on phones */
@media (max-width: 499.98px) { .cyw-root .tc-card--xl > .tc-card__body { padding: 18px 12px 22px; } }

/* The wallpapers: one column, two from 640px, three from 1100px. Where subgrid is supported every card in a row
   shares the row's title, preview and text tracks, so the previews line up however long the titles are. */
.cyw-grid { display: grid; gap: 22px; }
@media (min-width: 640px) { .cyw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cyw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; } }

.cyw-wp { position: relative; display: flex; flex-direction: column; min-width: 0; background: #fff; border: 3px solid var(--tc-ink); border-radius: 20px; box-shadow: 0 4px 0 var(--tc-ink); transition: transform .15s ease, box-shadow .15s ease; }
@supports (grid-template-rows: subgrid) {
  .cyw-grid { row-gap: 0; }
  .cyw-wp { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; margin-bottom: 22px; }
}
.cyw-wp:hover, .cyw-wp:focus-within { transform: translateY(-3px); box-shadow: 0 7px 0 var(--tc-ink); }
/* Keeps the pointer over the card when the lift moves its bottom edge away, so :hover doesn't flicker */
.cyw-wp::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; }
/* A card whose download menu is open sits above its neighbours (a focused one included), so the menu isn't hidden
   under the next card */
.cyw-wp:focus-within { z-index: 3; }
.cyw-wp--open { z-index: 4; }
.cyw-wp:has(.cyw-dl[open]) { z-index: 4; }

.tc-root .cyw-wp__title { display: flex; align-items: center; margin: 0; padding: 14px 18px 18px; font: 700 1.1875rem/1.25 var(--tc-display); color: var(--tc-ink); overflow-wrap: break-word; }

/* The preview: the whole 16:9 picture (the wallpapers are exactly 16:9), full width between two ink rules */
.cyw-wp__shot { position: relative; margin: 0; border-top: 3px solid var(--tc-ink); border-bottom: 3px solid var(--tc-ink); background: var(--tc-sky-0); }
.cyw-wp__zoom { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; color: var(--tc-ink); }
.tc-root .cyw-wp__zoom img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A light shade on hover, and the focus ring drawn inside the picture (outside it would sit under the ink rules) */
.cyw-wp__zoom::after { content: ""; position: absolute; inset: 0; z-index: 1; background-color: rgba(15, 12, 44, 0); transition: background-color .2s ease; }
.cyw-wp__zoom:hover::after { background-color: rgba(15, 12, 44, .2); }
.tc-root .cyw-wp__zoom:focus-visible { outline: none; box-shadow: none; }
.tc-root .cyw-wp__zoom:focus-visible::after { box-shadow: inset 0 0 0 3px var(--tc-ink), inset 0 0 0 8px var(--tc-yellow), inset 0 0 0 10px var(--tc-ink); }
/* The magnifier: always shown (touch screens have no hover), yellow while the picture is pointed at or focused */
.cyw-wp__lens { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--tc-ink); border-radius: 50%; background: #fff; box-shadow: 0 3px 0 var(--tc-ink); font-size: 1.35rem; color: var(--tc-ink); transition: background-color .2s ease; }
.cyw-wp__zoom:hover .cyw-wp__lens, .cyw-wp__zoom:focus-visible .cyw-wp__lens { background: var(--tc-yellow); }
/* The "Wallpaper" label sits on the rule above the picture, so it hides as little of the wallpaper as it can */
.cyw-wp__badge { position: absolute; top: -15px; left: 14px; z-index: 2; padding: 3px 10px 2px; font-size: .8125rem; pointer-events: none; }

.cyw-wp__body { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 14px 18px 18px; }
.cyw-wp__desc { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--tc-ink-2); }
.cyw-wp__desc b { color: var(--tc-ink); }

/* ---------- Download menu: a <details> whose summary is the button and whose list floats under it ---------- */
.cyw-dl { position: relative; margin-top: auto; }
.cyw-dl__toggle { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 8px 16px 7px; border: 2px solid var(--tc-ink); border-radius: 999px; background: #fff; box-shadow: 0 3px 0 var(--tc-ink); font: 700 1rem/1.2 var(--tc-display); color: var(--tc-ink); text-align: center; cursor: pointer; list-style: none; -webkit-user-select: none; user-select: none; transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease; -webkit-tap-highlight-color: transparent; }
.cyw-dl__toggle::-webkit-details-marker { display: none; }
.cyw-dl__toggle::marker { content: ""; }
.cyw-dl__toggle i { font-size: 1.25rem; }
.cyw-dl__toggle:hover { background: var(--tc-butter); transform: translateY(-1px); box-shadow: 0 4px 0 var(--tc-ink); }
/* The narrowest phones, and the first two-column widths: the label stays on one line */
@media (max-width: 359.98px), (min-width: 640px) and (max-width: 699.98px) { .cyw-dl__toggle { gap: 6px; padding: 8px 12px 7px; } .cyw-dl__toggle > i:first-child { display: none; } }
.cyw-dl[open] > .cyw-dl__toggle { background: var(--tc-yellow); }
.cyw-dl__chev { transition: transform .2s ease; }
.cyw-dl[open] .cyw-dl__chev { transform: rotate(180deg); }
.cyw-dl__menu { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 4; display: grid; gap: 2px; padding: 6px; background: #fff; border: 3px solid var(--tc-ink); border-radius: 16px; box-shadow: 0 5px 0 var(--tc-ink); }
.cyw-dl__link { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border-radius: 10px; font: 600 .9375rem/1.3 var(--tc-display); color: var(--tc-ink); text-decoration: none; }
.cyw-dl__link i { font-size: 1.15rem; color: var(--tc-ink-2); }
.cyw-dl__link:hover, .cyw-dl__link:focus { background: var(--tc-butter); color: var(--tc-ink); text-decoration: none; }
/* The ring inside the item, so it doesn't spill over its neighbours */
.tc-root .cyw-dl__link:focus-visible { outline: 3px solid var(--tc-ink); outline-offset: -3px; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .cyw-wp:hover, .cyw-wp:focus-within, .cyw-dl__toggle:hover { transform: none; }
}