/* static/css/home.css */
body {
    font-family: sans-serif;
    background-color: #f5f5f5;
    padding: 0;
    margin: 0;
}

h1 {
    text-align: center;
    margin-bottom: 2rem;
}

/* --- Layout stays 3-column on ≥900px; stacks on ≤899px --- */
.layout {
  display: flex;
  gap: 24px;
  align-items: flex-start; /* keep rails aligned with gallery */
  padding: 2rem;
}

/* Stack the rails when we're in 1–2 column territory */
@media (max-width: 899px) {
  .layout {
    flex-direction: column;
    align-items: center;   
      padding: .75rem;     
    z-index: 1;   /* center sticker rail nicely */
  }

  .gallery {                       /* gallery stays responsive via its own media queries */
    order: 2;
    width: 100%;
  }
  .sticker-sidebar {               /* right sticker rail becomes only as wide as its contents */
    width: max-content;            /* or: fit-content */
    position: static;              /* turn off sticky when stacked */
    order: 3;
    align-self: center;            /* center it under the gallery */
  }
}

.gallery {
  flex-grow: 1;
  min-width: 0;              /* ✅ let it shrink alongside sidebars */
  column-gap: 24px;
  column-width: 265px;       /* ✅ enforce minimum width */
}

/* Responsive gallery column limits based on actual layout width */

@media (min-width: 899px) {
  .gallery { column-count: 2; }
}

@media (min-width: 1080px) {
  .gallery { column-count: 3; }
}

@media (min-width: 1565px) {
  .gallery { column-count: 4; }
}

@media (min-width: 1860px) {
  .gallery { column-count: 5; }
}

.image-container {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    margin-bottom: 24px;
    display: inline-block;
    width: 100%;
    break-inside: avoid;
    transition: box-shadow 0.3s;
    position: relative;
    border: 0px solid transparent;
}

/* Base: all media in the card */
.image-container img,
.image-container video {
  width: 100%;
  height: auto;
  display: block;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;  /* existing shape */
}

.image-container > img:not(.container-footer-img),
.image-container > .gif-container > img,
.image-container > .gif-container > video,
.image-container > .video-toggle {
  border: 3px solid transparent;       /* keeps spacing + rounded corners */
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  box-sizing: border-box;
  position: relative;                  /* anchor for ::before */
}

/* Footer strips must never get borders (safety valve) */
.image-container .container-footer-img {
  border: 0 !important;
}

.caption {
    padding: 1rem;
    position: relative;
    text-align: center; /* Center title */
}

.caption h3 {
    margin: 0 0 0.5rem;
    text-align: center; /* Center title */
    color: #3a3a3a;
    font-weight: 700;
}

.caption p.description {
    margin: 0;
    color: #555;
    font-size: 0.95rem;
    text-align: center; /* Center description */
}

.caption p.remix-info {
    font-size: 0.85rem;
    color: #888;
    text-align: center; /* Center remix info */
}

.caption .user-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.caption .user-info .avatar {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    margin-right: 8px;
}

.caption .user-info .user-details {
    display: flex;
    align-items: center;
}

.caption .username {
    font-weight: bold;
    font-size: 0.9rem;
}

.caption .username a {
    color: #007bff;
    text-decoration: none;
}

.caption .user-info .user-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* keeps text flush left */
}

.caption .timestamp {
    font-size: 0.75rem;
    color: #888;
}

.caption .replies {
    font-size: 0.75rem;
    color: #999;
}


.gif-container {
    position: relative;
    width: 100%;
}

.gif-toggle, .video-toggle {
    display: block;
    width: 100%;
    height: auto;
}

.gif-icon-overlay {
    position: absolute;
    bottom: 8px;
    right: 8px;
    font-size: 1.2rem;
    color: white;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.gif-toggle.playing + .gif-icon-overlay {
    opacity: 0;
}

.thread-link {
    cursor: pointer;
}

.caption h3 {
    margin: 0 0 0.5rem;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
                 "Segoe UI Emoji", "Segoe UI Symbol";
}

.caption p {
    margin: 0;
    color: #555;
    font-size: 0.95rem;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
                 "Segoe UI Emoji", "Segoe UI Symbol";
}

/* ===== Center column + toolbar (match tag_feed.css) ===== */
.center-col{
  display:flex;
  flex-direction:column;
  min-width:0;
  flex:1 1 auto;             /* makes toolbar width match gallery */
}

/* Add spacing around the gallery only on small screens */
@media (max-width: 899px) {
  .layout {
    flex-direction: column;
    align-items: center;
    padding: .75rem;
    z-index: 1;
  }

  /* ✅ Match profile page behavior */
  .layout > * {
    width: 100%;
    max-width: 720px;
  }

  .sidebar-card {
    width: 100%;
    max-width: 720px;   /* 👈 match profile page */
    box-sizing: border-box;
  }

  .layout > .sidebar-card {
    width: 100%;
    max-width: 720px;
  }

  .center-col {
    width: 100%;
    max-width: 720px;
    padding: 0;            /* ✅ remove the extra padding that makes widths look “off” */
    box-sizing: border-box;
    order: 2;
  }

  .gallery {
    width: 100%;
  }

  .sticker-sidebar {
    width: max-content;
    position: static;
    order: 3;
    align-self: center;
  }
}

.feed-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between; /* Left: sort, Right: (reserved) */
  gap:12px;
  margin-bottom:10px;
  padding: 0 0 .2rem 0;                   /* flush with gallery edges */
}

.sort-toggle {
  display: flex;
  gap: 6px;
}

