/* =========================
   CAPSTONE PAGE (scoped)
   Evita conflitti con global.css:
   - niente .card/.grid generici
   - niente a{...} globale
========================= */

/*
.capstone-page{
  global.css ha già il background scuro: lo lasciamo
}
*/

/* Spaziatura sotto header sticky */
.capstone-main{
  width: min(1400px, calc(100% - 32px));
  margin: 22px auto 26px;
}

/* Variabili solo per il poster */
.capstone-page{
  --cap-c1:#EB1C74; /* pink */
  --cap-c2:#3A0593; /* purple */
  --cap-c3:#6ED7C6; /* teal */

  --cap-ink:#111;
  --cap-paper:#ffffff;

  --cap-radius: 14px;
  --cap-bw: 2px;

  --cap-shadow: 0 10px 30px rgba(0,0,0,.22);
  --cap-shadow2: 0 6px 18px rgba(0,0,0,.16);

  --cap-pad: clamp(14px, 2.5vw, 28px);
  --cap-gap: clamp(12px, 2vw, 18px);

  --cap-h1: clamp(32px, 4.8vw, 72px);
  --cap-text: clamp(16px, 1.35vw, 18px);
  --cap-title: clamp(18px, 1.7vw, 24px);
}

/* Poster container (foglio) */
.cap-poster{
  background: var(--cap-paper);
  color: var(--cap-ink);
  border-radius: calc(var(--cap-radius) + 6px);
  box-shadow: var(--cap-shadow);
  padding: var(--cap-pad);
}

/* Top */
.cap-top{
  display: grid;
  gap: var(--cap-gap);
  align-items: center;
  padding-bottom: var(--cap-gap);
  border-bottom: 1px solid rgba(0,0,0,.08);
  margin-bottom: var(--cap-gap);
}

.cap-logos{
  display: flex;
  justify-content: center;
  align-items: center;

  /* sempre una riga: niente wrap */
  flex-wrap: nowrap;

  /* se lo spazio è poco, rimangono sulla stessa riga e possono "scorrere" senza rompere */
  overflow-x: auto;

  gap: clamp(12px, 3vw, 60px);
  padding: 4px 2px;

  /* migliora lo scrolling su mobile */
  -webkit-overflow-scrolling: touch;
}

/* Loghi: dimensione fluida (si riduce su mobile/zoom) */
.cap-logos img{
  /* “altezza ideale” che si adatta: min 34px, max 110px */
  height: clamp(34px, 6vw, 110px);
  width: auto;
  object-fit: contain;
  display: block;

  /* IMPORTANTISSIMO: permette ai loghi di rimpicciolirsi davvero */
  flex: 0 1 auto;
  min-width: 0;
}


.cap-headline{
  text-align: center;
}

.cap-headline h1{
  font-size: var(--cap-h1);
  font-weight: 800;
  margin: 2px 0 10px;
  font-family: "Ubuntu", system-ui;

  background: linear-gradient(to right, var(--cap-c1) 28%, var(--cap-c2) 55%, var(--cap-c3) 72%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--cap-c1);
}

.cap-authors{
  font-size: clamp(15px, 1.25vw, 19px);
  padding: 0 4px;
}

/* Link “autore” (scopato: NON tocca la navbar globale) */
.cap-author-link{
  color: #fff;
  background: linear-gradient(to right, var(--cap-c1) 10%, var(--cap-c2) 140%);
  border: 1px solid #000;
  text-decoration: underline;
  padding: 3px 6px;
  border-radius: 8px;
  white-space: nowrap;
}

/* Grid “poster-like” */
.cap-grid{
  display: grid;
  gap: var(--cap-gap);
  grid-template-columns: 1fr;
}

