/* Stable card interaction for short landscape viewports, e.g. Nest Hub 1024×600. */
@media (min-width:901px) and (max-width:1100px), (min-width:901px) and (max-height:700px) {
  :root { --low-height-card-revision: "20260819-6"; }

  .project-card {
    display:grid !important;
    grid-template-rows:minmax(0,34%) minmax(0,1fr);
    padding:0 !important;
    transition:grid-template-rows .45s var(--ease) !important;
  }

  .project-card:hover,
  .project-card:focus,
  .project-card:focus-within,
  .project-card.is-active {
    grid-template-rows:minmax(0,38%) minmax(0,1fr);
  }

  .project-card__media,
  .project-card:hover .project-card__media,
  .project-card:focus .project-card__media,
  .project-card:focus-within .project-card__media,
  .project-card.is-active .project-card__media {
    grid-row:1;
    height:auto !important;
    min-height:0 !important;
    margin:10px 10px 0 !important;
    transition:none !important;
  }

  .project-card__content,
  .project-card:hover .project-card__content,
  .project-card:focus .project-card__content,
  .project-card:focus-within .project-card__content,
  .project-card.is-active .project-card__content {
    position:static !important;
    grid-row:2;
    min-height:0;
    margin:0 !important;
    padding:16px 18px 36px !important;
    align-self:stretch;
    justify-content:flex-end !important;
    transition:transform .45s var(--ease) !important;
  }

  .project-card:hover .project-card__content,
  .project-card:focus .project-card__content,
  .project-card:focus-within .project-card__content,
  .project-card.is-active .project-card__content {
    transform:translateY(-36px);
  }

  .project-card.is-touch-dismissed {
    grid-template-rows:minmax(0,34%) minmax(0,1fr);
  }

  .project-card.is-touch-dismissed .project-card__media {
    height:auto !important;
    min-height:0 !important;
  }

  .project-card.is-touch-dismissed .project-card__content {
    padding:16px 18px 36px !important;
    transform:none;
  }

  .project-card > .details-link { bottom:24px; }
  .project-card p { font-size:13px; line-height:1.24; }
  .project-card i { margin:12px 0 14px; }

}

/* A narrow but tall desktop (such as iPad Pro 1024×1366) needs room above
   the absolute CTA for descriptions that wrap across many lines. */
@media (min-width:901px) and (max-width:1100px) and (min-height:701px) {
  .project-card:hover .project-card__content,
  .project-card:focus .project-card__content,
  .project-card:focus-within .project-card__content,
  .project-card.is-active .project-card__content {
    padding-bottom:124px !important;
    transform:none;
    transition:padding .45s var(--ease) !important;
  }

  /* Touch browsers can retain :hover after the second tap. The dismissed
     state must win over that sticky pseudo-class. */
  .project-card.is-touch-dismissed .project-card__content,
  .project-card.is-touch-dismissed:hover .project-card__content,
  .project-card.is-touch-dismissed:focus .project-card__content,
  .project-card.is-touch-dismissed:focus-within .project-card__content {
    padding-bottom:36px !important;
    transform:none;
    transition:padding .45s var(--ease) !important;
  }
}

/* Only truly low screens need a compact modal constrained to the viewport. */
@media (min-width:901px) and (max-height:700px) {
  .modal {
    width:min(900px,calc(100vw - 36px));
    min-height:0;
    height:calc(100dvh - 36px);
    max-height:calc(100dvh - 36px);
    padding:48px 72px 40px;
    border-radius:20px;
  }

  .modal__close { top:22px; right:28px; }
  .modal h2,
  .modal__success h2 { font-size:32px; }
  .modal__line { margin:16px 0 36px; }
  .modal__bottom { margin-top:32px; min-height:124px; }
  .modal__submit,
  .modal__home { width:270px; height:54px; }
}

/* Four desktop cards at 912px leave about 210px per card; the default 225px
   CTA must not span or exceed the card. */
@media (min-width:901px) and (max-width:1000px) {
  .project-card:hover .details-link,
  .project-card:focus .details-link,
  .project-card:focus-within .details-link,
  .project-card.is-active .details-link {
    width:min(180px,calc(100% - 32px)) !important;
  }

  .project-card:hover .details-link::after,
  .project-card:focus .details-link::after,
  .project-card:focus-within .details-link::after,
  .project-card.is-active .details-link::after {
    left:calc(50% + 58px) !important;
  }

  .modal__submit,
  .modal__home {
    width:230px;
    height:52px;
  }
}