.section_content pre {
  min-width: 490px;
}

.slim {
  max-width: 700px;
}

.description {
  font-size: 1.2rem;
  margin-top: 25px;
}

/* Home sections (the template-default Projects/Socials lists, plus any extras a
   site injects via the home_top/home_bottom slots). The section title sits
   INSIDE the section surface: .home-section is the panel, with a header row at
   the top and the card grid below it. */
.home-section {
  width: 100%;
  align-self: stretch;
  padding: 12px;
  gap: 12px;
  border-radius: 5px;
  /* Classic fallback only; in the Vortex shell the "Section" surface gets its
     fill from Layers (styles/home.json -> "Main Window/Home Page/Section"). */
  background-color: #1E1D22;
}

.home-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 0 4px;
}

.home-section-icon {
  --icon-w: 32px;
}

.home-section-title {
  font-size: 1.2rem;
  font-weight: bold;
}

/* Inside a home section the card grid is only the layout — the enclosing
   .home-section panel supplies the fill/padding, so the grid drops its own (in
   the Vortex shell the "Cards" Layers fill is removed for the same reason). */
.home-section > .card-container {
  background-color: transparent;
  padding: 0;
}

.project-pillars {
  display:flex;
  flex-direction: column;
  width: 100%;
  align-self: stretch;
  gap: 10px;
  padding: 0;

  list-style: none;
}

.project-pillars > vortex-surface[name="Pillar"] {
  /* display:grid is set inline in the markup so the Vortex runtime's
     display:block write doesn't clobber it; the fill + corner radii come from
     Layers (styles/home.json -> "Main Window/Home Page/Pillar"). */
  gap: 10px;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  min-height: 80px;
  box-sizing: border-box;
}

.pillar-item {
  display: flex;
  padding-left: 15px;
  align-items: center;
  /* min-height: 40px; */
  gap: 20px;
}

.pillar-side-text {
  padding: 8px;
  font-size: 0.85rem;
  opacity: 0.5;
  text-align: right;
}

.card-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 12px;
  gap: 10px;
  /* Classic fallback only; the Vortex "Cards" surface gets its fill from Layers. */
  background-color: #1E1D22;
  border-radius: 5px;
}

.card {
  display: flex;
  /* flex-grow: 1; */
  gap: 10px;
  padding: 8px;
  padding-left: 12px;
  align-items: center;
  /* Classic (non-Vortex) fallback only. In the Vortex shell .card sits on a
     <vortex-surface name="Card"> whose Layers fill + radii (styles/home.json)
     are applied inline and win over these. */
  background-color: #312F38;
  border-radius: 3px;
  text-decoration: none;
}

/* In the Vortex shell each card is wrapped in <a class="card-link"> around the
   Card surface; display:contents makes the surface itself the grid item (so it
   lays out exactly like the classic <a class="card"> did) while the anchor still
   carries the link. */
.card-link {
  display: contents;
  color: inherit;
  text-decoration: none;
}

.card-texts {
  display: flex;
  flex-direction: column;
}

.card-texts span {
  font-family: "Roboto", sans-serif;
}

.card-title {
  font-weight: bold;
}

.card-desc {
  font-size: 0.9rem;
}

/* Family-index member card icon. A square slot the height of the card's content
   row — so it accounts for the card's padding — with the icon scaled to *contain*
   within it. This keeps a tall icon and a square icon visually balanced (same
   footprint) instead of sizing both off a fixed width (--icon-w). Scoped to
   .member-icon so the home cards' fixed-size logos are unaffected.

   The slot stretches to the row height, which is driven by the TEXT column: the
   icon's SVG is taken out of flow (absolute) so it can't inflate the slot to its
   own intrinsic size (which is what made the icons render unrestricted). With the
   slot height now definite, aspect-ratio makes it square. */
vortex-label[name="Icon"].member-icon {
  align-self: stretch;      /* slot height = card content row (driven by the text) */
  aspect-ratio: 1 / 1;      /* square slot; width tracks that height */
  flex: none;               /* fixed size in the flex row */
  position: relative;       /* containing block for the contained icon */
  height: 45px;
  min-height: 0;
  margin: auto 0;
}

/* width/height 100% fills the square; inline SVGs keep their viewBox aspect ratio
   (default preserveAspectRatio="xMidYMid meet"), so the glyph is letterboxed to
   "contain" within the slot and centered. */
vortex-label[name="Icon"].member-icon svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.coming-soon {
  background-color: black;
  border-radius: 3px;
  font-size: 0.8rem;
  padding: 2px 4px;
  align-self: self-start;
  margin-left: auto;
}

.external-link-icon {
  margin-left: auto;
  margin-bottom: auto;
  opacity: 0.5;
}

#particles-hearts {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none; /* Allows clicking through to elements behind */
  z-index: 1;
}

.support-container {
  position: relative;
  z-index: 0;
  /* Deliberately NOT themed: kept dark red to pair with the pink .support-card
     (the particle-effect box). */
  background-color: #00000084;
}

.support-container > *:not(#particles-hearts) {
  position: relative;
  z-index: 2; /* Ensures content appears above particles */
}

.support-card {
  background-color: #c3586f;
  color: #f0f0f0 !important;
}

aside {
  display: flex;
  flex-wrap: wrap;
  max-width: 450px;
  justify-content: left;
  align-items: center;
  margin: auto 15px;
}

aside p {
  margin-bottom: 15px;
}

.aside_heading {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}

.aside_heading p {
  font-size: 1.4rem;
  margin-left: 12px;
  margin-bottom: 0px;
}

@media screen and (max-width: 768px) {
  .reverse_section {
    flex-direction: column-reverse;
  }

  .section_content pre {
    min-width: 0;
  }

  .project-pillars > vortex-surface[name="Pillar"] {
    grid-template-columns: 1fr;
    align-items: flex-start;
    padding: 15px;
  }

  .pillar-side-text {
    padding: 0;
    text-align: left;
  }

  .pillar-item {
    gap: 10px;
  }

  .card-container {
    grid-template-columns: 1fr;
  }

  aside {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 25px;
  }
}