/* ===================================================================
   Lighthouse in the Desert — /assets/css/site.css
   Scope: Home (index.php) + Blog (blog/all-posts.php) + Create Post
   Light theme only (no dark-mode toggling)
   =================================================================== */

/* -------------------------------------------------------------------
   CSS Variables / Theme
------------------------------------------------------------------- */
:root {
  --bg-dark: #11141a;
  --text: #111;
  --muted: #6c757d;
  --border: #e5e7eb;

  /* Pills */
  --pill-cat-bg: #eef5ff;
  --pill-cat-bd: #d8e8ff;
  --pill-cat-fg: #1e4a8a;

  --pill-tag-bg: #f7f7f7;
  --pill-tag-bd: #e7e7e7;
  --pill-tag-fg: #333;

  /* Cards / shadows */
  --card-radius: 1rem;
  --card-shadow: 0 10px 24px rgba(0,0,0,.06);
}

/* -------------------------------------------------------------------
   Global / Layout
------------------------------------------------------------------- */
html, body { height: 100%; overflow-x: hidden; }

body {
  display: flex; flex-direction: column;
  margin: 0; color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #fff;
}

main { flex: 1; }
.nowrap { white-space: nowrap; }

/* Links */
a { color: #0a58ca; }
a:hover { color: #0949a8; text-decoration: none; }

/* Navbar + Footer */
header .navbar { background: var(--bg-dark) !important; }
footer { background: var(--bg-dark); color: #eee; }

/* -------------------------------------------------------------------
   HOME — Hero / Newsletter / Socials / CTAs
------------------------------------------------------------------- */
.hero {
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15)),
    url('/assets/images/subscribe_form-background-1920x1080.jpg') center/cover no-repeat;
  color: #fff;
  min-height: 64vh;
  display: block;
  text-align: center;
  padding-block: clamp(2rem, 6vw, 3.5rem);
  position: relative; z-index: 1;
}
.hero .lead { max-width: 720px; margin: 0 auto; }

@media (max-width: 576px) {
  .hero { min-height: 72vh; padding-bottom: clamp(2.5rem, 12vw, 4rem); }
}

/* Subpage mini-hero */
.sub-hero .h4 { letter-spacing: .2px; }

/* Newsletter inputs inside hero */
.newsletter-input { max-width: 920px; margin: 0 auto; }

@media (min-width: 768px) {
  .newsletter-input .form-control-lg { padding-top: .9rem; padding-bottom: .9rem; }
}

/* Transparent inputs for hero */
.hero .form-control {
  background-color: rgba(255,255,255,.5);
  border: 1px solid rgba(255,255,255,1);
  color: #000;
}
.hero .form-control::placeholder { color: rgba(0,0,0,.7); }

/* Warm subscribe button */
.hero .btn-warning { background-color: rgba(255,193,7,.65); border: none; }
.hero .btn-warning:hover { background-color: rgba(255,193,7,1); }

/* Social icon circles under hero */
.socials {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: .6rem; max-width: 100%;
  margin: clamp(.75rem, 2.5vw, 1.25rem) auto 0;
}
.social-btn {
  width: clamp(52px, 16vw, 88px); height: clamp(52px, 16vw, 88px);
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: #000; border: 1px solid rgba(0,0,0,.1);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  transition: transform .15s, box-shadow .15s, background .15s;
  font-size: clamp(1.15rem, 4vw, 1.6rem); line-height: 1; text-decoration: none !important;
}
.social-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,.35); background: #f7f7f7; }

@media (max-width: 380px) {
  .socials { gap: .45rem; }
}

/* Primary CTA cards */
.cta-card {
  border: none; border-radius: var(--card-radius); box-shadow: var(--card-shadow);
}
.cta-card .icon-wrap { font-size: 1.75rem; }

/* -------------------------------------------------------------------
   DOORMATS (home tiles)
------------------------------------------------------------------- */
.doormat a { text-decoration: none; }

.doormat .card {
  height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center;
  border: none; border-radius: var(--card-radius); box-shadow: 0 8px 24px rgba(0,0,0,.08);
  transition: transform .2s ease, box-shadow .2s ease; padding: 1.25rem;
}
.doormat .card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.12); }
.doormat .icon { font-size: 2.25rem; line-height: 1; margin-bottom: .5rem; }
.doormat h3 { margin: .25rem 0; text-align: center; }
.doormat p { margin-top: auto; color: var(--muted); }

