/* port.css — Astro-port companion stylesheet. Loaded AFTER style.css (v4.2)
 * on pages that render the .image-listed-article grid (home, single posts,
 * about "Start Here", 404). style.css itself is kept verbatim; these rules
 * replace 2012-era JS behaviors with modern CSS per SPEC.md §B.3/§B.4.
 */

/* ---------------------------------------------------------------------------
 * §B.4.2 — Anystretch replacement (static cover backgrounds).
 * script.js looped the six .image-listed-article-bg divs and called
 * .anystretch(data-imgurl) — an absolutely-positioned cover <img>. cover +
 * center background is pixel-identical; the background-image is inlined per
 * tile by the templates. (The 150 ms fade-in and the loading.gif spinner are
 * gone — EXCLUSIONS.md.)
 */
.image-listed-article-bg {
  position: relative;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* ---------------------------------------------------------------------------
 * §B.4.3 — "#andCounting" reveal. Original JS: `if ($(window).width() > 768)
 * $("#andCounting").show()` once at load (never on resize). A media query is
 * strictly better and visually equivalent. Base rule in style.css:
 * #andCounting { display: none }.
 */
@media only screen and (min-width: 769px) {
  #andCounting {
    display: inline;
  }
}

/* ---------------------------------------------------------------------------
 * §B.4.4 — Related-posts hover reveal, CSS-only port of the script.js
 * >1024px `.no-touch` hover animation (300 ms opacity fade, info bar at
 * bottom:8px, excerpt shown). `(hover:hover)` replaces Modernizr's .no-touch
 * gate. Selectors are specificity-boosted (0,3,0) so they beat style.css's
 * ≥1024 pre-JS state `.no-touch .image-listed-article-info { bottom:-300% }`
 * regardless of stylesheet order. Touch/tablet behavior is unchanged: info
 * bar always visible, summary hidden.
 */
@media only screen and (min-width: 1025px) and (hover: hover) {
  .image-listed-article .image-listed-article-link .image-listed-article-info {
    opacity: 0;
    bottom: 8px;
    background: #02232d;
    background: rgba(2, 35, 45, 0.8);
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
  }
  .image-listed-article .image-listed-article-link .image-listed-article-info .entry-summary {
    display: block;
  }
  .image-listed-article:hover .image-listed-article-link .image-listed-article-info {
    opacity: 1;
  }
}