/* Article carousels at the end of Learn articles ("Keep reading", "Addiction guides").
   Markup is generated by build.py from data/articles.json; js/carousel.js adds the arrow buttons.
   Each card shows the article's guide cover standing on a plate tinted by category. */
.carousel {
  --cat-substances: #8E2B16;
  --cat-behaviors: #35503F;
  --cat-mind: #A06A2A;
  --cat-program: #3A322D;
  margin-top: 3.25rem;
  contain: inline-size;   /* the row's width never widens the article column */
}
.carousel + .carousel { margin-top: 2.5rem; }

.carousel__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.carousel .carousel__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: var(--tracking-display);
  color: var(--color-text);
}

.carousel__controls { display: flex; gap: .5rem; flex-shrink: 0; }
.carousel__controls[hidden] { display: none; }
.carousel__btn {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--color-border); border-radius: var(--r-pill);
  background: var(--color-bg-card); color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}
.carousel__btn:hover { background: var(--color-text); border-color: var(--color-text); color: var(--color-white); }
.carousel__btn:active { transform: scale(.94); }
.carousel__btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.carousel__btn[aria-disabled="true"] { opacity: .35; cursor: default; background: var(--color-bg-card); color: var(--color-text); border-color: var(--color-border); transform: none; }
/* Arrows are for mouse users; touch screens swipe. */
@media (hover: none), (pointer: coarse) { .carousel__controls { display: none; } }

.carousel .carousel__track {
  list-style: none;
  margin: 1.1rem -.4rem 0;
  padding: .5rem .4rem 1.25rem;
  scroll-padding-inline: .4rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78%, 16rem);
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}
/* Below the two-column layout the row runs to the screen edges, so the next card peeks in. */
@media (max-width: 1023.98px) {
  .carousel .carousel__track { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
}
@media (prefers-reduced-motion: no-preference) { .carousel .carousel__track { scroll-behavior: smooth; } }

.carousel .carousel__item { scroll-snap-align: start; display: flex; margin: 0; line-height: inherit; }

/* Outranks the article's underlined-link rule (.article__body a:not(.btn)). */
.carousel .carousel__track a.acard { text-decoration: none; }
.acard {
  --cat: var(--cat-program);
  position: relative;
  display: flex; flex-direction: column;
  width: 100%;
  padding: .45rem .45rem 1.1rem;
  border-radius: var(--r-card);
  background: var(--color-bg-card);
  box-shadow: 0 0 0 1px rgba(40, 10, 0, .07);
  color: var(--color-text);
  text-decoration: none;
  transition: box-shadow var(--duration-normal) var(--ease-out);
}
.acard--substances { --cat: var(--cat-substances); }
.acard--behaviors { --cat: var(--cat-behaviors); }
.acard--mind { --cat: var(--cat-mind); }
.acard--program { --cat: var(--cat-program); }

.acard__plate {
  display: grid; place-items: center;
  aspect-ratio: 4 / 3;
  border-radius: calc(var(--r-card) - .45rem);
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 50% 8%, rgba(255, 243, 201, .28), transparent 70%),
    var(--cat);
}
.acard__img {
  display: block;
  width: 42%; height: auto;   /* 80% of the plate's height */
  aspect-ratio: 360 / 509;
  object-fit: cover;
  border-radius: 2px 5px 5px 2px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 16px 22px -12px rgba(20, 6, 2, .65), 0 3px 6px rgba(20, 6, 2, .25);
  transform: translateY(6%) rotate(-2deg);
  transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}

.acard__kicker {
  display: inline-flex; align-items: center; gap: .45rem;
  margin: 1rem .6rem 0;
  font-size: .8125rem; font-weight: 500; line-height: 1.2;
  color: var(--cat);
}
.acard__kicker::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.acard__title {
  margin: .45rem .6rem 0;
  font-family: var(--font-display);
  font-size: 1.3rem; line-height: 1.2;
  letter-spacing: var(--tracking-headliner);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; text-decoration-thickness: 1px;
  transition: text-decoration-color var(--duration-fast);
}
.acard__desc { margin: .5rem .6rem 0; font-size: var(--text-small); line-height: 1.5; color: var(--color-text-2); }
.acard__time { margin: auto .6rem 0; padding-top: .9rem; font-size: .8125rem; color: var(--color-text-3); }

.acard:hover { box-shadow: 0 0 0 1px rgba(40, 10, 0, .1), var(--shadow-card); }
.acard:hover .acard__img, .acard:focus-visible .acard__img {
  transform: translateY(0) rotate(0deg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 24px 30px -14px rgba(20, 6, 2, .7), 0 4px 8px rgba(20, 6, 2, .25);
}
.acard:hover .acard__title, .acard:focus-visible .acard__title { text-decoration-color: currentColor; }
.acard:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.acard:active .acard__img { transform: translateY(2%) rotate(-1deg); }

@media (prefers-reduced-motion: reduce) {
  .acard, .acard__img, .acard__title, .carousel__btn { transition: none; }
  .acard__img, .acard:hover .acard__img, .acard:focus-visible .acard__img, .acard:active .acard__img { transform: none; }
}