/* Brand accents for doormats */
.doormat .icon.brand-spotify { color: #1DB954; }  /* Spotify green */

/* -------------------------------------------------------------------
   BLOG — Hero / Cards / Media / Caption / Pills / Share / CTA / Sidebar
------------------------------------------------------------------- */
.blog-hero {
  background:
    linear-gradient(180deg, rgba(9,12,18,.88), rgba(9,12,18,.88)),
    url('/assets/images/subscribe_form-background-1920x800.jpg') center/cover no-repeat;
  color: #fff; padding: 48px 0; text-align: center;
}

/* Full post + list result cards */
.post-full, .result-card {
  border: none; border-radius: var(--card-radius); box-shadow: var(--card-shadow);
}
.post-full { overflow: hidden; }

/* Sidebar cards */
.sidebar .card {
  border: none; border-radius: var(--card-radius); box-shadow: var(--card-shadow);
}

/* Search / Pager */
.search-input { border-radius: .75rem; }
.pager .btn { border-radius: .6rem; min-width: 8rem; }

/* Letterboxed media with contain (keeps black bars) */
.post-media { position: relative; width: 100%; background: #000; overflow: hidden; border-radius: .5rem; }
.post-media::before { content: ""; display: block; width: 100%; }
.post-media.ar-16x9::before { padding-top: 56.25%; }  /* 16:9 */
.post-media.ar-9x16::before { padding-top: 177.78%; } /* 9:16 */
.post-media > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center center; display: block; background: #000;
}

/* Under-image caption block (text + optional location link) */
.caption-text {
  font-size: .9em; color: #333; margin-top: .4rem; text-align: center;
}
.caption-text .caption-location {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .15rem .5rem; border-radius: .4rem;
  text-decoration: none;
  background: #f0f3f7; border: 1px solid #e6ebf2; color: #1b2738;
}
.caption-text .caption-location:hover { background: #e9eef6; }

/* Meta row (date/author) */
.post-meta { font-size: .95rem; color: #555; }
.post-meta i { opacity: .85; }

/* Pills (categories + tags) */
.pill {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .6rem; border-radius: 999px;
  font-size: .85rem; line-height: 1; text-decoration: none !important;
  border: 1px solid transparent;
}
.pill-cat { background: var(--pill-cat-bg); color: var(--pill-cat-fg); border-color: var(--pill-cat-bd); }
.pill-cat:hover { background: #e3efff; color: #173868; }
.pill-tag { background: var(--pill-tag-bg); color: var(--pill-tag-fg); border-color: var(--pill-tag-bd); }
.pill-tag:hover { background: #efefef; color: #111; }

/* Share bar + mini subscribe CTA */
.share-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.share-row .btn { border-radius: .6rem; }

.subscribe-cta { background: #f8f9fb; }

/* -------------------------------------------------------------------
   ADMIN — Create Post (form polish)
------------------------------------------------------------------- */
.card.shadow-sm {
  border: none;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow) !important;
}

.form-label { font-weight: 600; }
.form-text { color: #6c757d; }

.form-control, .form-select { border-radius: .6rem; }
.btn { border-radius: .6rem; }

/* Tag grid (checkbox list) */
.tag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .4rem .75rem;
}
@media (max-width: 480px) {
  .tag-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}
.tag-check {
  display: flex; align-items: center; gap: .45rem;
  padding: .25rem .25rem;
  border-radius: .4rem;
}
.tag-check .form-check-input { margin-top: 0; }

/* File input hint */
#image + .form-text { margin-top: .3rem; }

/* Title/author/content spacing harmony */
#title, #author, #content { background: #fff; }

/* Inline status note under submit */
#createPostNote.text-success { color: #198754 !important; }
#createPostNote.text-danger  { color: #dc3545 !important; }

/* Modal small polish */
.modal-content {
  border-radius: .75rem;
  box-shadow: 0 16px 48px rgba(0,0,0,.2);
}

/* -------------------------------------------------------------------
   Small Utilities
------------------------------------------------------------------- */
.text-secondary { color: #6c757d !important; }

/* -------------------------------------------------------------------
    Playlist Polish
------------------------------------------------------------------- */
.list-group-numbered > .list-group-item { counter-increment: section; }
.list-group-numbered > .list-group-item::marker { font-weight: 600; }
.badge.text-bg-light.border { border-radius: 999px; padding: .35rem .6rem; }

/* ================================
   Playlist (compact, responsive)
   - Single column on mobile
   - Two columns on md+ screens
   ================================ */
.playlist-compact {
  margin: 0;
  padding-left: 1.25rem;      /* keep ordered numbers visible */
  list-style: decimal;
  column-gap: 2rem;           /* space between columns */
  counter-reset: item;
}

.playlist-compact li {
  break-inside: avoid;        /* keep a track on the same column */
  padding: .35rem 0;          /* tighter rows */
  line-height: 1.25;
  border-bottom: 1px dashed rgba(0,0,0,.06);
}

.playlist-compact li:last-child {
  border-bottom: none;
}

.playlist-compact .track-title   { font-weight: 600; }
.playlist-compact .track-artists { color: #6c757d; }
.playlist-compact .track-album   { color: #8a8f98; }

/* Two columns from 768px up (md) */
@media (min-width: 768px) {
  .playlist-compact {
    column-count: 2;          /* switch to two columns on desktop/tablet */
  }
}

/* Optional: slightly larger number gutter on very wide screens */
@media (min-width: 1200px) {
  .playlist-compact { padding-left: 1.5rem; }
}