/* =========================
   PROJECT SINGLE
   Scoped: .project-page
   ========================= */

.project-page{
  background: #fff;
  color: var(--color-text, #111);
}

/* wrapper */
.project-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: var(--page-pad);
}

/* Offset ancore */
.project-page .project-section{
  scroll-margin-top: calc(var(--header-h, 72px) + 18px);
}

/* focus */
.project-page :focus-visible{
  outline: 3px solid rgba(146,42,94,0.25);
  outline-offset: 2px;
}

/* =========================
   HERO
   ========================= */
.project-hero{
  padding: 0;
  background: #fff;
  border-bottom: 3px solid #000;
}

.project-hero__media{
  margin: 0;
  overflow: hidden;
  background: #f4f4f4;
}

.project-hero__media img{
  width: 100%;
  height: auto;
  max-height: clamp(300px, 56vh, 500px);
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* =========================
   LAYOUT
   ========================= */
.project-main{ background: #fff; }

.project-layout{
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  column-gap: 3rem;
  align-items: start;
  padding-block: 2.5rem 3.5rem;
}

.project-layout--no-border{ border-top: none; }

/* single column */
.project-layout--single{
  grid-template-columns: 1fr;
  column-gap: 0;
}

/* =========================
   CONTENT
   ========================= */
.project-content{
  width: 100%;
  min-width: 0;
  max-width: none; /* full width container */
}

/* Tipografia base */
.project-content p,
.project-content ul,
.project-content ol{
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text, #111);
}

.project-content p + p{ margin-top: 0.9rem; }
.project-content p + ul,
.project-content ul + p{ margin-top: 0.9rem; }

.project-content ul,
.project-content ol{ padding-left: 1.15rem; }

.project-content li + li{ margin-top: 0.45rem; }

/* ✅ misura leggibile SOLO per i blocchi testuali */
.project-prose{
  max-width: 82ch;
}

/* su mobile un filo più stretto per leggibilità */
@media (max-width: 640px){
  .project-prose{ max-width: 72ch; }
}

/* =========================
   TEXT RAIL — allinea testi con colonna a destra del logo
   ========================= */

/* Regola: sposta tutta la "colonna testo" verso destra */
.project-page{
  /* Regola questa misura finché coincide perfettamente col testo accanto al logo */
  --text-rail: clamp(100px, 18vw, 100px);
}

/* rail applicabile a header e sezioni */
.project-text-rail{
  padding-left: var(--text-rail);
}

/* Il blocco intro ha già logo+testo in flex: non aggiungere padding */
.project-intro{ padding-left: 30; }

/* Se vuoi che anche i titoli sezioni abbiano la riga brand allineata */
.project-text-rail .project-section__title{
  margin-left: 0;
}

/* Mobile: niente offset (tutto a filo) */
@media (max-width: 720px){
  .project-text-rail{
    padding-left: 0;
  }
}


/* =========================
   HEADER
   ========================= */
.project-eyebrow{
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted, #625d5d);
}

.project-title{
  margin: 0;
  font-size: clamp(2.1rem, 3.2vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 1.02;
}

.project-subtitle{
  margin-top: 1rem;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--color-muted, #625d5d);
}

/* NAV + DONA */
.project-navrow{
  margin-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.2rem;
  align-items: center;
}

.project-backnav{
  margin-top: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.2rem;
  align-items: baseline;
}

.project-backnav .link-underline{
  font-size: 0.85rem;
}

/* CTA come in progetti.html */
.project-cta{
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  white-space: nowrap;
  color: inherit;
}

.project-cta--donate{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.7rem;
  border-radius: 0;
  border: 1.5px solid var(--color-accent, #922A5E);
  background: #fff;
  color: #111;
  text-decoration: none;
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.project-cta--donate:hover,
.project-cta--donate:focus-visible{
  background: var(--color-accent, #922A5E);
  color: #fff;
}

@media (min-width: 720px){
  .project-navrow .project-cta--donate{ margin-left: auto; }
}

@media (max-width: 640px){
  .project-navrow{ align-items: stretch; }
  .project-navrow .project-cta--donate{
    width: 100%;
    text-align: center;
  }
}

/* =========================
   SEZIONI
   ========================= */
.project-section{ margin-top: 2.4rem; }

.project-section__title{
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
}

.project-section__title::after{
  content:"";
  display:block;
  width: 34px;
  height: 2px;
  background: var(--color-accent, #922A5E);
  margin-top: 0.45rem;
}

/* =========================
   GALLERIA thumb (bottoni)
   ========================= */
.project-gallery__item{
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.project-gallery__item figure{ margin: 0; }

.project-gallery__img{
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid rgba(0,0,0,0.10);
}

/* DONA inline */
.project-inline-cta{
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}
@media (max-width: 640px){
  .project-inline-cta .project-cta--donate{
    width: 100%;
    text-align: center;
  }
}

/* =========================
   LIGHTBOX
   ========================= */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.lightbox.is-open{ display: block; }

.lightbox__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
}

.lightbox__dialog{
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 5vh auto;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  padding: 0.75rem;
  max-height: 90vh;
  overflow: hidden;
}

.lightbox__figure{
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 0.6rem;
  max-height: calc(90vh - 3.2rem);
}

.lightbox__img{
  width: 100%;
  height: auto;
  max-height: calc(90vh - 7rem);
  object-fit: contain;
  display: block;
}

.lightbox__caption{
  margin: 0;
  color: var(--color-muted, #625d5d);
  line-height: 1.5;
}

.lightbox__close,
.lightbox__arrow{
  width: 44px;
  height: 44px;
  border: 1px solid rgba(0,0,0,0.15);
  background: #fff;
  cursor: pointer;
  line-height: 1;
}

.lightbox__close{
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  font-size: 1.8rem;
}

.lightbox__arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
}

.lightbox__arrow--prev{ left: 0.4rem; }
.lightbox__arrow--next{ right: 0.4rem; }

.lightbox__close:focus-visible,
.lightbox__arrow:focus-visible{
  outline: 3px solid rgba(146,42,94,0.25);
  outline-offset: 2px;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 640px){
  .project-hero{ border-bottom: 0; }
  .project-hero__media{ border-bottom: 3px solid #000; }

  .project-layout{
    grid-template-columns: 1fr;
    row-gap: 1.4rem;
    padding-block: 1.6rem 2.6rem;
  }

  .lightbox__dialog{
    margin: 0;
    height: 100%;
    max-width: none;
    max-height: none;
    border: 0;
    padding: 0.75rem;
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

  .lightbox__img{ max-height: 70vh; }

  .lightbox__arrow{
    top: auto;
    bottom: 0.6rem;
    transform: none;
  }
  .lightbox__arrow--prev{ left: 0.6rem; }
  .lightbox__arrow--next{ right: 0.6rem; }
}
/* =========================
   TEXT RAIL + INTRO ALIGN
   ========================= */

.project-page{
  /* regola questa per match perfetto con “colonna testo” */
  --text-rail: clamp(100px, 18vw, 100px);
}

/* rail per tutto il testo */
.project-text-rail{
  padding-left: var(--text-rail);
}

/* ✅ sposta anche il blocco logo+testo, così il LOGO non resta a sinistra */
.project-intro{
  margin-left: var(--text-rail);
  max-width: calc(100% - var(--text-rail));
}

/* Mobile: tutto a filo */
@media (max-width: 720px){
  .project-text-rail{ padding-left: 0; }
  .project-intro{
    margin-left: 0;
    max-width: 100%;
  }
}
/* =========================
   CTA FINALE — centrata
   ========================= */
.project-inline-cta{
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  display: flex;
  justify-content: center;  /* ✅ centra */
}

/* opzionale: un po' più “aria” */
.project-inline-cta .project-cta--donate{
  min-width: 180px;
}

/* mobile: se vuoi ancora full width */
@media (max-width: 640px){
  .project-inline-cta{
    justify-content: center; /* resta centrata */
  }
  .project-inline-cta .project-cta--donate{
    width: 100%;
    max-width: 420px;       /* ✅ centrato ma non enorme */
  }
}
@media (max-width: 720px){
  /* già hai: flex-direction: column; */
  .project-intro{
    align-items: stretch; /* testo a tutta larghezza */
  }

  /* ✅ centra solo il logo */
  .project-logo{
    margin-inline: auto;     /* centra il box */
    text-align: center;
  }

  .project-logo img{
    margin-inline: auto;     /* centra l'immagine */
  }
}
/* =========================
   GALLERIA — thumbnails piccole
   ========================= */

.project-gallery__grid{
  margin-top: 1.2rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* ✅ desktop: 4 piccole */
  gap: 0.9rem;
}

@media (max-width: 980px){
  .project-gallery__grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* ✅ tablet: 3 */
  }
}

@media (max-width: 640px){
  .project-gallery__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* ✅ mobile: 2 */
  }
}

/* thumbnail uniformi */
.project-gallery__img{
  width: 100%;
  aspect-ratio: 4 / 3;     /* oppure 1/1 se le vuoi più "piccole" visivamente */
  object-fit: cover;
  display: block;
  border: 1px solid rgba(0,0,0,0.10);
}

/* IMPORTANT: annulla eventuali regole che le forzano a 1 colonna */
@media (max-width: 901px){
  .project-gallery__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* =========================
   RAIL SINISTRO (menu + meta) – stile screenshot
   Scoped: .project-page
   ========================= */

.project-page .project-layout{
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  min-width: 0;
}

.project-page .project-rail{
  position: sticky;
  top: calc(var(--header-h, 72px) + 24px);
  align-self: start;

  border-left: 1px solid #eee;
  padding-left: 1rem;

  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.project-page .project-meta{
  margin: 0;
}

.project-page .project-meta__row{
  margin: 0 0 0.9rem;
}

.project-page .project-meta__k{
  margin: 0 0 0.25rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #666;
  font-weight: 600;
}

.project-page .project-meta__v{
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #111;
}

.project-page .project-rail__nav{
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.project-page .project-rail__link{
  display: inline-flex;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a8a8a;
  text-decoration: none;
}

.project-page .project-rail__link:hover,
.project-page .project-rail__link:focus{
  color: #111;
}

.project-page .project-kicker{
  margin: 0 0 0.65rem;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
}

/* =========================
   QUOTE full-width – stile screenshot
   ========================= */

.project-page .project-pullquote{
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  background: #fff;
  padding: clamp(2.25rem, 4vw, 3.25rem) 0;
}

.project-page .project-pullquote__inner{
  margin: 0;
  position: relative;
  max-width: 920px;
  margin-inline: auto;
  padding-left: 1.3rem;
}

.project-page .project-pullquote__bar{
  position: absolute;
  left: 0;
  top: 0.25rem;
  width: 3px;
  height: 52px;
  background: var(--brand, #922A5E);
}

.project-page .project-pullquote__text{
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.05;
  font-size: clamp(1.35rem, 2.2vw, 2.15rem);
  color: #111;
}

.project-page .project-pullquote__byline{
  margin-top: 1.1rem;
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #777;
}

/* =========================
   MOBILE: rail orizzontale sticky (come pattern OSF)
   ========================= */
@media (max-width: 900px){
  .project-page .project-layout{
    grid-template-columns: 1fr;
  }

  .project-page .project-rail{
    position: sticky;
    top: calc(var(--header-h, 72px) + 8px);
    z-index: 5;

    border-left: 0;
    border-bottom: 1px solid #eee;
    padding: 0.9rem 0;

    flex-direction: row;
    align-items: center;
    gap: 1rem;

    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .project-page .project-rail::-webkit-scrollbar{
    display: none;
  }

  .project-page .project-rail__meta{
    display: none;
  }

  .project-page .project-rail__nav{
    flex-direction: row;
    gap: 1rem;
    padding-inline: var(--page-pad, 1.25rem);
  }

  .project-page .project-pullquote__inner{
    padding-left: 1.1rem;
  }

  .project-page .project-pullquote__bar{
    height: 44px;
  }
}
/* =========================================================
   CASA DELLA DIVINA PROVVIDENZA – fixes (scoped)
   ========================================================= */

.project-page--divina .project-layout--divina{
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 1.75rem; /* testo più a sinistra */
  align-items: start;
  min-width: 0;
}

/* rail: una sola, sticky pulito */
.project-page--divina .project-rail{
  grid-column: 1;
  grid-row: 1 / -1; /* resta unica per tutta la pagina */
  position: sticky;
  top: calc(var(--header-h, 72px) + 24px);
  align-self: start;

  border-left: 1px solid #eee;
  padding-left: 1rem;

  display: flex;
  flex-direction: column;
  gap: 1.15rem;

  background: #fff;
}

/* contenuto: sempre colonna 2 */
.project-page--divina .project-content{
  grid-column: 2;
  min-width: 0;
}

/* riduci rientri “testo troppo a destra” */
.project-page--divina .project-text-rail{
  margin-left: 0;
  padding-left: 0;
  max-width: 760px; /* mantiene ritmo ma non centra troppo */
}

/* meta (LUOGO/AMBITO/...) */
.project-page--divina .project-meta{
  margin: 0;
}
.project-page--divina .project-meta__row{
  margin: 0 0 0.9rem;
}
.project-page--divina .project-meta__k{
  margin: 0 0 0.25rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #666;
  font-weight: 600;
}
.project-page--divina .project-meta__v{
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #111;
}

/* nav rail */
.project-page--divina .project-rail__nav{
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.project-page--divina .project-rail__link{
  display: inline-flex;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9a9a9a;
  text-decoration: none;
}
.project-page--divina .project-rail__link:hover,
.project-page--divina .project-rail__link:focus{
  color: #111;
}

/* attivo brand */
.project-page--divina .project-rail__link.is-active,
.project-page--divina .project-rail__link[aria-current="true"]{
  color: var(--brand, #922A5E);
}

/* QUOTE: span full grid */
.project-page--divina .project-pullquote--span{
  grid-column: 1 / -1;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: clamp(2.25rem, 4vw, 3.25rem) 0;
  background: #fff;
}
.project-page--divina .project-pullquote__inner{
  position: relative;
  max-width: 920px;
  margin-inline: auto;
  padding-left: 1.3rem;
}
.project-page--divina .project-pullquote__bar{
  position: absolute;
  left: 0;
  top: 0.25rem;
  width: 3px;
  height: 52px;
  background: var(--brand, #922A5E);
}
.project-page--divina .project-pullquote__text{
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.05;
  font-size: clamp(1.35rem, 2.2vw, 2.15rem);
  color: #111;
}
.project-page--divina .project-pullquote__byline{
  margin: 1.1rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #777;
}

/* CTA finale: FIX sovrapposizione */
.project-page--divina .project-inline-cta{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: flex-start;
  margin-top: 1.75rem;
}
.project-page--divina .project-inline-cta .project-cta{
  white-space: normal;
}

/* MOBILE: rail orizzontale sticky (NON duplicato, perché rail unica) */
@media (max-width: 900px){
  .project-page--divina .project-layout--divina{
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .project-page--divina .project-rail{
    grid-column: 1;
    grid-row: auto;
    top: calc(var(--header-h, 72px) + 8px);
    z-index: 5;

    border-left: 0;
    border-bottom: 1px solid #eee;
    padding: 0.85rem 0;
    background: #fff;

    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .project-page--divina .project-rail::-webkit-scrollbar{ display: none; }

  .project-page--divina .project-meta{ display: none; }

  .project-page--divina .project-rail__nav{
    flex-direction: row;
    gap: 1rem;
    padding-inline: var(--page-pad, 1.25rem);
  }

  .project-page--divina .project-content{
    grid-column: 1;
  }

  .project-page--divina .project-inline-cta{
    flex-direction: column;
    align-items: stretch;
  }
  .project-page--divina .project-inline-cta .project-cta{
    width: 100%;
    text-align: center;
  }
}
/* =========================================================
   CASA DELLA DIVINA PROVVIDENZA – Typography + sticky mobile + CTA link
   Scoped: .project-page--divina
   ========================================================= */

/* Titolo: stessa grammatura/dimensione coerente */
.project-page--divina .project-title{
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 0.95;
  font-size: clamp(2.1rem, 6.4vw, 3.25rem);
}

/* Sottotitolo coerente (evita “smollamenti” su mobile) */
.project-page--divina .project-subtitle{
  max-width: 44ch;
}

/* Link CTA “Scopri…”: underline brand come regole sito */
.project-page--divina .project-inline-link{
  display: inline-block;
  font-weight: 700;
  color: #111;                      /* testo nero */
  text-decoration-line: underline;  /* underline */
  text-decoration-color: var(--brand, #922A5E);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.project-page--divina .project-inline-link:hover,
.project-page--divina .project-inline-link:focus{
  color: #111;
  text-decoration-thickness: 3px;
}

/* CTA wrapper: mai sovrapposti */
.project-page--divina .project-inline-cta{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: flex-start;
}

/* MOBILE: sticky rail più pulito */
@media (max-width: 900px){

  /* rail sticky: padding e top più corretti, no “tagli” */
  .project-page--divina .project-rail{
    top: calc(var(--header-h, 72px) + env(safe-area-inset-top, 0px) + 8px);
    z-index: 20;

    padding: 0.8rem 0;              /* più aria */
    background: #fff;

    border-bottom: 1px solid #eee;
  }

  /* nav dentro rail: padding laterale come il sito */
  .project-page--divina .project-rail__nav{
    padding-inline: var(--page-pad, 1.25rem);
  }

  /* link rail: leggermente più compatti (meglio su mobile) */
  .project-page--divina .project-rail__link{
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    white-space: nowrap;
  }

  /* CTA in colonna: nessuna sovrapposizione */
  .project-page--divina .project-inline-cta{
    flex-direction: column;
    align-items: stretch;
  }

  .project-page--divina .project-inline-link,
  .project-page--divina .project-inline-cta .project-cta{
    width: 100%;
    text-align: center;
  }
}
/* =========================================================
   INVICTUS – layout rail + contenuto (scoped)
   ========================================================= */

.project-page--invictus .project-layout--invictus{
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
  min-width: 0;
}

/* offset ancore: evita header */
.project-page--invictus .project-section{
  scroll-margin-top: calc(var(--header-h, 72px) + 18px);
}

/* rail sticky */
.project-page--invictus .project-rail{
  position: sticky;
  top: calc(var(--header-h, 72px) + 24px);
  align-self: start;

  border-left: 1px solid #eee;
  padding-left: 1rem;
  background: #fff;

  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.project-page--invictus .project-meta{
  margin: 0;
}
.project-page--invictus .project-meta__row{
  margin: 0 0 0.9rem;
}
.project-page--invictus .project-meta__k{
  margin: 0 0 0.25rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #666;
  font-weight: 600;
}
.project-page--invictus .project-meta__v{
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #111;
}

/* nav rail */
.project-page--invictus .project-rail__nav{
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.project-page--invictus .project-rail__link{
  display: inline-flex;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9a9a9a;
  text-decoration: none;
}
.project-page--invictus .project-rail__link:hover,
.project-page--invictus .project-rail__link:focus{
  color: #111;
}
.project-page--invictus .project-rail__link.is-active,
.project-page--invictus .project-rail__link[aria-current="true"]{
  color: var(--brand, #922A5E);
}

/* contenuto */
.project-page--invictus .project-content{
  min-width: 0;
}

/* testo: evita “troppo largo” e migliora ritmo */
.project-page--invictus .project-text-rail{
  max-width: 820px;
}

/* intro (logo + testo) */
.project-page--invictus .project-intro{
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
  margin-top: 1rem;
}
.project-page--invictus .project-logo img{
  width: 100%;
  height: auto;
  display: block;
}

/* media pair in logistica */
.project-page--invictus .project-media-pair{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  margin-top: 1rem;
}

/* MOBILE: rail diventa sticky orizzontale (pulito) */
@media (max-width: 900px){
  .project-page--invictus .project-layout--invictus{
    grid-template-columns: 1fr;
  }

  .project-page--invictus .project-rail{
    top: calc(var(--header-h, 72px) + 8px);
    z-index: 20;

    border-left: 0;
    border-bottom: 1px solid #eee;
    padding: 0.85rem 0;

    flex-direction: row;
    align-items: center;

    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .project-page--invictus .project-rail::-webkit-scrollbar{ display:none; }

  .project-page--invictus .project-meta{ display:none; }

  .project-page--invictus .project-rail__nav{
    flex-direction: row;
    gap: 1rem;
    padding-inline: var(--page-pad, 1.25rem);
  }

  .project-page--invictus .project-intro{
    grid-template-columns: 1fr;
    align-items: start;
  }

  .project-page--invictus .project-media-pair{
    grid-template-columns: 1fr;
  }
}