/* Styles for project detail pages (e.g. loyaltyplay) */
:root{
  --bg: #0b1220;
  --card: #0f1720;
  --muted: #9aa4b2;
  --accent: #7cc1ff;
  --accent-2: #8e7dff;
  --text: #e6eef6;
}

.project-hero .section-header h1{
  font-size: 2.25rem;
  margin: 0 0 0.25rem 0;
  color: var(--text);
}
.project-hero .section-header .lead{ color: var(--muted); margin-bottom: 1rem; }

.project-carousel-wrapper{ display:flex; justify-content:center; margin: 1.25rem 0 2rem; }
.card-carousel.project-carousel{ max-width:1100px; width:100%; border-radius:12px; overflow:hidden; box-shadow: 0 10px 30px rgba(2,6,23,0.6); background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); }
.card-carousel.project-carousel .slide{ display:flex; align-items:center; justify-content:center; background: #061018; min-height:420px; }
.card-carousel.project-carousel img{ width:100%; height:100%; object-fit:cover; display:block; }
.card-carousel.project-carousel video{ width:100%; height:100%; object-fit:cover; display:block; }

/* hero caption overlay */
.card-carousel.project-carousel .hero-caption{ position:absolute; left:1rem; bottom:1rem; z-index:20; background:linear-gradient(90deg, rgba(11,18,32,0.75), rgba(11,18,32,0.45)); padding:0.75rem 1rem; border-radius:8px; color:var(--text); box-shadow: 0 6px 18px rgba(2,6,23,0.5); }
.card-carousel.project-carousel .hero-caption h4{ margin:0 0 .25rem 0; font-size:1.1rem; }
.card-carousel.project-carousel .hero-caption p{ margin:0; color:var(--muted); font-size:0.92rem; }

/* thumbnails under hero */
.project-thumbnails{ max-width:1100px; margin: 12px auto 0; display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap; }
.project-thumbnails .thumb{ width:120px; height:80px; border-radius:8px; overflow:hidden; background:#051017; box-shadow: 0 6px 16px rgba(2,6,23,0.45); cursor:pointer; border:2px solid transparent; transition: transform .15s ease, border-color .15s ease; }
.project-thumbnails .thumb.active{ transform:translateY(-4px); border-color: rgba(124,193,255,0.18); }
.project-thumbnails .thumb img, .project-thumbnails .thumb video{ width:100%; height:100%; object-fit:cover; display:block; }

/* make hero positioned relative so caption can sit above slides */
.card-carousel.project-carousel{ position:relative; }

.project-body{ max-width:1100px; margin: 1.5rem auto 3rem; padding: 1.25rem; background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01)); border-radius:10px; color:var(--text); box-shadow: 0 6px 18px rgba(2,6,23,0.5); }
.project-body h2{ margin-top:0; color:var(--accent-2); }
.project-body p{ color:var(--muted); line-height:1.6; }

/* Case study / description formatting */
.project-case{ margin-top:1rem; padding:0.75rem 0; }
.project-case h3{ font-size:1.05rem; margin:1rem 0 0.5rem; padding-left:0.6rem; color:var(--text); border-left:4px solid var(--accent); padding-left:1rem; }
.project-case p{ color:var(--muted); margin:0.25rem 0 0.75rem; }
.project-case ul, .project-case ol{ margin:0.6rem 0 1rem 1.1rem; padding-left:1rem; color:var(--muted); }
.project-case li{ margin:0.45rem 0; line-height:1.6; }
.project-case ul li::marker{ color:var(--accent); }
.project-case ol{ counter-reset: item; }
.project-case ol li{ list-style: decimal; }

/* make lists visually indented on small screens too */
@media (max-width:700px){
  .project-case h3{ padding-left:0.5rem; border-left-width:3px; }
  .project-case ul, .project-case ol{ margin-left:0.6rem; padding-left:0.8rem; }
}

.project-structure h3{ margin-bottom:0.5rem; color:var(--text); }
.project-structure ul, .project-structure ol{ color:var(--muted); margin-left:1rem; }
.project-structure li{ margin:0.4rem 0; }

.project-gallery{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:12px; margin: 0.75rem 0 1.25rem; }
.project-gallery .gallery-item{ background: #061018; border-radius:8px; overflow:hidden; box-shadow: 0 6px 18px rgba(2,6,23,0.45); min-height:140px; display:flex; align-items:center; justify-content:center; }
.project-gallery img, .project-gallery video{ width:100%; height:100%; object-fit:cover; display:block; }

.btn-secondary{ background:transparent; border:1px solid rgba(255,255,255,0.06); color:var(--text); padding:0.5rem 0.9rem; border-radius:6px; text-decoration:none; }
.btn-primary{ background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#071229; padding:0.55rem 1rem; border-radius:8px; box-shadow: 0 6px 18px rgba(124,193,255,0.12); border:0; }

@media (max-width:900px){
  .card-carousel.project-carousel .slide{ min-height:220px; }
  .project-body{ padding:1rem; }
}

@media (max-width:520px){
  .project-hero .section-header h1{ font-size:1.6rem; }
  .project-gallery{ gap:8px; }
}