/* Cinecrazy — main.css (deferred load) */

/* Trending strip */
.cc-trending-strip { margin: var(--cc-space-6) 0; }
.cc-trending-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--cc-grid-gap); }
@media (min-width: 640px) { .cc-trending-grid { grid-template-columns: repeat(4,1fr); } }

/* Category strips */
.cc-cat-strip { margin: var(--cc-space-6) 0; }
.cc-strip-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--cc-space-5); }
.cc-see-more { font-size: var(--cc-text-xs); font-weight: var(--cc-font-semibold); color: var(--cc-red); text-transform: uppercase; letter-spacing: 0.8px; }
.cc-see-more:hover { text-decoration: underline; }

/* Main grid section */
.cc-main-grid { margin: var(--cc-space-6) 0; }

/* Card share button */
.cc-card-share {
  position: absolute; top: var(--cc-space-3); right: var(--cc-space-3);
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--cc-text);
  opacity: 0;
  transition: opacity var(--cc-transition-fast), background var(--cc-transition-fast);
  backdrop-filter: blur(4px);
}
.cc-card:hover .cc-card-share { opacity: 1; }
.cc-card-share:hover { background: #fff; }

/* Source pills */
.cc-source-attribution { display: flex; align-items: center; gap: var(--cc-space-3); flex-wrap: wrap; margin: var(--cc-space-4) 0; }
.cc-source-label { font-size: var(--cc-text-xs); font-weight: var(--cc-font-bold); text-transform: uppercase; letter-spacing: 1px; color: var(--cc-text-muted); white-space: nowrap; }
.cc-source-pills { display: flex; gap: var(--cc-space-2); flex-wrap: wrap; }
.cc-pill {
  display: inline-flex; align-items: center; gap: var(--cc-space-1);
  font-size: var(--cc-text-xs); font-weight: var(--cc-font-semibold);
  padding: 3px 10px; border-radius: var(--cc-radius-pill);
  transition: opacity var(--cc-transition-fast);
}
.cc-pill:hover { opacity: 0.85; }
.cc-pill-reddit { background: var(--cc-pill-reddit-bg); color: var(--cc-pill-reddit-text); }
.cc-pill-x { background: var(--cc-pill-x-bg); color: var(--cc-pill-x-text); }

/* Single article */
.cc-single { padding: var(--cc-space-5) 0 var(--cc-space-9); }
.cc-single-inner { max-width: 720px; margin: 0 auto; padding: 0 var(--cc-container-padding); }
/* Single-article hero — gradient-letterbox treatment (crop fix).
   Portrait TMDb headshots (4:5) and landscape film stills (16:9) both render in
   FULL via object-fit:contain, centred over a subtle brand gradient. Faces are
   never cropped. No background image → the single high-priority foreground image
   remains the LCP (perf-safe; TBT/CLS unaffected). */
.cc-single-hero {
  position: relative;
  max-width: 1280px;
  margin: 0 auto var(--cc-space-6);
  height: clamp(320px, 52vw, 540px);
  overflow: hidden;
  border-radius: var(--cc-radius-lg);
  background: linear-gradient(135deg, #1a1a1a 0%, #261c1c 50%, #1a1a1a 100%);
}
.cc-single-hero-fg {
  display: block;
  width: 100%;
  height: 100%;
}
.cc-single-hero-fg img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* full image visible — no face crop */
  object-position: center;
  display: block;
}
.cc-single-category {
  display: inline-block; font-size: var(--cc-text-xs); font-weight: var(--cc-font-bold);
  text-transform: uppercase; letter-spacing: 1px; color: var(--cc-red);
  margin-bottom: var(--cc-space-4);
}
.cc-single-title {
  font-size: var(--cc-text-2xl); font-weight: var(--cc-font-bold);
  line-height: var(--cc-leading-tight); margin-bottom: var(--cc-space-4);
}
@media (min-width: 768px) { .cc-single-title { font-size: var(--cc-text-3xl); } }
.cc-single-dek {
  font-size: var(--cc-text-lg); color: var(--cc-text-soft);
  line-height: var(--cc-leading-relaxed); margin-bottom: var(--cc-space-5);
  font-weight: var(--cc-font-regular);
}
.cc-single-meta {
  display: flex; align-items: center; gap: var(--cc-space-4); flex-wrap: wrap;
  font-size: var(--cc-text-sm); color: var(--cc-text-muted);
  padding: var(--cc-space-4) 0; border-top: 1px solid var(--cc-border); border-bottom: 1px solid var(--cc-border);
  margin-bottom: var(--cc-space-6);
}
.cc-meta-divider { color: var(--cc-border); }

/* Article body typography */
.cc-entry-content { font-size: var(--cc-text-base); line-height: var(--cc-leading-relaxed); color: var(--cc-text); }
.cc-entry-content p { margin-bottom: var(--cc-space-4); }
.cc-entry-content h2 { font-size: var(--cc-text-2xl); font-weight: var(--cc-font-bold); margin: var(--cc-space-6) 0 var(--cc-space-4); line-height: var(--cc-leading-snug); }
.cc-entry-content h3 { font-size: var(--cc-text-xl); font-weight: var(--cc-font-semibold); margin: var(--cc-space-5) 0 var(--cc-space-3); line-height: var(--cc-leading-snug); }
.cc-entry-content blockquote {
  border-left: 4px solid var(--cc-red); padding-left: var(--cc-space-5);
  font-size: var(--cc-text-lg); font-style: italic; color: var(--cc-text-soft);
  margin: var(--cc-space-6) 0;
}
.cc-entry-content img { border-radius: var(--cc-radius-md); margin: var(--cc-space-5) 0; }
.cc-entry-content figcaption { font-size: var(--cc-text-sm); color: var(--cc-text-muted); margin-top: var(--cc-space-2); }
.cc-entry-content ul, .cc-entry-content ol { padding-left: var(--cc-space-5); margin-bottom: var(--cc-space-4); }
.cc-entry-content ul li { list-style: disc; margin-bottom: var(--cc-space-2); }
.cc-entry-content ol li { list-style: decimal; margin-bottom: var(--cc-space-2); }
.cc-entry-content a { color: var(--cc-red); text-decoration: underline; text-decoration-color: var(--cc-red-tint); }
.cc-entry-content a:hover { text-decoration-color: var(--cc-red); }

/* Share row */
.cc-share-row { display: flex; align-items: center; gap: var(--cc-space-3); margin: var(--cc-space-6) 0; flex-wrap: wrap; }
.cc-share-label { font-size: var(--cc-text-sm); font-weight: var(--cc-font-semibold); color: var(--cc-text-soft); }
.cc-share-btn {
  display: inline-flex; align-items: center; gap: var(--cc-space-2);
  font-size: var(--cc-text-sm); font-weight: var(--cc-font-medium);
  padding: var(--cc-space-2) var(--cc-space-4);
  border-radius: var(--cc-radius-pill);
  border: 1.5px solid var(--cc-border);
  color: var(--cc-text-soft);
  transition: all var(--cc-transition-fast);
}
.cc-share-btn:hover { border-color: var(--cc-text-soft); color: var(--cc-text); }
.cc-share-btn-primary { background: var(--cc-red); border-color: var(--cc-red); color: #fff; }
.cc-share-btn-primary:hover { background: var(--cc-red-dark); border-color: var(--cc-red-dark); color: #fff; }

/* Tags */
.cc-tags { display: flex; flex-wrap: wrap; gap: var(--cc-space-2); margin: var(--cc-space-6) 0; }
.cc-tag {
  font-size: var(--cc-text-xs); font-weight: var(--cc-font-medium);
  padding: var(--cc-space-1) var(--cc-space-3);
  border-radius: var(--cc-radius-pill); border: 1px solid var(--cc-border);
  color: var(--cc-text-soft);
  transition: all var(--cc-transition-fast);
}
.cc-tag:hover { background: var(--cc-gray-100); border-color: var(--cc-gray-300); }

/* Related articles */
.cc-related { padding: var(--cc-space-7) 0 0; border-top: 1px solid var(--cc-border); margin-top: var(--cc-space-7); }
.cc-related-title { font-size: var(--cc-text-base); font-weight: var(--cc-font-bold); text-transform: uppercase; letter-spacing: 1px; margin-bottom: var(--cc-space-5); color: var(--cc-text-muted); }

/* Breadcrumbs */
.cc-breadcrumbs { display: flex; align-items: center; gap: var(--cc-space-2); font-size: var(--cc-text-xs); color: var(--cc-text-muted); margin-bottom: var(--cc-space-5); flex-wrap: wrap; }
.cc-breadcrumbs a { color: var(--cc-text-muted); transition: color var(--cc-transition-fast); }
.cc-breadcrumbs a:hover { color: var(--cc-red); }
.cc-breadcrumbs-sep { color: var(--cc-gray-300); }

/* Mobile nav drawer */
.cc-drawer {
  position: fixed; inset: 0; z-index: 200;
  background: var(--cc-bg);
  transform: translateX(100%);
  transition: transform var(--cc-transition-base);
  display: flex; flex-direction: column;
  padding: var(--cc-space-5);
}
.cc-drawer.open { transform: translateX(0); }
.cc-drawer-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--cc-space-6); }
.cc-drawer-nav { display: flex; flex-direction: column; gap: var(--cc-space-4); }
.cc-drawer-nav a { font-size: var(--cc-text-xl); font-weight: var(--cc-font-semibold); color: var(--cc-text); }
.cc-drawer-search { margin-top: var(--cc-space-6); }
.cc-drawer-search input {
  width: 100%; padding: var(--cc-space-3) var(--cc-space-4);
  border: 1.5px solid var(--cc-border); border-radius: var(--cc-radius-md);
  font-size: var(--cc-text-base); font-family: inherit; outline: none;
}
.cc-drawer-search input:focus { border-color: var(--cc-red); }

/* Search modal */
.cc-search-modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.7);
  display: none; align-items: flex-start; justify-content: center;
  padding-top: 120px;
}
.cc-search-modal.open { display: flex; }
.cc-search-box { background: var(--cc-bg); border-radius: var(--cc-radius-lg); padding: var(--cc-space-5); width: 100%; max-width: 600px; margin: 0 var(--cc-container-padding); }
.cc-search-input { display: flex; gap: var(--cc-space-3); }
.cc-search-input input {
  flex: 1; padding: var(--cc-space-3) var(--cc-space-4);
  border: 1.5px solid var(--cc-border); border-radius: var(--cc-radius-md);
  font-size: var(--cc-text-base); font-family: inherit; outline: none;
}
.cc-search-input input:focus { border-color: var(--cc-red); }
.cc-search-input button {
  padding: var(--cc-space-3) var(--cc-space-5);
  background: var(--cc-red); color: #fff; border-radius: var(--cc-radius-md);
  font-weight: var(--cc-font-semibold); font-size: var(--cc-text-sm);
  transition: background var(--cc-transition-fast);
}
.cc-search-input button:hover { background: var(--cc-red-dark); }

