/*
 * This week's issues -- the rack of what was added in the last seven days,
 * between the featured shelf and the category grid.
 *
 * The cards are the landing page's own .featured-card, which styles-content.css
 * already dresses; that stylesheet lays them out as an absolutely positioned
 * cover-flow ring, so the only job here is to put them back in flow and on a
 * grid. Everything the card looks like stays defined in one place.
 */

/* The section is a plain block with no display of its own, so the hidden
   attribute already wins. Stated anyway: a later `.new-issues { display: grid }`
   would otherwise unhide an empty section without anyone noticing. */
.new-issues[hidden] { display: none; }

.new-issues {
  position: relative;
  color: var(--ink);
  background: var(--brand-tint);
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
}
.new-issues .section-heading { margin-bottom: clamp(32px, 4vw, 48px); }
/* The kicker is tuned for the dark sections; on the tint it fades out. */
.new-issues .kicker { color: var(--brand-deep); }

.new-issues-rack {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  gap: clamp(16px, 2.5vw, 30px);
  align-items: stretch;
}
.new-issues-rack .featured-card {
  position: static;
  width: auto;
  margin: 0;
  cursor: auto;
  transition: none;
}
.new-issues-rack .featured-card-tilt {
  position: relative;
  height: 100%;
  transform-style: flat;
}
.new-issues-rack .featured-card-depth {
  height: 100%;
  align-content: start;
  transform: none;
}
.new-issues-rack .featured-card-open { align-self: end; }

/* The "NEW" burst on the top corner of each cover: a jagged comic sticker,
   drawn in CSS so it needs no artwork and never covers the photo. */
.new-issues-rack .featured-card-tilt::after {
  content: "NEW";
  position: absolute;
  top: -18px;
  right: -12px;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  color: var(--ink);
  background: var(--gold);
  font-family: var(--font-display);
  font-size: .95rem;
  letter-spacing: .06em;
  transform: rotate(12deg);
  clip-path: polygon(
    50% 0%, 61% 14%, 79% 8%, 80% 27%, 98% 35%, 86% 50%, 98% 65%,
    80% 73%, 79% 92%, 61% 86%, 50% 100%, 39% 86%, 21% 92%, 20% 73%,
    2% 65%, 14% 50%, 2% 35%, 20% 27%, 21% 8%, 39% 14%
  );
}

@media (max-width: 680px) {
  .new-issues-rack .featured-card-tilt::after {
    top: -14px;
    right: -8px;
    width: 54px;
    height: 54px;
    font-size: .8rem;
  }
}