/* ==========================================================================
   Grocery page: layered on top of site.css (never edit the shared files)
   Eight cards laid out on a 6-column grid so every row is full:
     1 feature (6)  |  3 cards (2+2+2)  |  2 cards (3+3)  |  duo (4) + ATM (2)
   ========================================================================== */

.page-grocery .phero__bg img { object-position: 50% 32%; }

.page-grocery .items {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  justify-content: stretch; align-items: stretch;
}
.page-grocery .items > .item { grid-column: span 2; }
.page-grocery .items > .item--feature { grid-column: 1 / -1; }
.page-grocery .items > .g-half { grid-column: span 3; }
.page-grocery .items > .g-duo { grid-column: span 4; }
.page-grocery .items > .g-side { grid-column: span 2; }

/* crop the three-up row so each photo keeps its subject */
#snacks .item__media img { object-position: 36% 50%; }
#deli-case .item__media img { object-position: 50% 62%; }
#freezer .item__media img { object-position: 26% 50%; }
#outdoor .item__media img { object-position: 50% 62%; }
#household .item__media img { object-position: 50% 70%; }

/* links inside a card sit on a shared baseline at the bottom of the row */
.page-grocery .item__body { display: flex; flex-direction: column; gap: 8px; }
.g-links { margin-top: auto; padding-top: 6px; }
.g-links .link-arrow { position: relative; }
.g-links .link-arrow::before { content: ""; position: absolute; inset: -10px -8px; }
/* the feature card centres its copy beside the photo instead of leaving a void under it */
.page-grocery .item--feature .item__body { justify-content: center; }

/* 21+ pill in the kicker */
.g-21 {
  display: inline-block; margin-right: 6px; padding: 3px 7px; border-radius: 6px;
  background: var(--red); color: #fff; letter-spacing: 0.06em; vertical-align: 1px;
}

/* lottery + tobacco: two portrait photos side by side, text beneath */
.item__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: var(--cream); }
.item__duo .item__media { aspect-ratio: 4 / 5; }
#lottery .item__media:first-child img { object-position: 50% 45%; }
#lottery .item__duo .item__media:last-child img { object-position: 50% 55%; }
.g-duo .item__body { padding: clamp(22px, 2.8vw, 34px) clamp(24px, 3vw, 40px) clamp(26px, 3vw, 38px); }

/* ATM: fills whatever height the lottery card sets, so the pair always matches */
@media (min-width: 961px) {
  .g-side .item__body { flex: none; }
  .g-side .item__media { flex: 1; aspect-ratio: auto; min-height: 280px; position: relative; }
  .g-side .item__media picture { position: absolute; inset: 0; }
  #atm .item__media img { object-position: 38% 50%; }
}

/* tablet: two columns, the single cards become full-width rows */
@media (min-width: 721px) and (max-width: 960px) {
  .page-grocery .items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-grocery .items > .item,
  .page-grocery .items > .g-half { grid-column: span 1; }
  .page-grocery .items > .item--feature,
  .page-grocery .items > .g-duo,
  .page-grocery .items > .g-row { grid-column: 1 / -1; }
  .g-row { flex-direction: row; }
  .g-row .item__media { flex: 1; aspect-ratio: auto; min-height: 320px; position: relative; }
  .g-row .item__media picture { position: absolute; inset: 0; }
  .g-row .item__body { flex: 1; align-content: center; padding: clamp(24px, 4vw, 40px); }
  #atm .item__media img { object-position: 40% 50%; }
}

/* phone: one column; landscape sources go back to landscape frames */
@media (max-width: 480px) {
  .page-grocery .phero__actions .btn { flex: 1 1 100%; }
}
@media (max-width: 720px) {
  .page-grocery .items { grid-template-columns: 1fr; }
  .page-grocery .items > .item,
  .page-grocery .items > .g-half,
  .page-grocery .items > .g-duo,
  .page-grocery .items > .g-side { grid-column: 1 / -1; }
  #snacks .item__media, #freezer .item__media { aspect-ratio: 4 / 3; }
  .g-side .item__media { aspect-ratio: 4 / 3; }
}

/* the feature card keeps the same text inset as its neighbours once it stacks */
@media (max-width: 960px) {
  .page-grocery .item--feature .item__body { padding: 22px 24px 26px; }
}

/* department links: rows fill their width, so seven cards never leave a hole in the last row */
.page-grocery .related { display: flex; flex-wrap: wrap; }
.page-grocery .related .rel { flex: 1 1 230px; }

/* "Back to home" keeps a 44px tap target without stretching its underline */
.back-home { margin-top: 28px; }
.back-home .link-arrow { position: relative; }
.back-home .link-arrow::before { content: ""; position: absolute; inset: -10px -8px; }

/* availability chips: three across on a phone, so Wixom never sits alone on a second row */
@media (max-width: 560px) {
  .page-grocery .avail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .page-grocery .avail li { min-width: 0; padding: 10px; }
  .page-grocery .avail b { font-size: 1.02rem; }
  .page-grocery .avail span { font-size: 0.78rem; white-space: nowrap; }
}

/* phone hero: the big 3D sign letters sit right behind the breadcrumb and eyebrow, so deepen the top of the scrim */
@media (max-width: 720px) {
  .page-grocery .phero::after { background: linear-gradient(0deg, rgba(5, 22, 14, 0.92) 0%, rgba(5, 22, 14, 0.72) 50%, rgba(5, 22, 14, 0.62) 100%); }
}