/* Path: /public/assets/css/time-birthdays.css */

/* Uses core.css variables */
.bday-wrap{
  width:min(var(--container), calc(100% - 32px));
  margin-inline:auto;
  padding:18px 0 44px;
}

.section{margin-top:16px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow2); padding:18px}

/* ---------- HERO ---------- */
.bday-hero{
  padding:18px;
}
.bday-hero-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.bday-hero-title{
  display:flex;
  gap:12px;
  align-items:flex-start;
  min-width:0;
}
.bday-icon{
  width:44px;height:44px;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(109,40,217,.18);
  background:rgba(109,40,217,.08);
  font-size:22px;
  flex:0 0 auto;
}
.bday-head-text{min-width:0}
.bday-head-text h1{
  margin:0;
  font-size:22px;
  font-weight:900;
  letter-spacing:-.2px;
}
.bday-sub{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  background:#fff;
  border:1px solid var(--line);
  color:rgba(15,23,42,.78);
}
.bday-lead{
  margin:10px 0 0;
  color:rgba(15,23,42,.72);
  font-size:13px;
  font-weight:700;
  line-height:1.9;
  max-width:680px;
}

.bday-hero-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  text-decoration:none;
  font-weight:900;
  font-size:14px;
  transition:transform .15s ease, filter .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{
  background:var(--primary);
  border-color:rgba(0,0,0,0);
  color:#fff;
}
.btn.ghost{
  background:#fff;
  border-color:var(--line);
  color:rgba(15,23,42,.86);
}

.bday-hero-media{
  margin-top:12px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--line);
}
.bday-hero-media img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}

/* ---------- NOTE ---------- */
.bday-note h2{
  margin:0 0 10px;
  font-size:18px;
  font-weight:900;
}
.bday-note .content{
  color:rgba(15,23,42,.85);
  font-size:14px;
  line-height:2;
}

/* ---------- INTERNAL TOOLS ---------- */
.bday-tools .tools-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.bday-tools h2{margin:0;font-size:18px;font-weight:900}
.bday-tools .muted{color:var(--muted);font-size:13px;font-weight:700}

.tools-grid{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px,1fr));
  gap:12px;
}
.tool{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:18px;
  padding:14px;
  box-shadow:0 10px 26px rgba(2,6,23,.04);
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
  display:block;
}
.tool:hover{
  transform:translateY(-2px);
  border-color:rgba(109,40,217,.22);
  background:rgba(109,40,217,.02);
}
.tool .t{font-weight:900;font-size:15px}
.tool .d{margin-top:6px;color:rgba(15,23,42,.68);font-size:12.5px;font-weight:700;line-height:1.7}

/* ---------- LIST HEAD ---------- */
.bday-list-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.bday-list-head h2{margin:0;font-size:18px;font-weight:900}
.bday-list-head .muted{color:var(--muted);font-size:13px;font-weight:800}

/* ---------- EMPTY ---------- */
.empty{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px;
  border-radius:18px;
  border:1px dashed rgba(109,40,217,.28);
  background:rgba(109,40,217,.05);
}
.empty .ico{font-size:22px}
.empty .ttl{font-weight:900}
.empty .sub{margin-top:6px;color:rgba(15,23,42,.72);font-size:13px;font-weight:700}

/* ---------- GRID ---------- */
.bday-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px,1fr));
  gap:12px;
  margin-top:12px;
}
.bcard{
  text-decoration:none;
  color:inherit;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 10px 26px rgba(2,6,23,.05);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  display:flex;
  flex-direction:column;
}
.bcard:hover{
  transform:translateY(-3px);
  border-color:rgba(109,40,217,.22);
  box-shadow:0 16px 34px rgba(2,6,23,.10);
}
.bimg img{
  width:100%;
  height:150px;
  object-fit:cover;
  display:block;
  background:#fff;
}
.bbody{
  padding:12px 12px 14px;
}
.bname{
  display:block;
  font-weight:900;
  font-size:14px;
  line-height:1.6;
}
.bjob{
  display:block;
  margin-top:6px;
  color:rgba(15,23,42,.65);
  font-size:12px;
  font-weight:800;
}
.bmeta{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  background:rgba(15,23,42,.04);
  border:1px solid rgba(15,23,42,.10);
  color:rgba(15,23,42,.78);
}
.tag.ghost{
  background:#fff;
  border-color:rgba(109,40,217,.18);
  color:rgba(109,40,217,.90);
}

/* ---------- CTA ---------- */
.bday-cta{
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}

/* ---------- ARTICLE ---------- */
.bday-article h2{
  margin:0 0 10px;
  font-size:18px;
  font-weight:900;
}
.bday-article .content p{
  margin:0 0 10px;
  color:rgba(15,23,42,.88);
  font-size:14px;
  line-height:2.05;
}

/* ---------- MOBILE ---------- */
@media (max-width: 780px){
  .bday-head-text h1{font-size:20px}
  .bday-hero-media img{height:190px}
  .bday-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width: 520px){
  .bday-grid{grid-template-columns:1fr}
  .bday-hero-actions{width:100%}
  .bday-hero-actions .btn{flex:1}
}


/* Prev/Next buttons inside landing hero */
.bday-navbtn{
  width:44px;height:44px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  font-weight:900;
  color:rgba(15,23,42,.85);
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
  flex:0 0 auto;
}
.bday-navbtn:hover{
  transform:translateY(-1px);
  background:rgba(109,40,217,.04);
  border-color:rgba(109,40,217,.22);
  color:var(--primary);
}
@media (max-width: 520px){
  .bday-navbtn{width:40px;height:40px;border-radius:12px}
}