/* Hark's photo cards: cards that open with a photo, for items a reader picks between. They use hark.css's tokens, so link this after hark.css. style-gates: data */

/* @component photo cards */
/* The cards wrap into rows of as many as fit at --photo-card-min or wider. Every card in a row is as
   tall as the tallest, so the links at their feet line up. */
.photo-cards {
  --photo-card-min: 300px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--photo-card-min)), 1fr));
  gap: 16px;
}
.photo-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  border-radius: var(--r-l);
  background: var(--fill-tertiary);
  scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 72px);
}
.photo-card__stage {
  position: relative;
  display: grid;
  /* A wide photo must not widen the card past the screen. */
  grid-template-columns: minmax(0, 1fr);
  border-radius: var(--r-l) var(--r-l) 0 0;
}
.photo-card__rank {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  max-width: calc(100% - 28px);
  padding: 7px 12px;
  border-radius: var(--r-pill);
  background: var(--mat-agent);
  border: 1px solid var(--stroke-secondary);
  -webkit-backdrop-filter: var(--hark-blur);
  backdrop-filter: var(--hark-blur);
  font: var(--type-label);
}
/* A card without a photo puts its tag above the name, where it covers nothing. */
.photo-card__stage:not(:has(.photo-card__photos)) .photo-card__rank {
  position: static;
  justify-self: start;
  max-width: calc(100% - 40px);
  margin: 20px 20px 0;
}
/* The photos sit in a row the reader swipes through, one per view, in a frame sized by the card's
   width, never by a photo. hark-cards.js adds the dots and a tap that shows the next photo. */
.photo-card__photos {
  display: flex;
  aspect-ratio: 4 / 3;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: inherit;
  -webkit-tap-highlight-color: transparent;
}
.photo-card__photos::-webkit-scrollbar {
  display: none;
}
.photo-card__photos img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.photo-card__photos[data-turn] {
  cursor: pointer;
}
.photo-card__dots {
  position: absolute;
  inset: auto 0 12px;
  display: flex;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}
.photo-card__dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hero-text);
  opacity: 0.5;
  box-shadow: 0 1px 2px var(--hero-scrim-strong);
  transition: opacity var(--dur-quick) ease;
}
.photo-card__dots i.is-on {
  opacity: 1;
}
/* The kit owns the card's frame and the page owns its middle: the name and price always come first,
   and the foot (the Hark button, then the store link) always comes last, pushed to the bottom so a
   row's feet line up. Every other part keeps the order the markup gives it. */
.photo-card__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 14px 20px 20px;
}
.photo-card__head {
  order: -1;
}
.photo-card__body > .btn {
  order: 1;
  align-self: stretch;
  margin-top: auto;
}
.photo-card__body > :is(.link, .photo-card__link) {
  order: 2;
  margin-block: 0;
}
.photo-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.photo-card__head h3,
.photo-card__price {
  font: var(--type-heading);
}
.photo-card__price {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.photo-card__price s {
  margin-right: 6px;
  font: var(--type-small);
  color: var(--text-secondary);
}
.photo-card__meta {
  margin-top: -6px;
  font: var(--type-small);
  color: var(--text-secondary);
}
.photo-card__note {
  font: var(--type-body);
}
.photo-card .dot {
  margin-top: 0;
}

/* The store link is one part drawn two ways. Under a Hark button it is a plain link centred under the
   button; on a card without one it is the card's own full-width capsule. photo-card__link is the same
   part under the name older pages use. */
.photo-card__body:has(> .btn) > :is(.link, .photo-card__link) {
  align-self: center;
  text-align: center;
}
.photo-card__body:not(:has(> .btn)) > :is(.link, .photo-card__link) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 48px;
  margin-top: auto;
  padding: 0 20px;
  border-radius: var(--r-pill);
  background: var(--fill-primary);
  color: var(--text-primary-on);
  font: var(--type-body-strong);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 100ms ease-out;
}
@media (hover: hover) {
  .photo-card__body:not(:has(> .btn)) > :is(.link, .photo-card__link):hover {
    box-shadow: inset 0 0 0 100px var(--hover-wash-primary-on);
  }
}
.photo-card__body:not(:has(> .btn)) > :is(.link, .photo-card__link):active {
  transform: scale(0.97);
}
.photo-card__body:not(:has(> .btn)) > :is(.link, .photo-card__link)[target='_blank']::after {
  content: '\2197';
  font-size: 12px;
  color: var(--text-secondary-on);
}

/* @component photo card sheet */
/* A card a page's stylesheet shows as a tile (it sets --photo-card-tile: 1) opens its whole card in this
   sheet when tapped: the photos to swipe through, then the card's body. hark-cards.js builds it. */
/* On a tile, hark-cards.js makes the name and price a button that opens the sheet: the tile's keyboard
   stop. It shows a ring only for a keyboard. */
.photo-card__head[role='button'] {
  cursor: pointer;
  border-radius: 6px;
}
.photo-card__head[role='button']:focus {
  outline: none;
}
.photo-card__head[role='button']:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 3px;
}
.photo-card-sheet {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  align-items: end;
  background: rgb(0 0 0 / 0);
  transition: background 220ms ease;
}
.photo-card-sheet.is-open {
  background: rgb(0 0 0 / 0.42);
}
.photo-card-sheet__panel {
  position: relative;
  max-height: 92vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-radius: var(--r-l) var(--r-l) 0 0;
  background: var(--fill-primary-on);
  transform: translateY(100%);
  transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.photo-card-sheet.is-open .photo-card-sheet__panel {
  transform: none;
}
/* The panel takes focus when a tap opens the sheet, so a screen reader starts inside it; it draws no ring. */
.photo-card-sheet__panel:focus {
  outline: none;
}
/* The close button sits over the photo's top-right corner, across from the card's tag, and stays in
   view while the sheet scrolls. The bar that holds it takes no height, so the photo starts at the
   sheet's top edge. */
.photo-card-sheet__bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  height: 0;
}
/* The close button's middle lines up with the tag's on the photo (14px down, 34px tall). */
.photo-card-sheet__bar .photo-card-sheet__close {
  margin: 7px 12px 0 0;
}
.photo-card-sheet__close {
  flex: none;
  width: 48px;
  height: 48px;
  margin-left: auto;
  border: 0;
  border-radius: 50%;
  background: var(--mat-agent);
  -webkit-backdrop-filter: var(--hark-blur);
  backdrop-filter: var(--hark-blur);
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--text-primary);
  cursor: pointer;
}
.photo-card-sheet .photo-card,
.photo-card-sheet .photo-card__stage {
  border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
  .photo-card__dots i,
  .photo-card__body > :is(.link, .photo-card__link),
  .photo-card-sheet,
  .photo-card-sheet__panel {
    transition: none;
  }
}