/* Footer */
.cc-footer { border-top: 1px solid var(--cc-border); padding: var(--cc-space-6) 0; margin-top: var(--cc-space-9); }
.cc-footer-inner { display: flex; flex-direction: column; gap: var(--cc-space-4); align-items: center; text-align: center; }
@media (min-width: 768px) { .cc-footer-inner { flex-direction: row; justify-content: space-between; text-align: left; } }
.cc-footer-brand { font-size: var(--cc-text-sm); color: var(--cc-text-muted); font-weight: var(--cc-font-medium); }
.cc-footer-links { display: flex; gap: var(--cc-space-4); flex-wrap: wrap; justify-content: center; }
.cc-footer-links a { font-size: var(--cc-text-xs); color: var(--cc-text-muted); transition: color var(--cc-transition-fast); }
.cc-footer-links a:hover { color: var(--cc-red); }
.cc-footer-social { display: flex; gap: var(--cc-space-3); }
.cc-footer-social a { color: var(--cc-text-muted); transition: color var(--cc-transition-fast); }
.cc-footer-social a:hover { color: var(--cc-text); }

/* Archive / category page */
.cc-archive { padding: var(--cc-space-6) 0; }
.cc-archive-header { margin-bottom: var(--cc-space-6); }
.cc-archive-title { font-size: var(--cc-text-2xl); font-weight: var(--cc-font-bold); margin-bottom: var(--cc-space-2); }
.cc-archive-desc { color: var(--cc-text-muted); font-size: var(--cc-text-base); }

