/* ===========================================
   dynamic-tiles.css — Styles for dynamic tile components
   ===========================================

   Governs tile-based UI sections:
   1) #dynamic-tiles — Index page tiles (flip animation + secret tile)
   2) #related-tiles — Related Topics tiles (clickable, no flip)

   Sections:
   - 1) Container Layout
   - 2) Flex Behavior (Desktop & Mobile)
   - 3) Tile Base Styles
   - 4) Flip Animation
   - 5) Front/Back Face Styling
   - 6) Secret Easter Egg Tile
   - 7) Close Button
   - 8) Wrapper Overflow & Clearing Fix
   - 9) Custom Topic-Only Tile Sizing
   - 10) Reduce Title/Desc Spacing
   - 11) Center Text in Tiles
*/

/* -----------------------------------------
   1) Container Layout
   Shared flex container for dynamic tiles
----------------------------------------- */
#dynamic-tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 30px 0;
}

/* -----------------------------------------
   2) Flex Behavior (Desktop & Mobile)
----------------------------------------- */
@media screen and (max-width: 768px) {
  #dynamic-tiles,
  #related-tiles {
    flex-wrap: wrap;
  }
}

/* -----------------------------------------
   3) Tile Base Styles
   Core properties for all .tile elements
----------------------------------------- */
.tile {
  perspective: 1000px;
  width: 100%;
  max-width: 300px;
  height: 200px;
  opacity: 0;
  transition: opacity 0.6s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
}
.tile.visible {
  opacity: 1;
}

/* -----------------------------------------
   3.1) Fix for dynamic flip-tile sizing
   Overrides width for tiles inside #dynamic-tiles
----------------------------------------- */
#dynamic-tiles .tile {
  width: auto;
  flex: 0 0 300px;
  max-width: 300px;
}

/* -----------------------------------------
   4) Flip Animation
----------------------------------------- */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s;
}
.tile.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

/* -----------------------------------------
   5) Front/Back Face Styling
----------------------------------------- */
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 10px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  line-height: 1.2;
}
.flip-card-front {
  background-color: #222;
  color: #fff;
  z-index: 2;
  transform: rotateY(0deg);
}
.flip-card-back {
  background-color: #1e90ff;
  color: #fff;
  transform: rotateY(180deg);
  font-size: 1.1rem;
}

/* -----------------------------------------
   6) Secret Easter Egg Tile
----------------------------------------- */
.tile.secret {
  position: fixed;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%) scale(0.8);
  width: 90%;
  max-width: 500px;
  padding: 24px 20px 30px;
  background-color: #1a1a1a;
  color: #fff;
  border: 2px dashed #ffd700;
  border-radius: 12px;
  text-align: center;
  font-style: italic;
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.15);
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.tile.secret.revealed {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* -----------------------------------------
   7) Close Button
----------------------------------------- */
.close-tile {
  position: absolute;
  top: 8px;
  right: 12px;
  background: transparent;
  border: none;
  font-size: 1.2rem;
  color: #ffd700;
  cursor: pointer;
  z-index: 11;
  transition: color 0.2s ease;
}
.close-tile:hover {
  color: #fff;
}

/* -----------------------------------------
   8) Wrapper Overflow & Clearing Fix
----------------------------------------- */
.related-topics {
  display: block !important;
  clear: both !important;
  overflow: visible !important;
}
.related-topics > section#related-tiles.dynamic-tiles {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 20px !important;
  padding: 20px !important;
  overflow: visible !important;
}
.related-topics > section#related-tiles.dynamic-tiles > .tile {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* -----------------------------------------
   9) Custom Topic-Only Tile Sizing
----------------------------------------- */
.related-topics > section#related-tiles.dynamic-tiles > .tile {
  width: 150px !important;
  height: 110px !important;
}

/* -----------------------------------------
   10) Reduce Title/Desc Spacing
----------------------------------------- */
.related-topics > section#related-tiles.dynamic-tiles > .tile .flip-card-front h3 {
  margin-bottom: 0.25rem !important;
}
.related-topics > section#related-tiles.dynamic-tiles > .tile .flip-card-front p {
  margin-top: 0.25rem !important;
}

/* -----------------------------------------
   11) Center Text in Tiles
----------------------------------------- */
.related-topics > section#related-tiles.dynamic-tiles > .tile .flip-card-front,
.related-topics > section#related-tiles.dynamic-tiles > .tile .flip-card-back {
  justify-content: center !important;
  align-items: center !important;
}
/* ===========================================
   12) Tile Glow Effects
   — subtle glow at rest
   — stronger glow on hover
   =========================================== */

/* Base subtle glow on all tiles */
#dynamic-tiles .tile,
#related-tiles .tile {
  box-shadow: 0 0 2px 1px rgba(30, 144, 255, 0.1);
  transition: box-shadow 0.3s ease;
}

/* Stronger glow on hover */
#dynamic-tiles .tile:hover,
#related-tiles .tile:hover {
  box-shadow:
    0 0 8px 2px rgba(30, 144, 255, 0.6),
    0 0 16px 4px rgba(30, 144, 255, 0.3);
}

#dynamic-tiles > div,
#related-tiles > div {
  border: 3px solid #ddd;    /* thicker, light gray border */
  padding: 0px;             /* more space inside the shell */
}

.flip-card-front,
.flip-card-back {
  padding: 30px;             /* more room for your text */
}

#dynamic-tiles {
  gap: 30px;                 /* wider gutter between tiles */
}

:target {
  animation: highlightFade 2.5s ease;
}

@keyframes highlightFade {
  0%   { background-color: #fffccf; }
  50%  { background-color: #ffe680; }
  100% { background-color: transparent; }
}

#floatingPageLabel {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #1e90ff;
  color: white;
  font-size: 1.1rem;
  padding: 10px 16px;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 0.4s ease;
}
#floatingPageLabel.show {
  opacity: 0.95;
}
/* End of dynamic-tiles.css */