/* ==========================================================================
   Stock Photo Catalog: catalog-head (search + category chips) · catalog-categories (rows of stock cards + photo modals)
   Cards are global (.stock-card / .stock-grid in styles/components.css). The modal is a native popover: no JS.
   ========================================================================== */

/* ---------- Head: search + chips ---------- */
/* head = global .page-hero (image right); the text column is wider here to fit the search bar */
@media (min-width: 1024px) { .catalog-head .page-hero__inner > * { max-width: var(--measure); } }
.catalog-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.catalog-chips .chip { text-decoration: none; color: var(--color-heading); }

/* ---------- Category rows ---------- */
.catalog-categories__list { display: flex; flex-direction: column; gap: var(--space-12); }
.catalog-category { scroll-margin-top: calc(var(--header-height) + var(--space-6)); }
.catalog-category__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-bottom: calc(var(--space-4) * var(--title-gap-scale)); }
.catalog-category__head h2 { font-size: var(--text-2xl); }
.catalog-category__count { font-size: var(--text-sm); color: var(--color-text-muted); }
.catalog-more { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); margin-top: var(--space-10); }

/* ---------- Card photo = button that opens the modal ---------- */
.stock-card__zoom { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.stock-card__zoom:focus-visible { outline: none; box-shadow: inset 0 0 0 var(--border-width-thick) var(--color-focus); }
.stock-card__zoom .img-placeholder { display: block; }
.stock-card__zoom-icon {
  position: absolute; right: var(--space-2); bottom: var(--space-2); display: grid; place-items: center;
  width: var(--space-8); height: var(--space-8); color: var(--color-heading); background: var(--color-surface); border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm); opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard);
}
.stock-card__zoom:hover .stock-card__zoom-icon, .stock-card__zoom:focus-visible .stock-card__zoom-icon { opacity: 1; }
@media (hover: none) { .stock-card__zoom-icon { opacity: 1; } }

/* ---------- Photo modal (native popover) ---------- */
.photo-modal {
  width: min(56rem, calc(100vw - var(--container-gutter) * 2)); max-height: calc(100vh - var(--space-8)); margin: auto; padding: 0; overflow: auto;
  color: var(--color-text); background: var(--color-surface); border: 0; border-radius: var(--card-radius); box-shadow: var(--shadow-lg);
}
.photo-modal:popover-open { display: grid; grid-template-columns: minmax(0, 1fr); }
.photo-modal::backdrop { background: var(--drawer-backdrop); -webkit-backdrop-filter: blur(var(--header-blur)); backdrop-filter: blur(var(--header-blur)); }
.photo-modal__close { position: absolute; top: var(--space-3); right: var(--space-3); z-index: var(--z-dropdown); background: var(--color-surface); border-radius: var(--radius-full); box-shadow: var(--shadow-md); }
.photo-modal__img { border: 0; border-radius: 0; }
.photo-modal__photo { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 0; background: var(--color-placeholder-bg); }
.photo-modal__photo[hidden], .photo-modal .img-placeholder[hidden] { display: none; }
.catalog-results { margin-bottom: var(--space-12); scroll-margin-top: calc(var(--header-height) + var(--space-6)); }
.catalog-results[hidden] { display: none; }
.catalog-status { font-size: var(--text-sm); color: var(--color-text-muted); text-align: center; }
.catalog-status[hidden] { display: none; }
.photo-modal__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-6); }
.photo-modal__title { font-size: var(--text-2xl); }
.photo-modal__credit { font-size: var(--text-sm); color: var(--color-text-muted); }
.photo-modal__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.photo-modal__desc { font-size: var(--text-sm); color: var(--color-text); }
.photo-modal__quality { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-success); }
.photo-modal__add { align-self: stretch; min-height: var(--control-height-lg); font-size: var(--text-base); margin-top: var(--space-2); }
@media (min-width: 768px) {
  .photo-modal:popover-open { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .photo-modal__body { justify-content: center; padding: var(--space-10) var(--space-8); }
}