/* Base style (like Following button) */
.sort-btn {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid #bbb;
  cursor: pointer;
  background: linear-gradient(#f8f8f8, #e0e0e0);
  color: #444;
  text-decoration: none;
  display: inline-block;
  min-width: 5.5rem; /* keeps consistent width */
  text-align: center;
  transition: background 0.2s ease, color 0.2s ease;
}


/* Inactive = clickable */
.sort-btn.inactive {
  background: linear-gradient(#ffffff, #f6f6f6);
  border-color: #aaa;
  color: #00a0e9; /* blue text for inactive option */
}

/* Hover state */
.sort-btn.inactive:hover {
  background: linear-gradient(#f0f0f0, #d6d6d6);
}

/* Login button (matches Follow button style) */
.login-btn {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 4px 14px;
  border-radius: 6px;
  border: 1px solid #8ecf8e;
  cursor: pointer;
  line-height: 1.4;
  background-image: linear-gradient(90deg,#bfedcf 0%,#dcf7e6 100%);
  color: #006838;
  text-decoration: none;
  display: inline-block;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.login-btn:hover {
  background: linear-gradient(#c8f0c8, #aee0ae);
}

/* Keep badges inside the card */
.image-container{
  position: relative;
  overflow: hidden;   /* clip any corner bubbles */
  isolation: isolate; /* stop z-index from escaping the card */
}

/* Never show the pack’s “×N” badge inside cards */
.image-container .count-br,
.image-container .sticker-count-br { display: none !important; }

.image-container.is-anon .username a { pointer-events:none; color:#3a3a3a; text-decoration:none; }
.image-container .username .anon { font-weight:600; }

/* — White light glow for sticker dragging on the homepage — */
body.home-page.sticker-dragging .image-container.hover:not(.dimmed) {
  /* strong outward bloom (uses spread radius to be visible on grey) */
  box-shadow:
    0 0 12px rgba(255, 255, 255, 0.85),
    0 0 28px rgba(240, 245, 255, 0.65),
    0 0 56px rgba(230, 235, 255, 0.55),
    0 0 90px rgba(220, 225, 255, 0.45);
}

/* make sure nothing clips the glow */
.layout, .center-col, .gallery { overflow: visible; }

/* --- Keep timestamp under username; pin replies on the right (profile) --- */
.caption .user-info {
  display: flex;
  align-items: center;
  justify-content: space-between;  /* two sides: left cluster & replies */
  gap: 5px;
  text-align: left;                /* override any caption centering */
}

.caption .user-info .user-details {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1 1 auto;                  /* let the left cluster grow */
  min-width: 0;                    /* prevent overflow clipping */
}

/* stack username + time flush-left */
.caption .user-info .user-details > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.caption .timestamp { text-align: left; }

.caption .replies {
  flex: 0 0 auto;                  /* don't stretch */
  white-space: nowrap;             /* keep “12 replies” on one line */
}

/* === Sidebar footer links === */
.sidebar-footer {
  margin-top: 1.5rem;
  text-align: left;
  font-size: 0.85rem;
  color: #666;
}

.sidebar-footer .sidebar-link {
  display: block;
  color: #666;
  text-decoration: none;
  margin: 0.25rem 0;
  transition: color 0.2s ease;
}

.sidebar-footer .sidebar-link:hover {
  color: #000;
  text-decoration: underline;
}

/* Mobile-only caret toggle under TRENDING */
.sidebar-collapse-toggle {
  display: none; /* hidden on desktop */
  width: 100%;
  margin: 6px 0 2px;
  padding: 6px 0;
  background: transparent;
  border: 0;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #999;
}

.sidebar-collapse-toggle:hover {
  color: #666;
}

.sidebar-collapse-toggle .toggle-label {
  display: none; /* hide "More" text */
}

/* Wide caret */
.sidebar-collapse-toggle .toggle-caret {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  transform: scaleX(1.6); /* 👈 makes it a wide V */
  transition: transform 0.2s ease;
}

/* Rotate when open */
.sidebar-collapse-toggle[aria-expanded="true"] .toggle-caret {
  transform: scaleX(1.6) rotate(180deg);
}

/* Hidden by default (desktop + tablet) */
.sidebar-collapse-toggle {
  display: none;
}

@media (max-width: 899px) {
  .sidebar-collapse-toggle {
    display: flex;
  }

  .sidebar-collapsible {
    display: none;
    margin-top: 6px;
  }

  .sidebar-collapsible.is-open {
    display: block;
  }
}

/* JS-enhanced mode only */
body.home-page.js-masonry .gallery{
  position: relative;
  column-count: unset;
  column-gap: 0;
}

body.home-page.js-masonry .gallery .image-container{
  position: absolute;
  margin: 0 !important;
  width: auto;
}

.image-container .caption { padding-bottom: 1.75rem; }

/* Make "Trending" link look exactly like plain tags-header text */
.tags-header a,
.tags-header a:visited,
.tags-header a:hover,
.tags-header a:active,
.tags-header a:focus {
  color: inherit;
  text-decoration: none;
}

.tags-header a { cursor: pointer; }

.tags-header a:hover {
  text-decoration: underline;
}

#feed-sentinel {
  height: 1px;
}

#feed-sentinel.loading {
  height: 40px; /* optional: gives you space for a spinner */
}

.caption h3,
.caption p,
.caption p.description,
.caption p.remix-info {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.thread-html-link{
  display:block;
  color:inherit;
  text-decoration:none;
}

.image-container:hover .sticker-strip,
.image-container:focus-within .sticker-strip,
.image-container .sticker-strip:hover {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}