/* 404 */
.cc-404 { text-align: center; padding: var(--cc-space-9) var(--cc-container-padding); }
.cc-404-logo { font-size: 48px; font-weight: var(--cc-font-bold); color: var(--cc-red); margin-bottom: var(--cc-space-5); }
.cc-404-title { font-size: var(--cc-text-2xl); font-weight: var(--cc-font-bold); margin-bottom: var(--cc-space-3); }
.cc-404-sub { font-size: var(--cc-text-lg); color: var(--cc-text-muted); margin-bottom: var(--cc-space-7); }
.cc-404-recent { margin-top: var(--cc-space-8); }

/* Toast notification */
.cc-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(100px);
  background: var(--cc-text); color: #fff;
  font-size: var(--cc-text-sm); font-weight: var(--cc-font-medium);
  padding: var(--cc-space-3) var(--cc-space-5);
  border-radius: var(--cc-radius-pill);
  z-index: 300; opacity: 0;
  transition: all var(--cc-transition-base);
  white-space: nowrap;
}
.cc-toast.cc-toast-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Read time */
.cc-read-time { font-size: var(--cc-text-xs); color: var(--cc-text-muted); }

/* Home page */
.cc-home { padding-bottom: var(--cc-space-9); }

/* Utilities */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.cc-home { padding-top: var(--cc-space-5); }