/* Creative Garden / Creative Library */

.page-title {
  margin: 0 0 0.5rem 0;
  color: var(--color-heading);
  font-size: 1.5rem;
  font-weight: 600;
}

body.light-mode .page-title {
  color: var(--color-heading-light);
}

.page-intro {
  margin: 0 0 3rem 0;
  color: var(--color-subheading);
  font-size: 1rem;
  font-weight: 400;
}

body.light-mode .page-intro {
  color: var(--color-subheading-light);
}

.library-container {
  margin: 3rem 0;
}

/* Folders grid */
.folders-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  align-items: flex-start;
  justify-content: flex-start;
}

.folder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--color-heading);
  transition: transform 0.2s ease, color 0.2s ease;
  cursor: pointer;
}

.folder:hover {
  transform: translateY(-2px);
  color: var(--color-nav-link);
}

body.light-mode .folder {
  color: var(--color-heading-light);
}

body.light-mode .folder:hover {
  color: var(--color-nav-link);
}

/* Folder icon: back + contents (papers) + flap that opens (GSAP) */
.folder__icon {
  position: relative;
  width: 5rem;
  height: 4rem;
  flex-shrink: 0;
  transform-style: preserve-3d;
  perspective: 24rem;
}

/* Back of folder */
.folder__icon-back {
  position: absolute;
  inset: 0;
  background: var(--folder-color, #E8B923);
  border-radius: 0 0.25rem 0.25rem 0;
}

/* Interior "contents" revealed when flap opens */
.folder__icon-contents {
  position: absolute;
  inset: 0.25rem 0.35rem 0.35rem 0.35rem;
  background: #faf8f0;
  border-radius: 0 0.15rem 0.15rem 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.35rem;
  padding: 0.4rem 0.35rem 0.35rem 0.35rem;
}

body:not(.light-mode) .folder__icon-contents {
  background: #e8e4d8;
}

.folder__icon-line {
  height: 0.2rem;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 0.05rem;
  width: 100%;
}

.folder__icon-line:nth-child(1) { width: 95%; }
.folder__icon-line:nth-child(2) { width: 88%; margin-left: 0.15rem; }
.folder__icon-line:nth-child(3) { width: 92%; margin-left: 0.05rem; }

body:not(.light-mode) .folder__icon-line {
  background: rgba(0, 0, 0, 0.2);
}

/* Front flap – opens backward to reveal contents */
.folder__icon-flap {
  position: absolute;
  inset: 0;
  background: var(--folder-color, #E8B923);
  border-radius: 0 0.25rem 0.25rem 0;
  transform-origin: bottom center;
  transform-style: preserve-3d;
  z-index: 2;
}

/* Tab on the flap – darker shade of folder color */
.folder__icon-tab {
  position: absolute;
  top: -0.5rem;
  left: 0;
  width: 2rem;
  height: 0.5rem;
  background: color-mix(in srgb, var(--folder-color, #E8B923) 55%, black);
  border-radius: 0.25rem 0.25rem 0 0;
}

/* Tooltip: follows cursor, single line */
.folder__tooltip {
  position: fixed;
  left: 0;
  top: 0;
  padding: 0.375rem 0.625rem;
  background-color: rgba(0, 0, 0, 0.9);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
  border-radius: 0.25rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 1000;
}

.folder__tooltip.folder__tooltip--visible {
  opacity: 1;
}

body.light-mode .folder__tooltip {
  background-color: rgba(0, 0, 0, 0.92);
}

.folder__label {
  font-size: 0.9375rem;
  font-weight: 500;
  text-align: center;
  margin: 0;
}

.library-loading,
.library-empty {
  color: var(--color-subheading);
  font-size: 0.875rem;
  margin: 1rem 0 0 0;
}

body.light-mode .library-loading,
body.light-mode .library-empty {
  color: var(--color-subheading-light);
}


@media (max-width: 48rem) {
  .page-title {
    font-size: 1.25rem;
  }

  .page-intro {
    font-size: 0.875rem;
    margin-bottom: 2rem;
  }

  .library-container {
    margin: 2rem 0;
  }

  .folders-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    justify-items: center;
    align-items: start;
  }

  .folder {
    justify-self: center;
  }

  .folder__icon {
    width: 6.5rem;
    height: 5.2rem;
  }

  .folder__icon-tab {
    width: 2.6rem;
    height: 0.65rem;
  }

  .folder__label {
    font-size: 0.875rem;
    text-align: center;
  }
}