/* Header */
.insta-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-light);
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
  height: 56px;
}
.header-logo {
  display: flex; align-items: center; gap: 10px; font-family: var(--font-serif);
  color: #4A4A4A;
}
.logo-icon {
  height: 32px; width: auto; object-fit: contain;
}
.logo-brand {
  display: flex; flex-direction: column; justify-content: center; line-height: 1.1;
}
.logo-title {
  font-weight: 700; font-size: 22px; font-style: italic; color: #4A4A4A; letter-spacing: -0.5px;
}
.logo-slogan {
  font-family: var(--font-sans, 'Inter', sans-serif); font-size: 11px; font-weight: 500;
  color: var(--text-gray, #888); letter-spacing: 0.2px; text-transform: uppercase;
}
.header-actions { display: flex; gap: 16px; }
.header-actions button { color: var(--text-dark); display: flex; }

/* Filters */
.insta-filters {
  background: var(--bg-page);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
}
.filters-scroll {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
}
.filters-scroll::-webkit-scrollbar { display: none; }
.filter-pill {
  white-space: nowrap; padding: 8px 16px; font-size: 14px; font-weight: 600;
  border-radius: 20px; border: 1px solid var(--border-light); background: var(--bg-surface);
  color: var(--text-gray); transition: all 0.2s;
  display: flex; align-items: center; gap: 6px;
}
.filter-pill.active {
  background: #54655F;
  color: white; border-color: #54655F;
}
.filter-pill .icon { font-size: 12px; }

/* Feed */
#insta-feed {
  max-width: 600px; margin: 0 auto; padding: 16px 0 60px;
}
.loading-screen { display: flex; justify-content: center; padding: 40px; }

/* Post Container */
.insta-post {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  margin-bottom: 24px; overflow: hidden;
}

/* Post Header */
.post-header {
  display: flex; align-items: center; padding: 12px 16px;
}
.post-user-info { flex: 1; display: flex; flex-direction: column; }
.post-username { font-weight: 600; font-size: 14px; color: var(--text-dark); margin-bottom: 2px; }
.post-location { font-size: 12px; color: var(--text-gray); }
.post-header-actions { display: flex; gap: 8px; align-items: center; }
.post-menu, .post-favorite { color: var(--text-gray); cursor: pointer; transition: color 0.2s; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; }
.post-favorite.active { color: #e74c3c; } /* Red heart when favorited */

/* Post Carousel Area (The Cover Frame) */
.post-carousel-container {
  width: 100%; aspect-ratio: 1 / 1; /* Classic square Instagram post */
  position: relative; overflow: hidden;
  background-color: #EFEFEF;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Elegant shadow gradients to protect text readability on bright covers */
.post-carousel-container::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 80px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.75) 0%, transparent 100%);
  z-index: 2; pointer-events: none;
}
.post-carousel-container::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60px;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
  z-index: 2; pointer-events: none;
}

/* The Dark Inner Card containing the text */
.inner-card-frame {
  width: 85%;
  height: 85%;
  position: relative;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 5;
}

/* Progress Dash Bar */
.post-progress-dashes {
  position: absolute; top: 12px; left: 16px; right: 16px;
  display: flex; gap: 4px; z-index: 10;
}
.dash {
  flex: 1; height: 2px; background: rgba(255,255,255,0.4); border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.dash.active { background: rgba(255,255,255,1); }

/* Meta Overlays inside image */
.meta-overlay {
  position: absolute; font-size: 10px; font-weight: 600; letter-spacing: 0.5px;
  text-transform: uppercase; color: rgba(255,255,255,0.8); z-index: 10;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}
.meta-top-left { top: 12px; left: 16px; max-width: 45%; }
.meta-top-right { top: 12px; right: 16px; text-align: right; max-width: 45%; }
.meta-bottom-left { bottom: 12px; left: 16px; max-width: 45%; }
.meta-bottom-right { bottom: 12px; right: 16px; text-align: right; font-variant-numeric: tabular-nums; max-width: 45%; }

/* Carousel Track */
.post-track {
  display: flex; width: 100%; height: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.post-track::-webkit-scrollbar { display: none; }

/* Text Card */
.post-card {
  flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: center;
  display: flex; align-items: center; justify-content: center;
  padding: 20px 24px;
  box-sizing: border-box;
}
.post-card-text {
  font-family: var(--font-reading); font-size: 18px; line-height: 1.5;
  text-align: center; white-space: pre-line;
  max-height: 100%;
  display: -webkit-box; -webkit-line-clamp: 10; -webkit-box-orient: vertical; overflow: hidden;
}

@media (max-width: 480px) {
  .post-card {
    padding: 16px 16px;
  }
  .post-card-text {
    font-size: 15px;
    line-height: 1.45;
    max-height: 100%;
    -webkit-line-clamp: 9;
  }
  .meta-top-left, .meta-top-right {
    top: 24px;
  }
}

/* Responsiveness for larger screens */
@media (min-width: 500px) {
  .post-card-text { font-size: 20px; -webkit-line-clamp: 11; }
  .post-card { padding: 24px 32px; }
  .meta-top-left { top: 16px; left: 20px; }
  .meta-top-right { top: 16px; right: 20px; }
  .meta-bottom-left { bottom: 16px; left: 20px; }
  .meta-bottom-right { bottom: 16px; right: 20px; }
}

/* Navigation Arrows */
.nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  z-index: 20;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: background 0.2s;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.nav-arrow:hover { background: rgba(0, 0, 0, 0.7); }
.nav-prev { left: 8px; }
.nav-next { right: 8px; }

/* Removed pointer: coarse media query to show arrows on touch devices */

/* Light & Sepia Theme Adjustments */
.mood-light .meta-overlay,
.mood-sepia .meta-overlay {
  color: rgba(0, 0, 0, 0.5);
}
.mood-light .dash,
.mood-sepia .dash {
  background: rgba(0, 0, 0, 0.1);
}
.mood-light .dash.active,
.mood-sepia .dash.active {
  background: rgba(0, 0, 0, 0.7);
}