/* style.css - estilo inspirado en stephanieburgee.com (minimal, tipografía, galería masonry) */
:root{
	--bg: #fff;
	--muted: #6b6b6b;
	--accent: #d9cbb5; /* cálido y suave */
	--title: #111;
}
body{
	background: var(--bg);
	color: var(--title);
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3{ font-family: 'Playfair Display', serif; color:var(--title); }
.site-header{ border-bottom:1px solid rgba(0,0,0,0.04); }
.site-logo{ font-family:'Playfair Display', serif; font-size:26px; text-decoration:none; color:var(--title); font-weight:700; }
.site-nav .nav-link{ color:var(--muted); margin:0 8px; text-decoration:none; font-size:0.95rem; }
.site-nav .nav-link:hover{ color:var(--title); }
.container{
	/* Fluid layout but limited to a comfortable maximum width so content doesn't stretch too far on very large monitors */
	box-sizing: border-box;
	width: 100%;
	max-width: 1600px; /* limit the maximum width of the site */
	padding-left: 1rem;
	padding-right: 1rem;
	margin-left: auto;
	margin-right: auto;
}
.lead{ color:var(--muted); }

/* Navbar tweaks */
.navbar-brand{ font-family:'Playfair Display', serif; font-size:26px; font-weight:700; color:var(--title) !important; }
.navbar .nav-link{ color:var(--muted) !important; padding:0.5rem 0.75rem; }
.navbar .nav-link:hover{ color:var(--title) !important; }
.navbar-toggler{ border: none; }

/* hero */
.hero{ padding:6rem 0; }

/* Masonry Gallery - Sistema de columnas dinámicas con JavaScript */
.masonry-container {
    display: flex;
    gap: 0.75rem;
    width: 100%;
}

.masonry-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.masonry-item{ 
    position: relative;
    break-inside: avoid; 
    margin-bottom: 0; 
    overflow: hidden; 
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.masonry-item img{ 
    width: 100%; 
    height: auto; 
    display: block; 
    transition: transform .25s ease; 
}

.masonry-item:hover img{ 
    transform: scale(1.02); 
}

/* Order badge (top right) */
.orden-badge {
    position: absolute;
    right: 8px;
    top: 8px;
    background: rgba(255,255,255,0.9);
    color: #333;
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85em;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Price badge (bottom left) */
.price-badge {
    position: absolute;
    left: 8px;
    bottom: 8px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9em;
    z-index: 10;
}

/* Loading spinner */
.masonry-container .spinner-border {
    width: 3rem;
    height: 3rem;
}

/* Responsive adjustments - el JS manejará el número de columnas */
@media (max-width: 992px){ 
    .masonry-container { gap: 0.65rem; }
    .masonry-column { gap: 0.65rem; }
}

@media (max-width: 768px){ 
    .masonry-container { gap: 0.5rem; }
    .masonry-column { gap: 0.5rem; }
    .site-header .container{ padding:0 1rem; } 
}

@media (max-width: 480px){ 
    .masonry-container { gap: 0.5rem; }
    .masonry-column { gap: 0.5rem; }
}

/* On very wide screens use an extra column to take advantage of the space */
/* keep 4 columns even on very wide screens so images appear larger */

/* Gallery selector - modern pills with horizontal scroll */
.gallery-selector{
	display:flex;
	gap:0.5rem;
	overflow-x:auto;
	-webkit-overflow-scrolling: touch;
	padding:0.25rem 0.5rem;
}
.gallery-pill{
	white-space:nowrap;
	display:inline-block;
	padding:0.45rem 0.9rem;
	border-radius:999px;
	background:transparent;
	color:var(--muted);
	text-decoration:none;
	border:1px solid transparent;
	font-size:0.95rem;
}
.gallery-pill.active{
	background:var(--accent);
	color:#111;
	border-color:rgba(0,0,0,0.06);
}
.gallery-selector::-webkit-scrollbar{ height:6px; }
.gallery-selector::-webkit-scrollbar-thumb{ background:rgba(0,0,0,0.08); border-radius:10px; }

/* Mobile select styling (visible on xs) */
.gallery-select-mobile { min-width:160px; }

@media (max-width: 576px){
	/* hide the horizontal pills on very small screens (we show select) */
	.gallery-selector{ display:none; }
	.gallery-select-mobile{ display:block; }
}

/* Mobile navbar: make the collapsed menu full-width, stacked and touch-friendly */
@media (max-width: 992px) {
	.navbar-brand { font-size: 20px !important; }
	.navbar-collapse {
		position: fixed;
		top: 56px; /* height of navbar */
		left: 0;
		right: 0;
		height: calc(100vh - 56px);
		background: var(--bg);
		padding: 1rem 1.25rem;
		z-index: 1040;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow-y: auto;
	}
	.navbar-collapse .nav-link {
		font-size: 1.05rem;
		padding: 0.9rem 1.2rem;
		width: 100%;
		text-align: center;
		border-radius: 8px;
		margin: 0.25rem 0;
		background: transparent;
	}
	.navbar-collapse .nav-link:hover {
		background: rgba(0,0,0,0.02);
	}
	/* Make the toggler visible and a bit bigger */
	.navbar-toggler { width: 44px; height: 44px; }
}

/* Lightbox modal */
.lb-overlay{ 
    position: fixed !important; 
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0,0,0,0.9) !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    z-index: 9999 !important; 
    padding: 1rem;
    cursor: pointer;
}

.lb-overlay img{ 
    max-width: 95% !important; 
    max-height: 95% !important; 
    object-fit: contain !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    cursor: default;
}

.lb-close{ 
    position: absolute !important; 
    top: 20px !important; 
    right: 30px !important; 
    color: #fff !important; 
    font-size: 40px !important; 
    font-weight: bold !important;
    cursor: pointer !important;
    z-index: 10000 !important;
    user-select: none;
}

.lb-close:hover {
    color: #ccc !important;
}

/* Prev/Next buttons */
.lb-prev, .lb-next{
	position:absolute;
	top:50%; transform:translateY(-50%);
	background:rgba(0,0,0,0.35);
	color:#fff; border-radius:50%; width:48px; height:48px; display:flex; align-items:center; justify-content:center;
	font-size:22px; cursor:pointer; user-select:none;
}
.lb-prev{ left:18px; }
.lb-next{ right:18px; }
.lb-prev:hover, .lb-next:hover{ background:rgba(0,0,0,0.55); }
.lb-hide{ display:none !important; }

footer{ border-top: 1px solid rgba(0,0,0,0.06); }