/* ------------------------------------------
   GLOBAL LAYOUT / GRID / SPACING
-------------------------------------------*/
.homepage-fullwidth {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1rem 2rem;
}

.homepage-article {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}


/* Homepage uses full-width layout */
.fullwidth-home {
  width: 100%;
}

/* Center homepage content exactly like Matplotlib */
.homepage-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

/* Limit page width to Matplotlib’s layout */
.bd-page-width {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Keep the brand, navigation, and utility controls aligned across every page. */
.bd-header .navbar-header-items__start,
.bd-header .navbar-header-items__center,
.bd-header .navbar-header-items__end {
  align-items: center;
}

.bd-header .logo__title {
  margin: 0;
  font-size: 1.8rem;
  line-height: 1;
}

.bd-header a.navbar-brand,
.bd-header a.navbar-brand:hover,
.bd-header a.navbar-brand:focus {
  text-decoration: none;
}

.bd-header .navbar-header-items__center {
  margin-right: auto;
}

.bd-header .navbar-header-items__end {
  margin-left: 2.5rem;
  justify-content: flex-end;
}

.bd-header .navbar-header-items__end .navbar-item + .navbar-item {
  margin-left: 1rem;
}

/* Give the desktop theme control room inside the navigation boundary. */
@media (min-width: 992px) {
  .bd-header .navbar-header-items {
    min-width: 0;
    padding-right: 1rem;
  }

  .bd-header .navbar-header-items__end {
    flex-shrink: 0;
  }
}

/* Section spacing */
.section {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

/* Matplotlib grid container utilities */
/*.grid__intro-text,*/
/*.grid__intro,*/
.grid__quicklinks,
.grid__news,
.grid__resources,
.grid__tools,
.grid__support {
  width: 100%;
  margin: 0 auto;
}

/* Intro row: hero image + text side by side */
/*.grid__intro-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: stretch;
  margin-top: 3rem;
  margin-bottom: 3rem;
}*/

/* Intro row: hero image (left) + text (right) */
.grid__intro-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  column-gap: 2rem;
  align-items: stretch;
  margin-top: 3rem;
  margin-bottom: 3rem;
}


/* Left column: hero/image area */
.grid__intro-row .grid__intro {
  flex: 1 1 40%;
  min-height: 280px;   /* adjust as you like */
}

/* Right column: text */
.grid__intro-row .grid__intro-text {
  flex: 1 1 60%;
  margin: 0;           /* override the generic centering */
  width: auto;
}

/* Remove PyData theme's version warning banner container */
.pst-async-banner-revealer {
  display: none !important;
}

@media (min-width: 992px) { /* ~Bootstrap lg */
  .bd-sidebar-secondary {
    display: none !important;
  }
}

/* ============================
   Gallery Grid (like matplotlib.org)
============================ */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
  margin-bottom: 2.5rem;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease;
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.gallery-item span {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.6rem;
  font-weight: 600;
  color: white;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-item:hover img {
  opacity: 0.7;
  transform: scale(1.05);
}

.gallery-item:hover span {
  opacity: 1;
}


/* ------------------------------------------
   TYPOGRAPHY
-------------------------------------------*/

h1, h2, h3, h4, h5 {
  font-weight: 600;
  letter-spacing: -0.5px;
}

p, li {
  font-size: 1.05rem;
  line-height: 1.6;
}

/* No-padding lists used on homepage */
.no-padding {
  list-style-type: disc;
  padding-left: 1.2rem;
}

/* ------------------------------------------
   QUICKLINKS (5 square icons)
-------------------------------------------*/

.quicklinks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 2rem;
  padding: 0;
}

.quicklinks li {
  text-align: center;
  list-style-type: none;
}

.quicklinks__icon {
  width: 80px;
  height: 80px;
  margin-bottom: 0.75rem;
  transition: transform 0.2s ease;
}

.quicklinks a {
  display: block;
  font-weight: 600;
  color: var(--pst-color-primary);
  text-decoration: none;
}

.quicklinks a:hover .quicklinks__icon {
  transform: scale(1.08);
}

/* ------------------------------------------
   COLORED RULE BARS (viridis stripes)
-------------------------------------------*/

.rule {
  border-top: 6px solid transparent;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.rule--viridis {
  border-top-color: #22a884; /* viridis mid-green */
}

/* ------------------------------------------
   NEWS SECTION
-------------------------------------------*/

.news__items {
  display: grid;
  gap: 2rem;
}

.news__item--highlight {
  background: #f0f7ff;
  padding: 1.5rem;
  border-left: 4px solid #1f77b4;
  border-radius: 8px;
}

.news__item {
  padding-left: 0.25rem;
  border-left: 3px solid #ccc;
}

.news__headline,
.news-list__headline {
  margin: 0;
}

.news__date,
.news-list__date,
.news-article-date {
  color: var(--pst-color-text-muted);
  font-size: 0.9em;
}

.news__date {
  margin-left: 0.5em;
  white-space: nowrap;
}

.news-list__entry:not(:last-child) {
  margin-bottom: 1rem;
}

.news-article-date {
  margin-top: -0.75rem;
  margin-bottom: 2rem;
}

/* ------------------------------------------
   CALLOUT BOXES (Resources & Support)
-------------------------------------------*/

.callout__list {
  background: #f8f9fa;
  padding: 1.25rem 1.5rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  border-left: 4px solid #1f77b4;
}

.callout--purple { border-left-color: #9467bd; }
.callout--blue   { border-left-color: #1f77b4; }
.callout--teal   { border-left-color: #17becf; }

/* ------------------------------------------
   SUPPORT SECTION (3 cards)
-------------------------------------------*/

.support__items {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: flex-start;
}

.support__items .callout {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
}

.support__items .callout h4 {
  margin: 0;
  line-height: 1.3;
}

.support__items .callout h4 a {
  display: inline-block;
  line-height: 1.3;
}

/* ------------------------------------------
   BUTTONS (used by Donate, Try Matplotlib, etc.)
-------------------------------------------*/

.button {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
}

.button--purple { background: #9467bd; color: white; }
.button--green  { background: #2ca02c; color: white; }

/* Hover effects */
.button:hover {
  opacity: 0.85;
}

/* ------------------------------------------
   IMAGE ROTATOR (hero image space)
-------------------------------------------*/

#image_rotator {
  width: 100%;
  height: 450px;
  background-color: #ececec;
  border-radius: 8px;
  margin-top: 2rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#image_rotator .imrot-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 8px;
}

/* ------------------------------------------
   RESPONSIVE FIXES
-------------------------------------------*/

@media (max-width: 768px) {
  .grid__intro-row {
    grid-template-columns: 1fr;
  }
  .quicklinks {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
  #image_rotator {
    height: 300px;
  }
}

/* ------------------------------------------
   DARK MODE IMPROVEMENTS
-------------------------------------------*/

html[data-theme="dark"] .callout__list {
  background: #222;
  border-color: #4fa8ff;
}

html[data-theme="dark"] .news__item--highlight {
  background: #1b1b1b;
}


/* ================================
   BALTIC GALLERY (Matplotlib-style)
================================ */

/* Grid container */
.baltic-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.75rem;
  margin: 2rem 0;
}

/* Clickable item */
.baltic-gallery-item {
  text-decoration: none;
  color: inherit;
}

/* Thumbnail wrapper */
.baltic-gallery-thumb {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #f6f6f6;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Image */
.baltic-gallery-thumb img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

/* Hover effect */
.baltic-gallery-item:hover .baltic-gallery-thumb {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}

/* Overlay */
.baltic-gallery-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
  opacity: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  text-align: center;
  transition: opacity 0.2s ease;
}

.baltic-gallery-item:hover .baltic-gallery-overlay {
  opacity: 1;
}

/* Title text */
.baltic-gallery-title {
  color: white;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
}

/* Optional subtitle */
.baltic-gallery-subtitle {
  color: #ddd;
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

/* Dark mode tweaks */
html[data-theme="dark"] .baltic-gallery-thumb {
  background: #1e1e1e;
}

.citation-author {
  white-space: nowrap;
}