/* =========================
   Kyle — Custom Neon Palette
   ========================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Page */
  --bg-main: #360185;
  --bg-secondary: rgba(0, 0, 0, 0.18);

  /* Text */
  --text-main: #F4B342;     /* bright gold */
  --text-muted: #D99A2E;    /* slightly darker gold for paragraphs/blurbs */

  /* Tiles (alternating overlay colors) */
  --tile-a: #8F0177;
  --tile-b: #B20F6A;        /* in-between */
  --tile-c: #DE1A58;

  /* Hover film (darken image on hover for readability) */
  --hover-film: rgba(0, 0, 0, 0.16);
}

/* =========================
   Global
   ========================= */

html, body {
  background: var(--bg-main) !important;
  color: var(--text-main);
  font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-main);
  font-weight: 600;
}

p, li { color: var(--text-muted); }

a { color: var(--text-main); }
a:hover { color: var(--text-main) !important; }

#wrapper,
#main,
#main > .inner,
#header,
#header > .inner {
  background: transparent !important;
}

/* =========================
   Tiles
   ========================= */

.tiles article {
  background: var(--bg-secondary) !important;
  border-radius: 18px;

  /* allow tile to visually grow on hover */
  overflow: visible;

  transition: transform 0.25s ease;
  transform: translateZ(0);
}

/* Grow the whole tile (Phantom-style) */
.tiles article:hover {
  transform: scale(1.04);
  z-index: 2;
}

/* Keep overlay + image clipped to rounded corners */
.tiles article > a {
  border-radius: 18px;
  overflow: hidden;
}

/* ---- Center ALL tile text (title + hover blurb) ----
   IMPORTANT: We do NOT change position/inset. We only use flex on the link
   so we don't break Phantom's overlay/hover structure.
*/
.tiles article > a {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* vertical center */
  align-items: center;      /* horizontal center */
  text-align: center;
}

/* Neutralize Phantom's "content anchored at bottom" so it's centered */
.tiles article > a .content {
  position: static !important;
  transform: none !important;
  margin: 0.65rem 0 0 0;
  padding: 0 !important;
  width: 100%;
}

.tiles article > a h2 {
  margin: 0;
}

/* Title + hover blurb typography */
.tiles article h2 {
  color: var(--text-main) !important;
  font-size: 1.05rem;
  line-height: 1.3;
}

.tiles article p {
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Hover blurbs = darker gold */
.tiles article .content p {
  color: var(--text-muted) !important;
  margin: 0;
}

/* Image cropping */
.tiles article .image {
  height: 220px;
  overflow: hidden;
}

.tiles article .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* =========================
   REMOVE Phantom diagonal “X”
   Keep overlays, just remove diagonal pattern
   ========================= */

/* Kill the diagonal layer that Phantom draws */
.tiles article > a::after {
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  background-image: none !important;
}

/* If Phantom bakes diagonal stripes into background-image on ::before, strip ONLY the image */
.tiles article > a::before,
.tiles article > .image::before,
.tiles article > .image::after,
.tiles article::before,
.tiles article::after {
  background-image: none !important;
}

/* =========================
   Overlays
   (Alternate 3 colors across tiles in EACH tiles section)
   ========================= */

/* Keep overlay visible */
.tiles article > a::before,
.tiles article > .image::before {
  opacity: 0.86 !important; /* base overlay strength */
}

/* Alternate overlay colors */
.tiles article:nth-child(3n + 1) > a::before,
.tiles article:nth-child(3n + 1) > .image::before {
  background: var(--tile-a) !important;
}

.tiles article:nth-child(3n + 2) > a::before,
.tiles article:nth-child(3n + 2) > .image::before {
  background: var(--tile-b) !important;
}

.tiles article:nth-child(3n) > a::before,
.tiles article:nth-child(3n) > .image::before {
  background: var(--tile-c) !important;
}

/* =========================
   Hover behavior (Phantom-like)
   ========================= */

/* Keep overlay but darken slightly */
.tiles article > a:hover::before,
.tiles article > a:hover .image::before {
  opacity: 0.92 !important;
}

/* Dim image a bit on hover */
.tiles article > a:hover .image img {
  filter: brightness(0.98) contrast(1.02);
}

/* Extra film layer */
.tiles article > a:hover .image {
  box-shadow: inset 0 0 0 9999px var(--hover-film);
}

/* =========================
   Projects titles slightly larger than Research
   (Targets the SECOND tiles section in your layout)
   ========================= */

/* In your HTML: Research tiles come first, then a section-header, then Projects tiles.
   This selector targets the Projects tiles section specifically. */
.tiles + .section-header + .tiles article h2 {
  font-size: 1.18rem !important;
  line-height: 1.25;
}

/* =========================
   Section Headers
   ========================= */

.section-header {
  margin-top: 3.5rem;
  margin-bottom: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(244, 179, 66, 0.25);
}

.section-header h2 {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-main);
}

/* Extra spacing between sections */
.tiles + .section-header {
  margin-top: 5rem;
}

.tiles:last-of-type {
  margin-bottom: 4rem;
}

/* =========================
   Footer
   ========================= */

#footer {
  background: transparent !important;
  border-top: 1px solid rgba(244, 179, 66, 0.25);
  margin-top: 4rem;
  padding-top: 2rem;
}

#footer p,
#footer li,
#footer a {
  color: var(--text-muted);
}