/*
body {
  background-image: url('/resources/resources_bg_dark.avif') !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

[data-theme="light"] body {
  background-image: url('/resources/resources_bg_light.avif') !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}*/


/* ── BLACK HOLE BACKGROUND ── */
black-hole {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #000;
  pointer-events: none;
}

black-hole canvas {
  display: block;
  width: 100%;
  height: 100%;
}

[data-theme="light"] black-hole {
  display: none;
}

/* ── NEUTRON STAR BACKGROUND ── */
neutron-star {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #050d1d;
  pointer-events: none;
}

neutron-star canvas {
  display: block;
  width: 100%;
  height: 100%;
}

[data-theme="light"] neutron-star {
  display: block;
}

/* ── RESOURCES PAGE LAYOUT ── */
.resources-page {
  position: relative;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px);
  overflow: hidden;
  background: transparent;
}

.resources-header {
  flex-shrink: 0;
  padding: 1rem 2rem 0.5rem;
}

.resources-title {
  font-family: system-ui, sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}


/* ── FOUR COLUMNS ── */
.resources-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  flex: 1;
  overflow: hidden;
  border-top: 1px solid #1a6fc433;
}

.resources-column {
  display: flex;
  flex-direction: column;
  border-right: 1px solid #1a6fc433;
  overflow: hidden;
}

.resources-column:last-child {
  border-right: none;
}

/* ── COLUMN TITLE (fixed at top) ── */
.resources-col-title {
  flex-shrink: 0;
  padding: 0.6rem 0.75rem;
  font-family: system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  border-bottom: 1px solid #1a6fc433;
  line-height: 1.4;
}


.resources-col-subtitle {
  flex-shrink: 0;
  padding: 1rem 0.75rem 1rem 0.75rem;
  font-family: system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  border-bottom: 1px solid #1a6fc433;
  line-height: 1.4;
}

/* ── SCROLLABLE AREA ── */
.resources-col-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 8px;
  scrollbar-width: thin;
  scrollbar-color: #1a6fc4 transparent;
  box-sizing: border-box;
}

