/* ================================================================
  SELL PAGES — /sell-pages/ categories bento grid
  Cards come from _data/sell-pages.yml; `size: large` adds --large
  (half width, two rows), otherwise the card is a quarter wide.
================================================================ */
/* Heading: same type scale as the /apps/ hero (apps-gallery.css), on a
   light background: tight eyebrow, 64px title, light DM Sans lede. */
.sell-pages__head {
  max-width: 560px;
  margin-bottom: calc(var(--js-padding) * 4);
}

.sell-pages__head .js-section__subtitle {
  display: block;
  margin: 0;
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 2.24px;
  color: var(--color-main-op7);
  opacity: 1;
}

.sell-pages__head .js-section__title {
  margin: var(--js-padding) 0 0;
  font-family: var(--font-main);
  font-size: 64px;
  font-weight: 500;
  line-height: 64px;
  letter-spacing: -1.92px;
}

.sell-pages__head .js-section__text {
  margin: calc(var(--js-padding) * 5 / 3) 0 0;
  font-family: var(--font-secondary);
  font-size: 18px;
  font-weight: 300;
  line-height: 28px;
  color: var(--color-main-op8);
}

.sell-pages__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--js-padding) * 2);
}

/* Card: browser bar + screenshot + title row + two-line description */
.sell-category {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--js-radius-xl);
  background: var(--color-background);
  color: var(--color-secondary);
  text-decoration: none;
  transition: var(--js-transition);
}

/* `translate`, not `transform`: the scroll fade in sell-pages.html animates
   the card's transform with GSAP, and the two compose instead of fighting. */
.sell-category:is(:hover, :focus-visible) {
  translate: 0 -4px;
  border-color: var(--color-main-op2);
  box-shadow: 0 16px 32px -24px var(--color-shadow);
}

.sell-category--large {
  grid-column: span 2;
  grid-row: span 2;
}

.sell-category__bar {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
  padding: 7px 10px;
  background: var(--color-main);
}

.sell-category__bar > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-background);
}

.sell-category__bar > span:first-child {
  background: var(--color-accent);
}

.sell-category__bar > span:last-child {
  opacity: 0.5;
}

/* The screenshot fills whatever height the row leaves, so the large card's
   image grows to match the two cards stacked next to it. */
.sell-category__media {
  position: relative;
  flex: 1 1 auto;
  min-height: 160px;
  overflow: hidden;
  background: var(--color-main-op05);
}

.sell-category__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.sell-category__body {
  display: flex;
  flex-direction: column;
  gap: calc(var(--js-padding) * 0.5);
  padding: var(--js-padding) calc(var(--js-padding) * 1.25) calc(var(--js-padding) * 1.25);
}

.sell-category__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--js-padding);
}

.sell-category__title {
  font-size: calc(var(--font-base-size) * 1.25);
  font-weight: 600;
  line-height: 1.2;
}

/* Featured cards: more air around the copy and a readable description,
   so the big title doesn't sit on top of small print. */
.sell-category--large .sell-category__body {
  gap: calc(var(--js-padding) * 0.75);
  padding: calc(var(--js-padding) * 1.5) calc(var(--js-padding) * 2) calc(var(--js-padding) * 2);
}

.sell-category--large .sell-category__title {
  font-size: calc(var(--font-base-size) * 2.25);
  line-height: 1.1;
}

.sell-category--large .sell-category__arrow {
  width: 32px;
  height: 32px;
  font-size: 16px;
}

.sell-category--large .sell-category__text {
  max-width: 520px;
  font-size: var(--font-base-size);
}

.sell-category__arrow {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-main);
  color: var(--color-accent);
  font-size: 14px;
  transition: var(--js-transition);
}

.sell-category:is(:hover, :focus-visible) .sell-category__arrow {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

.sell-category__text {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: calc(var(--font-base-size) * 0.875);
  line-height: 1.5;
  color: var(--color-main-op7);
}

/* Tablet: two columns, large cards flatten to full-width rows. Dense flow
   pulls the next single card up so a large card never leaves a hole. */
@media (max-width: 991px) {
  .sell-pages__head .js-section__title {
    font-size: 50px;
    line-height: 52px;
  }

  .sell-pages__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: dense;
  }

  .sell-category--large {
    grid-row: auto;
  }

  .sell-category--large .sell-category__media {
    min-height: 280px;
  }

  .sell-category--large .sell-category__title {
    font-size: calc(var(--font-base-size) * 1.75);
  }
}

/* Phone: one column, every card the same */
@media (max-width: 575px) {
  .sell-pages__head .js-section__subtitle {
    letter-spacing: 1.68px;
  }

  .sell-pages__head .js-section__title {
    margin-top: 14px;
    font-size: 40px !important;
    font-weight: 400;
    line-height: 40px;
  }

  .sell-pages__head .js-section__text {
    margin-top: 18px;
  }

  .sell-pages__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sell-category--large {
    grid-column: auto;
  }

  .sell-category__media,
  .sell-category--large .sell-category__media {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .sell-category__title,
  .sell-category--large .sell-category__title {
    font-size: calc(var(--font-base-size) * 1.375);
  }

  .sell-category--large .sell-category__body {
    gap: calc(var(--js-padding) * 0.5);
    padding: var(--js-padding) calc(var(--js-padding) * 1.25) calc(var(--js-padding) * 1.25);
  }

  .sell-category--large .sell-category__arrow {
    width: 24px;
    height: 24px;
    font-size: 14px;
  }

  .sell-category--large .sell-category__text {
    font-size: calc(var(--font-base-size) * 0.875);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sell-category {
    transition: none;
  }

  .sell-category:is(:hover, :focus-visible) {
    translate: none;
  }
}

/* A keyboard user must see a card even before its scroll animation runs. */
.sell-category:focus-visible {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}