/* ---- /category/catalogs/ ---------------------------------------------------
   Restyles Hestia's own archive markup in place (the /local-retail/ approach):
   no template files, no theme edits, and staff keep publishing catalogs as
   ordinary posts tagged Catalog. Scoped to .pf-catalogs, which is added to the
   archive wrapper via the hestia_filter_archive_content_classes filter, so no
   other archive is touched.

   Class prefix is `pfk-`; Hestia + Bootstrap 3 own .card, .category, .row.
   Authored in px — the site sets html{font-size:62.5%}. -------------------- */

/* The wrapper carrying .pf-catalogs is itself the grid parent — the articles are
   its DIRECT children. .hestia-blogs is an ANCESTOR of it, not a descendant. */
body.category-catalogs .hestia-blogs { background: #f1f4f5; }
body.category-catalogs .hestia-blogs > .container,
body.category-catalogs .hestia-blogs > .container > .row { margin: 0; width: auto; }

.pf-catalogs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px 26px;
  width: 100%; max-width: 1140px;
  float: none; margin: 0 auto; padding: 44px 24px 76px;
  background: transparent;          /* .pf-ds paints --ground; the section carries it instead */
}
.pf-catalogs > article.card {
  margin: 0; padding: 0; border: 0; box-shadow: none; background: none;
  display: flex; flex-direction: column;
}
.pf-catalogs article.card > .row { display: block; margin: 0; width: auto; }
/* the two Bootstrap columns are floated and width-constrained — flatten them */
.pf-catalogs article.card [class*="col-ms-"],
.pf-catalogs article.card [class*="col-sm-"] {
  width: 100%; float: none; padding: 0; max-width: none;
}

/* ---- the cover ---- */
.pf-catalogs .card-image { margin: 0; border-radius: 0; box-shadow: none; }
.pf-catalogs .card-image a {
  display: block;
  aspect-ratio: 400 / 518;      /* every cover is letter-proportioned, so nothing crops */
  overflow: hidden;             /* without this the image's intrinsic height wins */
  border-radius: 3px;
  background: var(--surface-alt, #e8edef);
  border: 1px solid var(--rule, #d3dbdf);
  box-shadow: var(--shadow, 0 1px 2px rgba(16,23,28,.06), 0 8px 24px -12px rgba(16,23,28,.18));
  transition: box-shadow .14s, border-color .14s, transform .14s;
}
.pf-catalogs .card-image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 0; margin: 0; box-shadow: none; max-width: none;
  transform: none;
}
.pf-catalogs article.card:hover .card-image a,
.pf-catalogs .card-image a:focus-visible {
  border-color: var(--accent, #0085b2);
  box-shadow: var(--shadow-lift, 0 2px 4px rgba(16,23,28,.07), 0 14px 30px -14px rgba(16,23,28,.26));
  transform: translateY(-2px);
}
.pf-catalogs .card-image a:focus-visible { outline: 2px solid var(--accent-deep, #00637f); outline-offset: 3px; }

/* ---- the title ---- */
.pf-catalogs h2.card-title {
  margin: 14px 0 0; padding: 0;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 18px; font-weight: 600; line-height: 1.25;
}
.pf-catalogs h2.card-title a {
  color: var(--ink, #10171c); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 28px;
}
.pf-catalogs h2.card-title a:hover,
.pf-catalogs h2.card-title a:focus-visible { color: var(--accent-deep, #00637f); }
.pf-catalogs h2.card-title a:focus-visible { outline: 2px solid var(--accent-deep, #00637f); outline-offset: 2px; }

/* ---- suppressed chrome ----
   hestia_category() and hestia_blog_post_meta are filtered to empty in the
   mu-plugin, so nothing here hides real content — these only collapse the
   wrappers the theme still prints. */
.pf-catalogs .category:empty { display: none; }
.pf-catalogs .posted-by { display: none; }
.pf-catalogs .card-description:empty { display: none; }
.pf-catalogs .card-description { margin: 0; }

@media (max-width: 1100px) { .pf-catalogs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { .pf-catalogs { gap: 24px 20px; } }
@media (max-width: 619px)  {
  .pf-catalogs {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 16px;
    padding: 30px 18px 52px;
  }
  .pf-catalogs h2.card-title { font-size: 16px; margin-top: 11px; }
  .pf-catalogs h2.card-title a { min-height: 40px; }
}