.resources-col-scroll::-webkit-scrollbar { width: 4px; }
.resources-col-scroll::-webkit-scrollbar-track { background: transparent; }
.resources-col-scroll::-webkit-scrollbar-thumb { background: #1a6fc4; border-radius: 2px; }

/* ── BASE CARD ──
   filter: drop-shadow follows the clip-path shape exactly
   padding on the card gives the glow room to breathe
── */
.resource-card {
  display: block;
  text-decoration: none;
  position: relative;
  padding: 6px;                /* space for the glow to show around the shape */
  transition: filter 0.2s, transform 0.2s;
  filter: drop-shadow(0 0 6px #1a6fc4aa) drop-shadow(0 0 14px #00c6ff44);
}

.resource-card:hover {
  filter: drop-shadow(0 0 10px #1a6fc4ff) drop-shadow(0 0 24px #00c6ff88);
  transform: scale(1.04);
}

/* triangles, pentagons, and hexagons tessellate edge-to-edge via negative
   margins, so the 6px breathing-room padding above would pull each shape's
   artwork inward and open a visible gap between neighbors */
.resource-card--triangle,
.resource-card--triangle-down,
.resource-card--pentagon,
.resource-card--hexagon {
  padding: 0;
}

.resource-card-inner {
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.5rem;
}

[data-theme="light"] .resource-card-inner {
  background: #fff;
}

.resource-card-inner span {
  font-family: system-ui, sans-serif;
  z-index: 1;
  font-size: 0.7rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
}

[data-theme="light"] .resource-card-inner span {
  color: #0a1520;
}

/* ══════════════════════════════════════
   TRIANGLES
   3 per row: up, down, up
   negative margin pulls rows together
══════════════════════════════════════ */
.resources-grid--triangles {
  display: grid;
  grid-template-columns: repeat(3, 29%);
  gap: 0;
  padding-left: 1.75vw; 
}

.resource-card--triangle,
.resource-card--triangle-down {
  aspect-ratio: 1 / 0.8660254;   /* height = width * tan(60°) */
  margin-inline: -25%;  /* pull triangles together so they tessellate horizontally */
  margin-bottom: 10%;   /* rows tessellate with no gap */
}

.resource-card--triangle .resource-card-inner {
  background-color: transparent;
  background-image: url('shapes/dark_triangle_up.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  align-items: flex-end;
  padding-bottom: 15%;
  box-sizing: border-box;
  position: relative;
}

.resource-card--triangle-down .resource-card-inner {
  background-color: transparent;
  background-image: url('shapes/dark_triangle_down.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  align-items: flex-start;
  padding-top: 15%;
  box-sizing: border-box;
  position: relative;
}

[data-theme="light"] .resource-card--triangle .resource-card-inner {
  background-image: url('shapes/light_triangle_up.svg');
}

[data-theme="light"] .resource-card--triangle-down .resource-card-inner {
  background-image: url('shapes/light_triangle_down.svg');
}

/* ══════════════════════════════════════
   SQUARES — sharp 90° corners
══════════════════════════════════════ */
.resources-grid--squares {
  display: grid;
  grid-template-columns: repeat(2, 48%);
  gap: 0;
  padding: 0 4px;
}

.resource-card--square {
  aspect-ratio: 1;
  margin-inline: 7.5%;
  margin-bottom: 5%;  
}

.resource-card--square .resource-card-inner {
  position: relative;
  background-color: transparent;
  background-image: url('shapes/dark_square.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

[data-theme="light"] .resource-card--square .resource-card-inner {
  background-image: url('shapes/light_square.svg');
}

/* ══════════════════════════════════════
   PENTAGONS
   2 per row, right one flipped 180°
══════════════════════════════════════ */
.resources-grid--pentagons {
  display: grid;
  grid-template-columns: repeat(2, 46%);
  gap: 0;
  margin-left: 1vw; /* shift pentagon grid to the right for better centering within column */
}

.resource-card--pentagon {
  aspect-ratio: 1 / 1.05;
  margin-bottom: -45%;   /* close the vertical gap between nesting rows */
  margin-inline: -5%; /* pull pentagons together so they tessellate horizontally */
}

.resource-card--pentagon .resource-card-inner {
  position: relative;
  background-color: transparent;
  background-image: url('shapes/dark_pentagon_up.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

/* right column flipped 180° */
.resource-card--pentagon:nth-child(2n) .resource-card-inner {
  position: relative;
  background-color: transparent;
  background-image: url('shapes/dark_pentagon_down.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.resource-card--pentagon:nth-child(2n) {
  margin-top: 45%;
}

[data-theme="light"] .resource-card--pentagon .resource-card-inner {
  background-image: url('shapes/light_pentagon_up.svg');
}

[data-theme="light"] .resource-card--pentagon:nth-child(2n) .resource-card-inner {
  background-image: url('shapes/light_pentagon_down.svg');
}

/* ══════════════════════════════════════
   HEXAGONS
   2 per row, offset every other row
   for honeycomb tessellation
══════════════════════════════════════ */
.resources-grid--hexagons {
  display: grid;
  grid-template-columns: repeat(2, 48%);
  gap: 0;
  padding: 0 4px;
}

.resource-card--hexagon {
  aspect-ratio: 1 / 0.866;
  margin-bottom: -25%;   /* close vertical gap between hex rows */
  margin-inline: -10%;  /* pull hexes together so they tessellate horizontally */
}

.resource-card--hexagon .resource-card-inner {
  position: relative;
  background-color: transparent;
  background-image: url('shapes/dark_hexagon.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.resource-card--hexagon:nth-child(3n) {
  grid-column: 1 / span 2;
  width: 60%;
  justify-self: center;
  margin-bottom: -13%;
}

[data-theme="light"] .resource-card--hexagon .resource-card-inner {
  background-image: url('shapes/light_hexagon.svg');
}

/* ── POST / ARTICLE CONTENT OVERLAY ── */
.post-content-overlay {
  background: rgba(0, 0, 0, 0.80);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);

  /* Fade into background on all edges */
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 5%,
      black 95%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 5%,
      black 95%,
      transparent 100%
    );

  padding: 3rem 4rem;
  max-width: 800px;
  margin: 0 auto;
  min-height: 100vh;
  box-sizing: border-box;
}
[data-theme="light"] .post-content-overlay {
  background: rgba(255, 255, 255, 0.80);
}

.post-divider {
  height: 2px;
  background: linear-gradient(to right, #1a6fc4, #00c6ff, #1a6fc4);
  box-shadow: 0 0 10px #00c6ff88, 0 0 24px #1a6fc455;
  border: none;
  border-radius: 2px;
  margin-bottom: 2rem;
}

/* ── POST TEXT ── */
.post-content-overlay h1,
.post-content-overlay h2,
.post-content-overlay h3 {
  color: #fff;
  font-family: system-ui, sans-serif;
}

[data-theme="light"] .post-content-overlay h1,
[data-theme="light"] .post-content-overlay h2,
[data-theme="light"] .post-content-overlay h3 {
  color: #0a1520;
}

.post-content-overlay p,
.post-content-overlay li {
  color: rgba(255, 255, 255, 0.90);
  font-family: system-ui, sans-serif;
  line-height: 1.7;
}

[data-theme="light"] .post-content-overlay p,
[data-theme="light"] .post-content-overlay li {
  color: rgba(10, 21, 32, 0.90);
}


/* ══════════════════════════════════════
   MOBILE 
══════════════════════════════════════ */
@media (max-width: 600px) {

  /* prevent any child from blowing past the viewport width */
  .resources-page,
  .resources-columns,
  .resources-column,
  .resources-col-scroll,
  .resources-grid--triangles,
  .resources-grid--squares,
  .resources-grid--pentagons,
  .resources-grid--hexagons {
    max-width: 100vw;
    box-sizing: border-box;
  }

  .resources-page {
    height: auto;
    overflow-x: hidden;   /* kills the horizontal scroll at the root */
    overflow-y: auto;
  }

  .resources-columns {
    grid-template-columns: 1fr;
    overflow: visible;
    border-top: none;
  }

  .resources-column {
    border-right: none;
    border-bottom: 1px solid #1a6fc433;
    overflow: visible;
    height: auto;
  }

  .resources-col-scroll {
    overflow: visible;
    height: auto;
    max-height: none;
  }

  /* ── Fix 1: title text readable and never overflows ── */
  .resources-col-title {
    font-size: 0.85rem;       /* was 0.7rem — bumped up for legibility */
    padding: 1rem 0.75rem 0.75rem;
    white-space: normal;      /* allow wrapping */
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
  }

  /* ── Triangles ── */
  .resources-grid--triangles {
    grid-template-columns: repeat(3, 29%);
    gap: 0;
    padding-left: 2.5vw;
    overflow: hidden;
  }

  /* ── Squares ── */
  .resources-grid--squares {
    grid-template-columns: repeat(2, 40%);
    overflow: hidden;
  }

  /* ── Fix 2: pentagons — remove the huge negative margin that causes overlap ── */
  .resources-grid--pentagons {
    grid-template-columns: repeat(2, 40%);
    margin-left: 2vw;
    overflow: hidden;
  }

  .resource-card--pentagon {
    margin-bottom: -20%;     /* reduced from -45% — still nestles but doesn't bleed into next section */
  }

  /* last pentagon row shouldn't drag the section bottom up */
  .resources-grid--pentagons::after {
    content: '';
    display: block;
    height: 30%;             /* compensates for the remaining negative margin on the last row */
  }

  /* ── Hexagons ── */
  .resources-grid--hexagons {
    grid-template-columns: repeat(2, 40%);
    overflow: hidden;
  }
}