/* Shared presentation for the three portfolio project pages. */
@layer project-page {
  .project-page--showcase {
    --project-accent-text: #ae4710;
    padding-block: 2rem;
    place-items: safe center;
  }

  .project-page--showcase .project-dashboard {
    width: min(1200px, 100%);
    height: auto;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "header header header header header header header header header header header header"
      "hero hero hero hero hero hero hero details details details details details"
      "review review review review review review review tagsdur tagsdur tagsdur tagsdur tagsdur"
      "review review review review review review review cta cta cta cta cta";
  }

  .project-page--showcase .project-header__title { line-height: 1.15; }

  .project-header__subtitle {
    margin-top: 0.35rem;
    color: #666;
    font-size: 0.8125rem;
  }


  .project-page--showcase .project-block--details {
    overflow: visible;
    justify-content: center;
  }
  .project-page--showcase .project-block--review { justify-content: center; }
  .project-page--showcase .project-block--review > .project-block__quote { flex: 0; }
  .project-page--showcase .project-block__quote-text { font-size: 0.875rem; }
  .project-page--showcase .project-block { min-width: 0; }
  .project-page--beaucourt { --showcase-frame: #11273d; }
  .project-page--les-ecrins { --showcase-frame: #3d4747; }
  .project-page--showcase .project-block__grid { gap: 1.25rem; }
  .project-page--showcase .project-block__item-text { font-size: 0.8125rem; line-height: 1.65; }
  .project-page--showcase .project-block--tagsdur { gap: 1.25rem; justify-content: center; }
  .project-page--showcase .project-block--cta { flex-direction: column; justify-content: center; gap: 0.5rem; padding: 1rem 1.5rem; }
  .project-page--showcase .project-block__cta-button { white-space: nowrap; }
  .project-page--showcase .project-block--cta:focus-visible { outline: 2px solid #111; outline-offset: 4px; }

  .project-showcase {
    position: relative;
    display: block;
    min-height: 340px;
    max-height: none;
    background: #fbf9f4;
    border: 1px solid #f37021;
    padding: 1.25rem 1.5rem 2.5rem;
  }

  .project-showcase__desktop {
    width: 91%;
    overflow: hidden;
    border: 1px solid rgba(38, 66, 51, 0.16);
    border-radius: 0.625rem;
    background: #f4f0e7;
    box-shadow: 0 10px 28px rgba(27, 48, 37, 0.12);
  }

  .project-showcase__browser {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 1.5rem;
    padding: 0.375rem 0.625rem;
    color: #586359;
    font-size: 0.5rem;
  }

  .project-showcase__lights { display: flex; gap: 0.2rem; }
  .project-showcase__lights i { width: 0.25rem; height: 0.25rem; border-radius: 50%; background: #b9bfb6; }

  .project-showcase__mobile {
    position: absolute;
    width: 22%;
    right: 4%;
    bottom: 2.75rem;
    overflow: hidden;
    border: clamp(3px, 0.45vw, 5px) solid var(--showcase-frame, #243d30);
    border-radius: clamp(0.65rem, 1.5vw, 1.25rem);
    background: #f4f0e7;
    box-shadow: 0 10px 24px rgba(27, 48, 37, 0.2);
  }

  .project-page--showcase .project-showcase img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
    object-fit: contain;
  }

  .project-showcase__caption {
    position: absolute;
    bottom: 1rem;
    left: 1.5rem;
    right: 1.5rem;
    font-size: 0.6875rem;
    color: #4f6054;
  }

  .project-reviews { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .project-reviews .project-block__quote { justify-content: space-between; }
  .project-reviews .project-block__quote + .project-block__quote { border-left: 1px solid rgba(243, 112, 33, 0.15); padding-left: 1.5rem; }
  .project-reviews .project-block__quote-text { font-size: 0.8125rem; }
  .project-reviews .project-block__quote-author span { display: block; margin-top: 0.2rem; color: #666; font-family: 'Inter', system-ui, sans-serif; font-size: 0.625rem; font-weight: 400; }
  .project-delivery { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; }
  .project-delivery .project-block__heading { margin: 0; }

  @media (max-width: 1024px) {
    .project-page--showcase { padding-top: 4rem; place-items: start center; }
    .project-page--showcase .project-dashboard {
      grid-template-areas:
        "header header"
        "hero hero"
        "details details"
        "review review"
        "tagsdur tagsdur"
        "cta cta";
    }
    .project-showcase { min-height: 0; padding: 2rem 2rem 3rem; }
    .project-showcase__desktop { width: 87%; }
  }

  @media (max-width: 767px) {
    .project-page--showcase { padding: 4.5rem 1rem 1.5rem; }
    .project-page--showcase .project-dashboard {
      grid-template-areas: "header" "hero" "details" "review" "tagsdur" "cta";
    }
    .project-page--showcase .project-header__title {
      font-size: clamp(1.125rem, 4.5vw, 2rem);
      text-wrap: balance;
    }
    .project-header__subtitle { font-size: 0.75rem; }
    .project-showcase { padding: 1rem 0.75rem 2.5rem; }
    .project-showcase__desktop { width: 89%; border-radius: 0.375rem; }
    .project-showcase__browser { min-height: 1rem; padding: 0.2rem 0.375rem; font-size: 0.375rem; }
    .project-showcase__mobile { width: 24%; right: 3%; bottom: 2.25rem; }
    .project-showcase__caption { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; font-size: 0.625rem; }
    .project-reviews { grid-template-columns: 1fr; gap: 1rem; }
    .project-reviews .project-block__quote + .project-block__quote { border-left: 0; padding-left: 0; border-top: 1px solid rgba(243, 112, 33, 0.15); padding-top: 1rem; }
    .project-page--showcase .project-block--cta { flex-direction: column; }
  }
}