/* Home project gallery: reserve the video's natural 16:9 height. The journey
   still owns the transform and the viewport-sized destination plane. */
.projects-inner {
  grid-template-rows: auto minmax(min-content, 1fr) auto;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #71c7db66 transparent;
}

.projects-gallery {
  --projects-card-gap: clamp(20px, 3vw, 48px);
  gap: var(--projects-card-gap);
  grid-auto-rows: max-content;
  align-content: center;
  align-items: stretch;
  min-height: min-content;
  padding: 12px 8px;
}

.projects .project-card {
  justify-content: flex-start;
  min-height: min-content;
}

/* Cancel the shared stylesheet's flex shrinking of the frame and its screen.
   Width may change with the viewport; height always follows that width. */
.projects .project-open,
.projects .project-window {
  display: block;
  flex: none;
}

.projects .project-screen,
.projects .project-card[data-video-src]:not([data-video-src=""]) .project-screen {
  flex: none;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

.projects .project-card[data-video-src]:not([data-video-src=""]) .project-screen :is(img, video) {
  object-fit: contain;
}

.projects .project-caption {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  align-items: flex-start;
}

.projects .project-caption p {
  flex: 1 0 auto;
  line-height: 1.45;
  min-height: 2.9em;
}

.projects .project-caption button {
  flex: none;
}

/* On shallow desktop windows, narrow all three cards by the same amount.
   This reduces the video height without squashing the frame or its contents. */
@media (min-width: 701px) and (max-height: 760px) {
  .projects-inner { gap: clamp(10px, 2dvh, 15px); }

  .projects-gallery {
    --projects-card-gap: clamp(18px, 2.5vw, 32px);
    --projects-card-width: clamp(230px, calc(60dvh - 52px), 400px);
    width: 100%;
    max-width: calc(3 * var(--projects-card-width) + 2 * var(--projects-card-gap) + 16px);
    margin-inline: auto;
    padding-block: 8px;
  }

  .projects .project-caption { padding-top: 12px; }
  .projects .project-caption h3 { margin-top: 6px; }
  .projects .project-caption p { margin-bottom: 9px; }
  .projects-footer { padding-top: 4px; }
}

/* A single headline line gives the work room in low landscape windows. The
   reveal script replaces <br> with spans, so both forms need the same layout. */
@media (min-width: 701px) and (max-height: 660px) {
  .projects { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .projects h2 { font-size: clamp(24px, min(3.2vw, 5dvh), 32px); }
  .projects h2 br { display: none; }
  .projects h2 .rv-linha { display: inline-block; }
  .projects h2 .rv-linha + .rv-linha { margin-left: .3em; }
  .projects .eyebrow { margin-bottom: 6px; }
  .projects-description { margin-top: 10px; line-height: 1.45; }
  .project-filters { padding-bottom: 0; }
  .projects .project-window { padding: 9px; }
  .projects .project-caption h3 { font-size: 15px; }
  .projects .project-caption p,
  .projects .project-caption button { font-size: 11px; }
}

/* Portrait phones keep the established horizontal gallery. Its row grows to
   the actual card height, with vertical scrolling only when all content will
   not fit in the destination. */
@media (max-width: 700px) {
  .projects-inner { gap: 12px; }
  .projects-gallery {
    display: flex;
    align-content: normal;
    align-items: stretch;
    min-height: min-content;
    padding: 12px 8px 16px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .projects .project-card { flex: 0 0 88%; }
  .projects .project-caption { padding: 14px 3% 0; }
  .projects .project-caption h3 { margin: 7px 0 5px; }
  .projects .project-caption p { margin: 0 0 10px; }
  .projects-footer { gap: 10px; }
  .projects-footer > span { padding-right: 0; }
}

@media (max-width: 700px) and (orientation: portrait) and (max-height: 740px) {
  .projects-inner { gap: 8px; }
  .projects .eyebrow { margin-bottom: 6px; }
  .projects-description { margin-top: 8px; }
  .project-filters { margin-top: 10px; }
  .projects .project-caption { padding-top: 10px; }
}

/* Landscape phones retain three equal previews where there is enough width.
   Stack each caption naturally instead of forcing its title and action into
   the same narrow line. Keep every description and action available. */
@media (orientation: landscape) and (max-height: 540px) and (max-width: 1100px) {
  .projects-inner { gap: 8px; }
  .projects-heading { gap: 16px; align-items: flex-end; }
  .projects h2 { font-size: clamp(21px, 5.5dvh, 27px); }
  .projects h2 br { display: none; }
  .projects h2 .rv-linha { display: inline-block; }
  .projects h2 .rv-linha + .rv-linha { margin-left: .3em; }
  .projects-description { font-size: 11px; line-height: 1.4; margin-top: 7px; }
  .project-filters { margin: 0; }
  .project-filters button { font-size: 10px; padding: 7px 12px; }
  .projects-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    --projects-card-gap: 18px;
    padding: 8px;
    overflow: visible;
  }
  .projects .project-window { padding: 6px; }
  .projects .project-caption { gap: 0; padding: 9px 3% 0; }
  .projects .project-caption .concept-label { font-size: 8px; }
  .projects .project-caption h3 { font-size: 12px; margin: 5px 0 4px; }
  .projects .project-caption p { font-size: 10px; margin: 0 0 7px; }
  .projects .project-caption button { font-size: 10px; padding-bottom: 4px; }
  .projects-footer { font-size: 9px; }
  .projects-footer > span { font-size: 8px; padding-right: 0; }
}

/* A very narrow landscape phone cannot hold three readable captions. The
   same swipe gallery as portrait offers every project at a useful size. */
@media (orientation: landscape) and (max-height: 540px) and (max-width: 639px) {
  .projects-heading { align-items: flex-start; }
  .projects h2 { font-size: 21px; }
  .projects-description { max-width: 360px; }
  .projects-gallery {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    align-content: normal;
  }
  .projects .project-card { flex-basis: min(82%, 280px); }
}