/* Entry cards (template-parts/home/entry-cards.php), converted from the guardrail
   sections/entry-cards.liquid stylesheet. Per-instance values arrive as --hg-entry-* custom
   properties on the section; the fallbacks are the Shopify schema defaults. Scroll motion
   (fade-up and image zoom) comes from the shared [data-hg-motion-*] layer in home.css/home.js. */

.hg-entry {
  padding-block: var(--hg-entry-pad-top-m, 32px) var(--hg-entry-pad-bot-m, 40px);
  background: var(--hg-entry-bg, #0b0b0b);
  color: var(--hg-entry-text, #f2ede4);
  font-family: var(--hg-font-body);
  font-size: 14px;
  line-height: 1.6;
}
.hg-entry__head {
  box-sizing: border-box;
  max-width: var(--hg-entry-width, 1440px);
  margin: 0 auto var(--hg-entry-head-gap, 18px);
  padding-inline: var(--hg-entry-side-m, 20px);
}
.hg-entry .hg-entry__title {
  margin: 0;
  color: var(--hg-entry-text, #f2ede4);
  font-size: var(--hg-entry-h-m, 23.4px);
  line-height: 1;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}

/* Phones: a sideways scroll-snap row; from 750px a grid of two columns, from 1024px of the set
   number (four columns of 166-230px cards broke the 34.5px titles mid-word on tablets and pushed
   the kicker out of the top of the card). */
.hg-entry__grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--hg-entry-col-m, 78%);
  gap: var(--hg-entry-gap-m, 8px);
  padding-inline: var(--hg-entry-side-m, 20px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--hg-entry-side-m, 20px);
  scrollbar-width: none;
}
.hg-entry__grid::-webkit-scrollbar { display: none; }
.hg-entry__card,
.hg-entry__card:hover,
.hg-entry__card:focus {
  color: var(--hg-entry-text, #f2ede4);
  text-decoration: none;
}
.hg-entry__card {
  position: relative;
  display: block;
  min-width: 0;
  aspect-ratio: var(--hg-entry-ratio-m, 4 / 5);
  overflow: hidden;
  border-radius: var(--hg-entry-radius, 6px);
  background: var(--hg-entry-card-bg, #161514);
  scroll-snap-align: start;
}
.hg-entry__card .hg-entry__img,
.hg-entry__card .hg-entry__placeholder {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: var(--hg-entry-pos, 50% 15%);
  transition: transform 0.7s;
}
@media (hover: hover) {
  a.hg-entry__card:hover .hg-entry__img { transform: scale(1.03); }
}
.hg-entry__card:focus-visible {
  outline: 2px solid var(--hg-entry-text, #f2ede4);
  outline-offset: 3px;
}
.hg-entry__shade {
  position: absolute;
  inset: auto 0 0;
  height: var(--hg-entry-shade-h, 55%);
  background: linear-gradient(to top, color-mix(in srgb, var(--hg-entry-shade, #0b0b0b) var(--hg-entry-shade-a, 92%), transparent), transparent);
}
.hg-entry__copy {
  position: absolute;
  inset-inline: 20px;
  bottom: 22px;
  min-width: 0;
  color: var(--hg-entry-text, #f2ede4);
}
.hg-entry__kicker {
  display: block;
  margin-block-end: 6px;
  font-size: var(--hg-entry-kicker, 12px);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  opacity: 0.85;
}
.hg-entry__card-title {
  display: block;
  font-size: var(--hg-entry-h-m, 23.4px);
  font-weight: 400;
  line-height: 1;
  overflow-wrap: anywhere;
}
.hg-entry--title-heading .hg-entry__card-title {
  font-family: var(--hg-font-heading);
  font-weight: 800;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
.hg-entry__btn {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 44px;
  margin-block-start: 10px;
  padding: 0 18px;
  border-radius: var(--hg-entry-btn-radius, 4px);
  background: var(--hg-entry-btn-bg, #f2ede4);
  color: var(--hg-entry-btn-text, #0b0b0b);
  font-size: var(--hg-entry-btn-size, 13px);
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

@media (min-width: 750px) {
  .hg-entry { padding-block: var(--hg-entry-pad-top, 32px) var(--hg-entry-pad-bottom, 40px); }
  .hg-entry__head { padding-inline: var(--hg-entry-side, 40px); }
  .hg-entry__grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--hg-entry-gap, 8px);
    padding-inline: var(--hg-entry-side, 40px);
    overflow: visible;
  }
  .hg-entry__card {
    aspect-ratio: var(--hg-entry-ratio, 3 / 4);
    max-height: var(--hg-entry-max-h, 720px);
  }
}
@media (min-width: 1024px) {
  .hg-entry__grid { grid-template-columns: repeat(var(--hg-entry-cols, 4), minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .hg-entry .hg-entry__title,
  .hg-entry__card-title { font-size: var(--hg-entry-h, 34.5px); }
}
@media (min-width: 1200px) {
  .hg-entry .hg-entry__title,
  .hg-entry__card-title { font-size: var(--hg-entry-h, 39.1px); }
}

@media (prefers-reduced-motion: reduce) {
  .hg-entry__card .hg-entry__img { transition: none; }
}