/* ====== Doua Guri de Cafea — Theme (Bootstrap 5 companion) ====== */

/* Paleta (light) */
:root{
  --coffee-dark:#3A2217;
  --coffee-medium:#6A4B3A;
  --latte-cream:#F5EFE7;
  --accent:#C6A682;

  --bg-main: var(--latte-cream);
  --text-main:#1a1a1a;

  --card-bg:#ffffff;
  --card-border:rgba(0,0,0,.06);
  --card-shadow:0 6px 18px rgba(0,0,0,.06);

  --hero-bg:#000000;
  --muted:#6b6b6b;

  --footer-bg:#1b1b1b;
  --footer-text:#ffffff;

  --link-hover: var(--coffee-medium);

  /* Mapping pentru componente generice */
  --bg: var(--bg-main);
  --text: var(--text-main);
  --card: var(--card-bg);
  --border: var(--card-border);
  --primary: var(--coffee-medium);
  --thumb-bg: #eef1f5;
}

/* Paleta (dark) — activă când body are .theme-dark */
body.theme-dark{
  --bg-main:#121212;
  --text-main:#f0f0f0;
  --card-bg:#1a1a1a;
  --card-border:rgba(255,255,255,.08);
  --card-shadow:0 6px 18px rgba(0,0,0,.5);
  --hero-bg:#000000;
  --muted:#b9b9b9;
  --footer-bg:#0f0f0f;
  --footer-text:#dcdcdc;
  --link-hover:#e5c8a1;

  --bg: var(--bg-main);
  --text: var(--text-main);
  --card: var(--card-bg);
  --border: var(--card-border);
  --primary: #e5c8a1;
  --thumb-bg: #0f1320;
}

/* Auto-dark dacă userul nu a setat manual tema */
@media (prefers-color-scheme: dark){
  body:not(.theme-light):not(.theme-dark){
    --bg-main:#121212;
    --text-main:#f0f0f0;
    --card-bg:#1a1a1a;
    --card-border:rgba(255,255,255,.08);
    --card-shadow:0 6px 18px rgba(0,0,0,.5);
    --muted:#b9b9b9;
    --footer-bg:#0f0f0f;
    --footer-text:#dcdcdc;
    --link-hover:#e5c8a1;
    --bg: var(--bg-main);
    --text: var(--text-main);
    --card: var(--card-bg);
    --border: var(--card-border);
    --primary: #e5c8a1;
    --thumb-bg: #0f1320;
  }
}

/* ====== Bază ====== */
body{ background:var(--bg-main); color:var(--text-main); }
.bg-latte{ background:var(--bg-main)!important; }
.text-dark{ color:var(--text-main)!important; }

/* Navbar */
.bg-coffee{ background:var(--coffee-dark); }
.navbar-dark .navbar-nav .nav-link{
  color:#eae2da;
  transition:opacity .2s ease, transform .2s ease;
}
.navbar-dark .navbar-nav .nav-link:hover{ opacity:.85; transform:translateY(-1px); }

/* Footer */
footer.bg-dark{ background:var(--footer-bg)!important; color:var(--footer-text)!important; }
footer a.link-light{ color:var(--footer-text)!important; opacity:.9; }
footer a.link-light:hover{ opacity:1; text-decoration:underline; }

/* Buttons */
.btn-coffee{
  background:var(--coffee-medium);
  color:#fff;
  border:none;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn-coffee:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.25); opacity:.95; }

/* Theme toggle button */
.btn-theme{
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  background:transparent;
  border-radius:12px;
  padding:.35rem .7rem;
  line-height:1;
  display:flex; align-items:center; gap:.35rem;
}
.btn-theme:hover{ background:rgba(255,255,255,.1); }
.btn-theme .icon{ display:inline-block; width:1.05rem; text-align:center; }

/* ====== HERO SECTION ====== */
.home-hero{
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  box-shadow: var(--card-shadow);
  padding: 1.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: 2rem;
}

/* Label badge */
.hero-label{
        margin: 0 .25rem .5rem;
    display: block;
    text-align: center;
    position: absolute;
    z-index: 999;
    background: #FFF;
   border-radius: 29px;
    bottom: 15px;
    left: 50%;
    margin-left: -120px;
    padding: 10px;
}
.badge-hero{
 
  color: var(--coffee-medium);
  font-size: .85rem;
  font-weight: 600;
  padding: .35rem .7rem;
  border-radius: 999px;
  letter-spacing: .2px;
  text-transform: uppercase;
  font-weight: bold;
}


/* Hero layout */
@media (min-width: 768px){
  .home-hero{
    grid-template-columns: 1.1fr 1fr;
    gap: 1.5rem;
  }
}
.hero-img{
position: relative;    
    
}

.hero-img .hero-thumb{
  display: block;
  overflow: hidden;
  border-radius: 16px;
  background: var(--thumb-bg);
  aspect-ratio: 16/9;
}
.hero-img img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease;
}
.hero-img .hero-thumb:hover img{ transform: scale(1.03); }

.hero-body{ display:flex; flex-direction:column; justify-content:center; }
.hero-meta{ color: var(--muted); font-size: .9rem; display:flex; flex-wrap: wrap; gap:.4rem; }
.hero-cat{ color: var(--text-main); font-weight: 600; text-decoration: none; }
.hero-cat:hover{ color: var(--link-hover); }
.hero-title{ font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem); margin: 0; line-height: 1.2; }
.hero-title a{ color: var(--text-main); text-decoration: none; }
.hero-title a:hover{ color: var(--link-hover); }
.hero-excerpt{ color: var(--text-main); }

