/* ==========================================================================
   families/biography.css
   Pagine biografiche e storiche: ritratti, cronologie, documenti d'archivio.
   Caricato da 5 pagine.
   ========================================================================== */

.breadcrumb {
  padding: 10px 16px;
}

.bio-hero {
  padding: 58px 16px 52px;
}

.bio-hero .inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: 34px;
  align-items: center;
}

.bio-kicker {
  display: inline-flex;
  padding: .42rem .78rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(244,210,122,.62);
  color: #fff3c9;
  background: rgba(255,255,255,.08);
  font-weight: 800;
  letter-spacing: .03em;
  margin-bottom: 14px;
}

.bio-hero h1 {
  margin: 0 0 16px;
}

.bio-photo {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--shadow-lg);
}

.bio-photo img {
  display: block;
}

.bio-main {
  margin: 0 auto;
  padding: 48px 16px 58px;
}

.bio-main p {
  margin: 0 0 16px;
  -webkit-hyphens: auto;
}

.bio-grid {
  grid-template-columns: repeat(auto-fit,minmax(230px,1fr));
}

.bio-card h3 {
  margin: 0 0 8px;
}

.bio-card p {
  margin: 0;
}

.bio-links {
  display: flex;
  flex-wrap: wrap;
}

.bio-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-oro);
  color: var(--blu-notte);
  text-decoration: none;
  font-weight: 850;
  border: 1px solid rgba(10,22,40,.08);
}

.bio-links a:nth-child(n/**/+2) {
  background: linear-gradient(180deg,#5c7190,#3b506d);
  color: #fff8e7;
  border-color: rgba(215,189,126,.55);
}

.bio-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}

.bio-grid>* {
  flex: 0 1 calc((100% - 16px)/2);
  max-width: calc((100% - 16px)/2);
}

.bio-figure {
  margin: 8px 0 28px;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
}

.bio-figure img {
  height: auto;
  border-radius: 10px;
  box-shadow: 0 6px 22px rgba(10,22,40,.16);
  border: 1px solid rgba(10,22,40,.08);
}

.bio-figure figcaption {
  margin-top: 10px;
  color: #5a6774;
  font-style: italic;
  text-align: center;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.bio-figure--ritratto img {
  width: 100%;
  max-width: 300px;
}

.bio-figure--storica img {
  width: 100%;
  max-width: 760px;
}

.bio-figure figcaption strong {
  color: #8b6914;
  font-style: normal;
}

.page-biografia-completa .bio-hero .inner,
.page-radici-totalita .bio-hero .inner,
.page-vincenzo-bellisario .bio-hero .inner,
.page-nicola-bellisario .bio-hero .inner,
.page-scuola-totalita-storia .bio-hero .inner {
  grid-template-columns: 1fr;
  text-align: center;
  justify-items: center;
}

.page-biografia-completa .bio-main h2,
.page-radici-totalita .bio-main h2,
.page-vincenzo-bellisario .bio-main h2,
.page-nicola-bellisario .bio-main h2,
.page-scuola-totalita-storia .bio-main h2 {
  text-align: center;
}

.page-radici-totalita .bio-links,
.page-vincenzo-bellisario .bio-links,
.page-nicola-bellisario .bio-links,
.page-scuola-totalita-storia .bio-links {
  justify-content: center;
}

.doc-list {
  display: grid;
  gap: 18px;
  margin: 20px 0 8px;
}

.doc-item {
  background: #fbfaf7;
  border: 1px solid rgba(10,22,40,.09);
  border-radius: 12px;
  padding: 20px 22px;
  text-align: left;
}

.doc-item h3 {
  margin: 0 0 8px;
  text-align: left;
}

.doc-item p {
  margin: 0 0 14px;
}

.doc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.doc-actions a {
  display: inline-flex;
  align-items: center;
  padding: .55rem .95rem;
  border-radius: var(--r-pill);
  font-weight: 750;
  font-size: .92rem;
  text-decoration: none;
}

.doc-actions a:first-child {
  background: var(--grad-oro);
  color: var(--blu-notte);
  border: 1px solid rgba(10,22,40,.08);
}

.doc-actions a:last-child {
  background: linear-gradient(180deg,#5c7190,#3b506d);
  color: #fff8e7;
  border: 1px solid rgba(215,189,126,.5);
}

.doc-more a {
  font-weight: 700;
}

@media (max-width: 820px) {
  .bio-photo {
    max-width: 360px;
  }
}

@media (max-width: 768px) {
  .bio-grid>* {
    flex-basis: calc((100% - 16px)/2);
    max-width: calc((100% - 16px)/2);
  }
}

@media (max-width: 520px) {
  .bio-grid>* {
    flex-basis: 100%;
    max-width: 100%;
  }
}