/* ============================================================
   AMAZING DEVYA — features.css
   Feature-specific styles — loaded independently of theme
   ============================================================ */


/* ── Gallery tabs ── */

.gallery-tabs {
  display: flex;
  gap: var(--space-2);
  margin: 0 auto var(--space-6);
  max-width: var(--container-2xl);
  padding: 0 var(--space-8);
  border-bottom: 2px solid var(--color-paper-aged);
}

.gallery-tab {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  padding: var(--space-2) var(--space-5);
  border: none;
  background: none;
  color: var(--color-ink-light);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: color 150ms, border-color 150ms;
}

.gallery-tab:hover { color: var(--color-ink); }

.gallery-tab--active {
  color: var(--color-coral);
  border-bottom-color: var(--color-coral);
}


/* ── Gallery count line ── */

.gallery-count {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-ink-mid);
  padding: 0 var(--space-8);
  margin: 0 auto var(--space-2);
  max-width: var(--container-2xl);
}

/* Dailies search — sits alone so it shouldn't be pushed right */
#dailies-search {
  margin-left: 0;
  width: 260px;
  border-color: var(--color-paper-aged);
  border-width: 2px;
  background: white;
}


/* ── Homepage featured pair (Spotlight + Latest Daily) ── */

.featured-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: var(--space-4) var(--space-8) var(--space-16);
  align-items: start;
}

@media (max-width: 720px) {
  .featured-pair {
    grid-template-columns: 1fr;
    gap: var(--space-16);
    padding: var(--space-4) var(--space-5) var(--space-12);
  }
}

.featured-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
}

/* Second card tilts opposite to first */
.featured-unit--latest .spotlight__image-wrap {
  transform: rotate(var(--rotate-tiny-r));
}
.featured-unit--latest .spotlight__frame::before { transform: rotate(2deg);  }
.featured-unit--latest .spotlight__frame::after  { transform: rotate(-1deg); }

.featured-unit__frame {
  width: 100%;
  max-width: 320px;
}

.featured-unit__label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: var(--space-1) var(--space-5);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-1);
}

.featured-unit__label--spotlight {
  background: var(--color-marigold-light);
  color: var(--color-ink-mid);
  border: 1.5px solid var(--color-marigold);
}

.featured-unit__label--latest {
  background: var(--color-sage-light);
  color: var(--color-ink-mid);
  border: 1.5px solid var(--color-sage);
}

.featured-unit__cta {
  margin-top: var(--space-2);
}

.featured-unit .spotlight__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
}


/* ── Collection cards grid ── */

.collection-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-12);
  padding: var(--space-8);
  max-width: var(--container-2xl);
  margin: 0 auto;
}

.collection-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-6) var(--space-7);
  box-shadow: var(--shadow-md);
  /* paper grain on the colored background */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  transition: transform var(--transition-spring), box-shadow var(--transition-base);
}

/* Alternating warm accent backgrounds */
.collection-card:nth-child(4n+1) { background-color: #FAEAE2; }   /* blush coral  */
.collection-card:nth-child(4n+2) { background-color: #E4DDEE; }   /* soft lavender */
.collection-card:nth-child(4n+3) { background-color: #D8EDE4; }   /* mint sage     */
.collection-card:nth-child(4n+4) { background-color: #D6EAF4; }   /* dusty sky     */

/* Scrapbook tilt */
.collection-card:nth-child(2n+1) { transform: rotate(-1.4deg); }
.collection-card:nth-child(2n)   { transform: rotate(0.9deg);  }

.collection-card:hover,
.collection-card:focus-visible {
  transform: rotate(0deg) translateY(-8px) !important;
  box-shadow: var(--shadow-xl);
  outline: none;
}

/* Tape strip at top */
.collection-card::before {
  content: '';
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%) rotate(-1.5deg);
  width: 70px;
  height: 22px;
  z-index: 3;
  box-shadow: var(--shadow-tape);
}
.collection-card:nth-child(3n+1)::before { background-color: var(--color-tape-yellow); }
.collection-card:nth-child(3n+2)::before { background-color: var(--color-tape-pink);   }
.collection-card:nth-child(3n)::before   { background-color: var(--color-tape-mint);   }


/* Polaroid photo frame */
.collection-card__image-wrap {
  width: 75%;
  max-width: 220px;
  border: 6px solid white;
  border-bottom-width: 28px;           /* polaroid extra space at bottom */
  box-shadow: var(--shadow-lg);
  border-radius: 2px;
  overflow: hidden;
  line-height: 0;
  transform: rotate(-2.5deg);
  transition: transform var(--transition-spring);
  margin-bottom: var(--space-6);
}

.collection-card:hover .collection-card__image-wrap { transform: rotate(0deg); }

.collection-card__image-wrap img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}

.collection-card__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-ink);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-2);
}

.collection-card__desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-ink-mid);
  line-height: 1.55;
  margin-bottom: var(--space-4);
}

.collection-card__count {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-mid);
  background: rgba(46, 31, 14, 0.09);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}


/* ── Collection back-bar ── */

.collection-back {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0 auto var(--space-4);
  padding: var(--space-2) var(--space-8) 0;
  max-width: var(--container-2xl);
}

.collection-back__btn {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-coral);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: opacity 150ms;
  white-space: nowrap;
}

.collection-back__btn:hover { opacity: 0.75; }

.collection-back__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-ink);
  font-weight: 700;
}


/* ── Gallery search (sits in filter bar row) ── */

.gallery-search {
  margin-left: auto;
  width: 180px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4);
  border: 1.5px solid var(--color-paper-aged);
  border-radius: var(--radius-full);
  background: var(--color-paper-light);
  color: var(--color-ink);
  outline: none;
  transition: border-color 150ms, width 200ms;
  flex-shrink: 0;
}

.gallery-search:focus { border-color: var(--color-coral); width: 220px; }
.gallery-search::placeholder { color: var(--color-ink-faint); }

@media (max-width: 480px) {
  .gallery-search { width: 100%; margin-left: 0; margin-top: var(--space-2); }
  .gallery-search:focus { width: 100%; }
}


/* ── Featured badge on gallery card ── */

.gallery-card__image-wrap { position: relative; }

.gallery-card__featured {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 2;
  background: var(--color-marigold);
  color: var(--color-ink);
  font-size: 0.7rem;
  line-height: 1;
  padding: 3px 7px;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  pointer-events: none;
}


/* ── Lightbox share button ── */

.lightbox__share { display: none; }

.lightbox__share--visible {
  margin-top: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-paper-aged);
  background: var(--color-paper-light);
  color: var(--color-ink-light);
  cursor: pointer;
  transition: border-color 150ms, color 150ms;
}

.lightbox__share:hover { border-color: var(--color-coral); color: var(--color-coral); }
.lightbox__share:disabled { opacity: 0.6; cursor: default; }


/* ── Lightbox tag links ── */

#lightbox-tags a { text-decoration: none; }
#lightbox-tags a:hover .tag { opacity: 0.8; }