/* Buton brand pentru hero */
.btn-hero {
  display: inline-block;
  font-weight: 600;
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: var(--coffee-medium);
  color: #fff;
  text-decoration: none;
  transition: all 0.25s ease-in-out;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.btn-hero:hover {
  background: color-mix(in oklab, var(--coffee-dark) 80%, var(--coffee-medium) 20%);
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
  transform: translateY(-2px);
}
.btn-hero:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
body.theme-dark .btn-hero {
  background: var(--accent);
  color: var(--coffee-dark);
}
body.theme-dark .btn-hero:hover {
  background: var(--coffee-medium);
  color: #fff;
}

/* ====== LISTARE ARTICOLE (masonry pe rânduri) ====== */
.masonry{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
  grid-template-rows: masonry;
  gap: 1.25rem;
  align-items: start;
}

/* fallback pentru browsere fără suport masonry rows */
@supports not (grid-template-rows: masonry){
  .masonry{ column-gap:1.25rem; }
  @media (min-width:576px){ .masonry{ column-count:2; } }
  @media (min-width:992px){ .masonry{ column-count:3; } }
  @media (min-width:1400px){ .masonry{ column-count:4; } }
  .masonry .article-card{ display:inline-block; width:100%; break-inside:avoid; }
}

/* Carduri */
.article-card{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:16px;
  box-shadow:var(--card-shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.article-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  border-color: color-mix(in oklab, var(--card-border) 70%, var(--primary) 30%);
}

/* Featured */
.article-card.featured .article-thumb{ aspect-ratio:21/9; }
.article-card.featured .article-title{ font-size:1.3rem; font-weight:700; }

/* Thumb */
.article-thumb{ display:block; aspect-ratio:16/9; background:var(--thumb-bg); overflow:hidden; }
.article-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.article-card:hover .article-thumb img{ transform:scale(1.04); }

/* Body */
.article-body{ padding:1rem 1rem 1.1rem; }
.article-meta{ font-size:.85rem; color:var(--muted); }
.article-title{ font-weight:700; color:var(--text-main); text-decoration:none; }
.article-title:hover{ color:var(--link-hover); }

/* Pagination */
.pagination .page-link{
  border-radius:10px;
  border-color:var(--card-border);
  background:var(--card-bg);
  color:var(--text-main);
}
.pagination .page-link:hover{ background:rgba(0,0,0,.04); }
.page-item { margin: 0 4px; }

/* ====== PAGINA DE ARTICOL ====== */
.article-hero{
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 28px rgba(0,0,0,.25);
  background:var(--hero-bg);
}
.article-hero img, .article-hero video{ width:100%; height:auto; display:block; }
.audio-wrap{
  background:var(--card-bg);
  border-radius:16px;
  border:1px solid var(--card-border);
  padding:1rem;
  margin-top:1rem;
}

/* Text articol */
.prose{
  background:var(--card-bg);
  border-radius:18px;
  padding:1.25rem 1.35rem;
  border:1px solid var(--card-border);
  box-shadow:var(--card-shadow);
}

/* ====== Lazy blur-up ====== */
img.blur{
  filter: blur(12px);
  transform: scale(1.02);
  opacity:.9;
  transition: filter .4s ease, transform .4s ease, opacity .3s ease;
}
img.blur.loaded{
  filter: blur(0);
  transform: none;
  opacity: 1;
}

/* ====== Cookie banner ====== */
.cookie-banner{
  position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:9999;
  background:#1f1a17; color:#fff; border-radius:14px; padding:1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}
.cookie-banner .btn{ margin-left:.5rem; }


/* ===== Media flag (video/audio) pe thumb ===== */
.media-flag{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: inline-grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  backdrop-filter: blur(2px);
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  pointer-events: none;
  z-index:999;
}
.flag-video{ background: rgba(255,255,255,.25); }
.flag-audio{ background: rgba(58,34,23,.7); } /* coffee-ish pentru audio */
.article-thumb{ position: relative; } /* necesar ca overlay-ul să se poziționeze corect */

/* ===== Egalizare carduri mici ===== */
.article-card:not(.featured) .article-thumb{ aspect-ratio: 16/9; }
.article-card:not(.featured) .article-body{ 
  min-height: 150px; /* ajusteaza 140-170 dupa preferinta */
  display:flex; flex-direction:column; gap:.4rem;
}
.clamp-2{
  display:-webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
}


#read-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  width: 0;
  background: linear-gradient(90deg, #ffcb00, #ff9400);
  z-index: 9999;
  transition: width 0.1s linear;
}
.recommended-row {
    margin-top: 50px;
}

.recommended-row h3 {
    margin-bottom: 15px;
    font-size: 22px;
}

.recommended-scroll {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    padding-bottom: 10px;
    scroll-behavior: smooth;
}

/* scrollbar invizibil */
.recommended-scroll::-webkit-scrollbar { display: none; }
.recommended-scroll { scrollbar-width: none; }

/* card */
.rec-item {
    flex: 0 0 240px;
    width: 240px;
    text-decoration: none;
    color: inherit;
}

.rec-thumb {
    width: 100%;
    height: 150px;
    border-radius: 10px;
    overflow: hidden;
    background: #222;
}

.rec-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .3s ease;
}

.rec-item:hover .rec-thumb img {
    transform: scale(1.05);
}

.rec-title {
    margin-top: 10px;
    font-weight: 600;
    line-height: 1.3;
    font-size: 16px;
}

.no-img {
    width: 100%;
    height: 100%;
    background: #444;
    border-radius: 10px;
}