/* Minimal styles for project-detail layout
   Adds spacing, basic gallery styles and counters styling matching the provided markup.
*/

.text-4xl { font-size: 2.5rem; line-height: 1.05; font-weight:700; }
.leading-2xl { line-height: 1.4; }

.socialsIcons a { margin-right: .5rem; color:inherit; }

.creative-meta-block { background: #fff; }

.counter { position: relative; padding: 2rem 1rem; border-radius: .5rem; overflow:hidden; }
.counter__back { position: absolute; inset: 0; opacity: 0.06; font-weight:700; font-size:3rem; display:flex; align-items:center; justify-content:center; color:#fff; }
.counter__content { position: relative; z-index:2; }

.counter__number { font-size: 1.6rem; font-weight:700; }

.gallery__item { display:block; position:relative; overflow:hidden; border-radius:.75rem; transition: transform .25s ease, box-shadow .25s ease; }
.gallery__item:hover { transform: translateY(-6px); box-shadow: 0 10px 30px rgba(0,0,0,0.12); }
.gallery__item .ratio { display:block; }
.gallery__button { position:absolute; right:1rem; bottom:1rem; background:rgba(0,0,0,0.55); color:#fff; width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:50%; }

.project-thumbs { display:flex; gap:12px; margin-top:16px; }
.project-thumbs .thumb { width:72px; height:56px; overflow:hidden; border-radius:8px; cursor:pointer; border: 2px solid transparent; }
.project-thumbs .thumb.active { border-color:#e6eaff; box-shadow:0 4px 12px rgba(0,0,0,0.08); }
.project-thumbs img { width:100%; height:100%; object-fit:cover; display:block; }

/* accessible hidden text for screen readers */
.sr-only { position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px; }

/* small responsive tweaks */
@media (max-width: 768px) {
  .text-4xl { font-size: 1.6rem; }
  .project-thumbs { gap:8px; }
  .project-thumbs .thumb { width:56px; height:44px; }
}

/* DEBUG: force visible active tab panes to help diagnose tab visibility issues. Remove when issue is resolved. */
.tab-pane.show.active {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  height: auto !important;
}