/* ---- Homepage project carousel (index.html) ----
 * One row of project cards that runs edge to edge, curving like the inside
 * of a cylinder. It moves sideways and loops forever
 * (js/project-carousel.js). The card in the middle is full size; the ones
 * beside it are slightly smaller. Text uses the existing h4 and
 * description styles.
 */

.hcar {
  --hcar-card: 51vw; /* card width */
  --hcar-gap: 3vw; /* space between cards, and before the first one */
  padding-top: 2rem;
  padding-bottom: 5rem;
  /* Clip the sides so nothing can scroll it out of place. The side cards'
     outer edges swing toward you and grow, so let them spill past the top
     and bottom. */
  overflow: visible;
  overflow-x: clip;
}

/* The cards have their own load animation (js/project-carousel.js), so
   skip the page's usual fade-up for the carousel */
html.page-intro .dir-list > .hcar {
  animation: none;
}

.hcar_track {
  display: flex;
  column-gap: var(--hcar-gap);
  padding-left: var(--hcar-gap);
  /* The 3D view is centered on the middle of the thumbnails */
  perspective-origin: 50% calc(var(--hcar-card) / 3);
}

.hcar_card {
  position: relative; /* the selection highlighter draws inside the card, so it moves and blends with it */
  flex: none;
  width: var(--hcar-card);
  will-change: transform;
  /* Side cards shrink around the middle of their thumbnail, so all the
     thumbnails stay lined up (thumbnail height is width × 2/3) */
  transform-origin: 50% calc(var(--hcar-card) / 3);
  -webkit-user-drag: none;
}

/* Click and drag: no text selection, grabbing hand while dragging */
.hcar.is-dragging {
  user-select: none;
  cursor: grabbing;
}
.hcar.is-dragging * {
  cursor: grabbing;
}

/* ---- Page transition into a project (js/page-transition.js) ----
   While leaving: nothing can be clicked, and the page can't scroll or
   show scrollbars as the falling card and the zoom spill past its edges.
   (The scrollbar's space is kept so nothing shifts sideways.) */
html.is-leaving {
  overflow: hidden;
  scrollbar-gutter: stable;
}
html.is-leaving body {
  pointer-events: none;
}
/* The nav stays on top of the page zooming in behind it */
html.is-leaving .page-wrapper > nav {
  position: relative;
  z-index: 1;
}

/* 3:2 thumbnail, video or image filling the frame. It's the link to
   the project, and the only part of a card you can drag or click. */
.hcar_media {
  display: block;
  touch-action: pan-y; /* phones: sideways swipes move the carousel, up/down scrolls the page */
  aspect-ratio: 3 / 2;
  border-radius: var(--radius); /* the site's corner rounding (css/styles.css) */
  background-color: var(--off-white);
}

/* The rounded corners go on the video/image itself rather than clipping
   it with the box above. Chrome stutters when it has to clip a playing
   video like that while it moves. */
.hcar_media img,
.hcar_media video {
  border-radius: inherit;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}

/* .is-outlined: a hairline around thumbnails with a white background,
   so they don't blend into the white page. Same as the project grid's
   (css/project-grid.css). */
.hcar_media.is-outlined {
  position: relative;
}
.hcar_media.is-outlined::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--divider-width, .5px) solid var(--divider, #a6a6a6);
  border-radius: inherit;
  pointer-events: none;
}

/* Title on the left, description on the right */
.hcar_info {
  display: grid;
  grid-template-columns: 1fr 54%;
  column-gap: 2rem;
  align-items: start;
  padding-top: 1.25rem;
}

.hcar_info .project_description-text {
  width: auto;
  color: var(--black); /* black like the title, not the usual gray */
}

/* "Coming soon" stays gray */
.hcar_info .project_description-text.text-color-gray {
  color: var(--black-4);
}

/* In the carousel: the title's box sits flush with the thumbnail's left
   edge, the description's box flush with its right edge. (Its box is
   shrunk to its longest line by js/fit-text.js, so the text, still
   reading left to right, ends right at the edge.) */
.hcar .hcar_info .project_description-text {
  justify-self: end;
}

@media screen and (max-width: 767px) {
  /* Phones: the middle card fills most of the screen, the neighbors peek in at the sides */
  .hcar {
    --hcar-card: 84vw;
    --hcar-gap: .75rem;
    padding-bottom: 1.5rem; /* the footer's own top padding does the rest */
  }

  /* Description drops under the title, both lined up on the left */
  .hcar_info {
    grid-template-columns: 1fr;
    row-gap: .75rem;
  }

  .hcar .hcar_info .project_description-text {
    justify-self: start;
  }}