@media (min-width: 860px){
  .cap-grid{
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
}

@media (min-width: 1200px){
  .cap-grid{
    grid-template-columns: 1.05fr 0.95fr 1.35fr;
    grid-template-areas:
      "bg   aim   device"
      "mm   market device"
      "future market device";
  }

  .cap-bg{ grid-area: bg; }
  .cap-aim{ grid-area: aim; }
  .cap-mm{ grid-area: mm; }
  .cap-device{ grid-area: device; }
  .cap-market{ grid-area: market; }
  .cap-future{ grid-area: future; }
}

/* Card component (namespaced) */
.cap-card{
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--cap-radius);
  box-shadow: var(--cap-shadow2);
  background: #fff;
  overflow: hidden;
}

.cap-card__title{
  font-size: var(--cap-title);
  font-weight: 800;
  color: #fff;
  padding: 12px 16px;
}

.cap-card__body{
  font-size: var(--cap-text);
  padding: 16px;
  border: var(--cap-bw) solid transparent;
  border-top: 0;

  /* Questo evita il “taglio” negli angoli inferiori */
  border-bottom-left-radius: var(--cap-radius);
  border-bottom-right-radius: var(--cap-radius);

  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.cap-card__body span{ font-weight: 800; }

/* Varianti colore */
.cap-c1 .cap-card__title{ background: var(--cap-c1); }
.cap-c2 .cap-card__title{ background: var(--cap-c2); }
.cap-c3 .cap-card__title{ background: var(--cap-c3); }

.cap-c1 .cap-card__body{ border-color: var(--cap-c1); }
.cap-c2 .cap-card__body{ border-color: var(--cap-c2); }
.cap-c3 .cap-card__body{ border-color: var(--cap-c3); }

/* Lists */
.cap-card__body ul{ margin-left: 18px; }
.cap-card__body li{ margin-bottom: 10px; }

/* Media */
.cap-media{
  width: 100%;
  display: grid;
  place-items: center;
}

.cap-poster img{
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Split layout */
.cap-split{
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.cap-split__text{
  flex: 1.55;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cap-split__media{
  flex: 1;
  min-width: 0;
  display: grid;
  place-items: center;
}

.cap-device-split .cap-split__text{ flex: 1.75; }

@media (max-width: 820px){
  .cap-split{
    flex-direction: column;
    align-items: stretch;
  }
  .cap-author-link{ white-space: normal; }
}

/* Device */
.cap-subhead{
  font-weight: 800;
  text-decoration: underline;
  margin-top: 4px;
}

.cap-muted{
  opacity: .85;
}

.cap-pillgrid{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.cap-pill{
  border: 1px solid #000;
  border-radius: 999px;
  padding: 10px 12px;
  flex: 1 1 160px;
  text-align: center;
}

/* Market */
.cap-center-title{
  text-align: center;
  font-weight: 800;
  font-size: clamp(17px, 1.45vw, 20px);
}

.cap-market-row{
  display: flex;
  gap: 14px;
  align-items: center;
  min-width: 0;
  padding: 10px 0;
  border-top: 1px dashed rgba(0,0,0,.18);
}

.cap-market-row:first-of-type{ border-top: 0; }

.cap-tag{
  width: 64px;
  flex: 0 0 auto;
  font-weight: 900;
  font-size: 20px;
  text-align: center;
  border-radius: 10px;
  color: #fff;
  padding: 8px 0;
}

.cap-tam{ background: var(--cap-c1); }
.cap-sam{ background: var(--cap-c3); color: #073a33; border: 1px solid rgba(0,0,0,.35); }
.cap-som{ background: var(--cap-c2); }

.cap-bold{ font-weight: 800; }
.cap-italic{ font-style: italic; opacity: .9; }

/* Poster footer (QR) */
.cap-bottom{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: var(--cap-gap);
  padding-top: var(--cap-gap);
  border-top: 1px solid rgba(0,0,0,.08);
}

.cap-bottom img{
  height: clamp(80px, 10vw, 110px);
  max-width: 60vw;
  object-fit: contain;
}