/* ==========================================================================
   Phishing Website Templates (/free-phishing-test/phishing-website-templates)
   The page's own parts on top of the shared Toybox Calm look (assets/css/toybox-calm.css, loaded first by
   _ToyboxCalmHead): the library's search strip, the website cards and the empty state. Every class starts with pwt-.
   Views/Public/WebTemplates.cshtml links it in its FinalHeader section with a ?v= cache buster from StaticAssetVersion;
   Scripts/phishing-website-templates/phishing-website-templates.js filters the library.
   ========================================================================== */
.pwt-library-section { padding-top: 0; }
.pwt-library__head { display: grid; gap: 4px 24px; }
.pwt-library__intro { margin: 0 0 14px; color: var(--tc-ink-2); max-width: 46rem; }
.pwt-controls { display: flex; flex-direction: column; gap: 6px; max-width: 34rem; }
.tc-root .pwt-controls .tc-input::-webkit-search-cancel-button { display: block; -webkit-appearance: searchfield-cancel-button; cursor: pointer; }

.pwt-results__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0 0 18px; }
.pwt-results__label { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 700 1.125rem/1.3 var(--tc-display); color: var(--tc-ink); }
.pwt-results__count { margin: 0 0 0 auto; font-weight: 600; color: var(--tc-ink-2); }
.pwt-results__count b { color: var(--tc-ink); font-variant-numeric: tabular-nums; }
@media (max-width: 575.98px) { .pwt-results__count { margin-left: 0; flex-basis: 100%; } }

/* The websites: a screenshot, the name and what it masquerades as */
.pwt-grid { display: grid; gap: 22px; }
@media (min-width: 600px) { .pwt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pwt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.pwt-site { 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; }
.pwt-site:hover, .pwt-site: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 */
.pwt-site::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; }
.pwt-site__shot { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 3px solid var(--tc-ink); border-radius: 17px 17px 0 0; background: var(--tc-sky-0); }
/* Every screenshot fills the same 16:9 frame (76 of 90 are 960 x 540), anchored at the top centre where the sign-in
   forms sit, so the grid's rows line up */
.tc-root .pwt-site__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.pwt-site__body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.tc-root .pwt-site__title { margin: 0 0 6px; font: 700 1.1875rem/1.25 var(--tc-display); color: var(--tc-ink); overflow-wrap: anywhere; }
.pwt-site__link::after { border-radius: 17px; }
.pwt-site__desc { position: relative; z-index: 2; margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--tc-ink-2); }

.pwt-empty { padding: 30px 18px; border: 2px dashed rgba(47, 42, 79, .35); border-radius: 18px; text-align: center; }
.pwt-empty p { margin: 0 0 10px; font: 600 1.0625rem/1.4 var(--tc-display); color: var(--tc-ink-2); }

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