/*{margin: 0;padding: 0;font-family: system-ui, 'Segoe UI', Roboto, sans-serif;} */
body {background: #f5f7fb;min-height: 100vh;padding: 0.6rem;}

/* ----- HEADER with search & categories ----- */
/*.gallery-header {box-sizing: border-box;max-width: 1150px;margin: 0 auto 1rem auto;margin-top: 80px;display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 1rem 1.5rem;background: white;padding: 1rem 1.8rem;border-radius: 60px;box-shadow: 0 8px 20px rgba(0,0,0,0.03);}*/
.containerhan {max-width: 1150px;margin: auto;margin-top: 80px;}
.page-title{font-family: 'Signika';font-size: 19px;font-weight: bold;white-space: nowrap;color: #222;}
.topbar {display: flex;align-items: center;gap: 15px;margin-bottom: 0.8rem;font-size: 0.8rem}
/*.topbar:focus-within {background: #e8ecf3;box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15);}*/
.topbar input {font-family:inherit; border: solid 0.5px grey;background: transparent;padding: 10px;font-size: 0.8rem;width: 100%;outline: none;color: #1e293b;}
/*.search-wrapper {flex: 2 1 260px;display: flex;align-items: center;background: #f0f2f6;border-radius: 40px;padding: 0.2rem 0.2rem 0.2rem 1.2rem;transition: 0.2s;}
.search-wrapper:focus-within {background: #e8ecf3;box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15);}
.search-wrapper i {color: #5e6f8d;font-size: 1rem;margin-right: 0.5rem;}
.search-wrapper input {border: none;background: transparent;padding: 0.7rem 0.2rem 0.7rem 0;font-size: 0.95rem;width: 100%;outline: none;color: #1e293b;}
.search-wrapper input::placeholder {color: #8a99b4;font-weight: 300;}*/

/*.category-group {display: flex;flex-wrap: wrap;align-items: center;gap: 0.5rem 0.6rem;}
  .category-btn {background: transparent;border: 1px solid #d0d8e6;padding: 0.45rem 1.1rem;border-radius: 40px;font-size: 0.8rem;font-weight: 500;color: #1e293b;cursor: pointer;transition: 0.15s;letter-spacing: 0.3px;
  background: white;}
  .category-btn:hover {background: #eef3fc;border-color: #8aa3d9;}
  .category-btn.active {background: #1e2f4e;border-color: #1e2f4e;color: white;}
  .category-btn[data-category="all"] {background: #1e2f4e;border-color: #1e2f4e;color: white;}*/

/* ----- CARD GRID (responsive) ----- */
.card-grid {max-width: 1150px;margin: auto;display: grid;grid-template-columns: repeat(6, 1fr);gap: 5px;}
/*.card-grid{width: 100%;display:grid;grid-template-columns:repeat(6, 1fr);gap:10px;}
@media(max-width:1150px){.card-grid{grid-template-columns:repeat(4, 1fr);}.lightbox-image-wrap img {max-width: 380px;max-height: 450px;}}
@media(max-width:600px){.card-grid{grid-template-columns:repeat(2, 1fr);}.lightbox-image-wrap img {max-width: 380px;max-height: 450px;}}*/

/* card item */
.card-item {background: white;height: 180px;border-radius: 1px;;overflow: hidden;display: flex;flex-direction: column;border: 1px solid #f0f2f7;}

/* clickable image wrapper */
.card-image-wrap {position: relative;cursor: pointer;background: #f0f3fa;overflow: hidden;display: flex;align-items: center;justify-content: center;}
.card-image-wrap img {Width: 100%;height: 140px;object-fit: cover;display: block;transition: 0.2s;}
.card-image-wrap:hover img {transform: scale(1.02);}
.card-content {padding: 0.5rem 0.5rem 0.6rem 0.5rem;display: flex;flex-direction: column;flex: 1;}
.card-title {font-weight: bold;text-align: center;font-family: 'Roboto';font-size: 0.9rem;color: #0b1a33;line-height: 1;text-align: center;}
/*.card-desc {font-size: 0.75rem;color: #475569;line-height: 1.4;margin-bottom: 0.7rem;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}*/
.card-links {display: flex;flex-wrap: wrap;gap: 0.3rem 0.6rem;margin-top: auto;Justify-content: center;padding-top: 0.3rem;}
.card-links a {font-family: 'Roboto Condensed';font-size: 0.8rem; color: #2563eb;text-decoration: none;font-weight: 500;background: transparent;transition: 0.1s;}

/* ----- LIGHTBOX (overlay full cover) ----- */
.lightbox-overlay {position: fixed;top: 0px;left: 0;width: 100vw;height: 100vh;background: rgba(0, 0, 0, 0.92);backdrop-filter: blur(10px);display: none;align-items: center;justify-content: center;z-index: 9999;}
.lightbox-overlay.open {display: flex;}
.lightbox-container {max-width: 1150px;width: 100%;background: transparent;display: flex;flex-direction: column;align-items: center;position: relative;}

/* header text full cover (overlay header) */
.lightbox-header {width: 100%;text-align: center;color: white;padding: 0.5rem 0 1.2rem 0;font-family: 'Oswald';font-size: 1.7rem;font-weight: 500;letter-spacing: 0.5px;text-shadow: 0 2px 12px rgba(0,0,0,0.5);}
/*.lightbox-header small {display: block;font-size: 1rem;font-weight: 300;opacity: 0.7;margin-top: 0.2rem;}*/
.lightbox-main {display: flex;align-items: center;justify-content: center;width: 100%;gap: 0.5rem;overflow-y: auto; /* Adds vertical scrollbar only when content overflows */
  overflow-x: hidden; /* Hides horizontal scrollbar */}
.lightbox-image-wrap {flex: 1;width: 100vw; margin: 0;background: #111;border-radius: 8px;overflow: hidden;display: flex;align-items: center;justify-content: center;}
.lightbox-image-wrap img {width: 100%;height: 100%;object-fit: contain;background: #0f0f0f;}
.lightbox-nav {background: rgba(255,255,255,0.08);border: none;color: white;font-size: 2.2rem;width: 56px;height: 56px;border-radius: 60px;cursor: pointer;transition: 0.2s;display: flex;align-items: center;justify-content: center;
backdrop-filter: blur(4px);border: 1px solid rgba(255,255,255,0.1);}
.lightbox-nav:hover {background: rgba(255,255,255,0.2);}
.lightbox-close {position: absolute;top: 0.8rem;right: 1.2rem;background: none;border: none;color: white;font-size: 1.2rem;cursor: pointer;opacity: 0.7;transition: 0.15s;}
.lightbox-close:hover {opacity: 1;transform: scale(1.1);}
.lightbox-desc {color: #ddd;margin-top: 1rem;font-family: 'Signika';font-size: 0.8rem;text-align: center;max-width: 600px;background: transparent;}

/* pagination inside lightbox 
.lightbox-pagination {margin-top: 1.2rem;display: flex;gap: 0.4rem;flex-wrap: wrap;justify-content: center;}
.lightbox-pagination span {display: inline-block;width: 10px;height: 10px;border-radius: 20px;background: rgba(255,255,255,0.2);transition: 0.2s;cursor: pointer;}
.lightbox-pagination span.active {background: white;width: 28px;} */

/* ----- responsive breakpoints ----- */
@media (max-width: 1150px) {.card-grid {grid-template-columns: repeat(4, 1fr);gap: 1rem;}}
@media (max-width: 600px) {.card-grid {grid-template-columns: repeat(2, 1fr);gap: 0.4rem;}
	.gallery-header {flex-direction: column;align-items: stretch;border-radius: 32px;padding: 1rem 1.2rem;}
	.search-wrapper {flex: 1;}
	.category-group {justify-content: center;}			   
	.lightbox-nav {width: 30px;height: 30px;font-size: 1rem;}
	.lightbox-header {font-size: 1.2rem;}}

/* hidden helper */
.hidden {display: none !important;}