/* ====================== DIFR THEME - Die In Fire ====================== */

/* Brand Color Variables (aligned with red primary) */
:root {
  --difr-red: #c62828;
  --difr-red-dark: #8e0000;
  --difr-red-light: #ef5350;
}

/* Images stay downloadable as jpg/png: no CSS filter, transform, or shadow. */
.md-typeset img {
  display: block;
  margin: 2.5rem auto 1.5rem auto;
  max-width: 480px;
  height: auto;
}

.md-typeset .gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.35rem 1.2rem;
  margin: 1.25rem 0 2.25rem;
}

.md-typeset .gallery-feature {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.md-typeset .gallery-grid figure {
  margin: 0;
}

.md-typeset .gallery-grid a {
  display: block;
}

.md-typeset .gallery-grid img,
.md-typeset .gallery-feature img {
  width: 100%;
  max-width: none;
  margin: 0;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
}

.md-typeset .gallery-grid figcaption {
  margin: 0.5rem 0 0;
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--md-default-fg-color--light);
}

.md-typeset .gallery-grid--logos img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #111;
}

.md-typeset .gallery-grid--heroes {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.md-typeset .gallery-grid--heroes img {
  aspect-ratio: 3 / 4;
  object-position: top center;
}

.md-typeset .gallery-grid--heroes figcaption {
  font-weight: 600;
}

/* Mobile - ottimizzato */
@media (max-width: 600px) {
  .md-typeset img {
    max-width: 88%;
    margin: 2rem auto 1rem auto;
  }

  .md-typeset .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
  }

  .md-typeset .gallery-grid img {
    max-width: none;
    margin: 0;
  }

  .md-typeset h1 {
    font-size: 1.8rem;
  }

  .md-content__inner {
    padding: 1rem;
  }
}

/* Collapse sections by default in sidebar for clean view showing only main entries */
.md-nav__item--nested > .md-nav {
  display: none;
}