/* ==========================================================================
   Free Cyber Security Awareness Posters (/free-cyber-security-awareness-posters)
   The page's own parts on top of the shared Toybox Calm look (assets/css/toybox-calm.css, loaded first by
   _ToyboxCalmHead): the poster grid and its cards. Every class starts with cyp-.
   Views/Public/Downloads.cshtml links it in its FinalHeader section with a ?v= cache buster from StaticAssetVersion.
   ========================================================================== */

/* The skip link shows above the first row of cards, in line with them */
.cyp-posters { position: relative; }
.cyp-posters > .tc-skip { top: -26px; left: 12px; }

/* The posters: one column (kept to a poster's width) on phones, then 2, 3 and 4 across (4 only where a card still
   fits its download button on one line) */
.cyp-grid { display: grid; grid-template-columns: minmax(0, 420px); justify-content: center; gap: 28px; }
@media (min-width: 640px) { .cyp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; gap: 26px 18px; } }
@media (min-width: 992px) { .cyp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 22px; } }
@media (min-width: 1300px) { .cyp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* A card: the title on a pale plate, the poster in an ink frame, its description and the download */
.cyp-card { 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; }
.cyp-card:hover, .cyp-card: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 */
.cyp-card::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; }
.tc-root .cyp-card__title { display: flex; align-items: center; justify-content: center; margin: 0; padding: 12px 14px 11px; background: var(--tc-sky-0); border-bottom: 3px solid var(--tc-ink); border-radius: 17px 17px 0 0; font: 700 1.125rem/1.25 var(--tc-display); color: var(--tc-ink); text-align: center; text-wrap: balance; overflow-wrap: anywhere; }
/* Side by side, every title plate is two lines tall, so the posters in a row line up */
@media (min-width: 640px) { .tc-root .cyp-card__title { min-height: calc(2.5em + 26px); } }

.cyp-card__shot { position: relative; margin: 18px 14px 0; }
.cyp-card__open { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border: 2px solid var(--tc-ink); border-radius: 12px; background: var(--tc-sky-0); }
.tc-root .cyp-card__open img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A light veil on hover and keyboard focus, as the old page's magnifier overlay did */
.cyp-card__open::after { content: ""; position: absolute; inset: 0; background: rgba(47, 42, 79, 0); transition: background-color .2s ease; }
.cyp-card__open:hover::after, .cyp-card__open:focus-visible::after { background: rgba(47, 42, 79, .16); }
/* The magnifier shows only on hover and keyboard focus, as on the old page: at rest it would cover the CanIPhish
   wordmark in the posters' bottom corner */
.cyp-card__zoom { position: absolute; right: 10px; bottom: 10px; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--tc-ink); border-radius: 50%; background: var(--tc-yellow); box-shadow: 0 3px 0 var(--tc-ink); font-size: 1.375rem; color: var(--tc-ink); opacity: 0; transition: opacity .2s ease; }
.cyp-card__open:hover .cyp-card__zoom, .cyp-card__open:focus-visible .cyp-card__zoom { opacity: 1; }
/* "Poster" or "Guide": a tab on the frame's top edge, so it hides as little of the poster as it can, letting clicks
   through to the image */
.cyp-card__badge { position: absolute; top: -12px; right: 12px; z-index: 1; padding: 3px 11px 2px; border: 2px solid var(--tc-ink); border-radius: 999px; background: var(--tc-green); box-shadow: 0 2px 0 var(--tc-ink); font: 700 .8125rem/1.3 var(--tc-display); color: var(--tc-ink); pointer-events: none; }
.cyp-card__badge--guide { background: var(--tc-teal); }

.tc-root .cyp-card__desc { margin: 12px 16px 16px; font-size: .9375rem; line-height: 1.5; color: var(--tc-ink-2); }
.cyp-card__label { color: var(--tc-ink); }
.cyp-card__dl { margin: auto 14px 16px; white-space: normal; text-align: center; }
.tc-root .cyp-card__dl:hover, .tc-root .cyp-card__dl:focus-visible { --b: var(--tc-yellow); }
/* On the narrowest phones the library card gives its cards a little more room, so the downloads stay on one line */
@media (max-width: 399.98px) {
  .cyp-posters .tc-card__body { padding-left: 12px; padding-right: 12px; }
  .cyp-card__shot { margin-left: 10px; margin-right: 10px; }
  .tc-root .cyp-card__desc { margin-left: 12px; margin-right: 12px; }
  .cyp-card__dl { margin-left: 10px; margin-right: 10px; padding-left: .8em; padding-right: .8em; }
}

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