/* =========================
GRID CONTENT (reusable section block)
========================= */
.content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
max-width: 1200px;
padding: 40px;
}

/* =========================
CARDS
========================= */
.card {
background: #5d0508db;
padding: 18px;
border-radius: 10px;
box-shadow: 0 8px 20px rgba(0,0,0,0.3);
border-left: 4px solid white;
}

.card h4 {
color: #ffae00;
margin-bottom: 10px;
}

.card p {
margin: 10px 0 5px;
}

.card ul {
list-style: none;
padding: 0;
}

.card li {
margin-bottom: 6px;
color: #ddd;
}

/* =========================
BADGES
========================= */
.badge {
color: white;
padding: 3px 8px;
border-radius: 6px;
font-size: 12px;
margin-right: 6px;
font-weight: bold;
}

.badge.lr { background: #28a745; }
.badge.mr { background: #2d6cdf; }
.badge.hr { background: #6f42c1; }
.badge.other { background: #6c757d; }

.badge.alt {
background: #444;
font-size: 10px;
}

/* =========================
GRID CONTROLS
========================= */
.grid-controls {
display: flex;
gap: 10px;
justify-content: center;
margin: 20px;
}

.grid-controls button,
.grid-controls input {
padding: 8px 12px;
border-radius: 8px;
border: none;
cursor: pointer;
}

/* =========================
MODAL
========================= */
.modal {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.9);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: 0.3s;
}

.modal.active {
opacity: 1;
pointer-events: all;
}

.modal img {
max-width: 90%;
max-height: 90%;
border-radius: 10px;
}

/* =========================
SIDE PANEL
========================= */
.side-panel {
position: fixed;
top: 0;
bottom: 0;
width: 260px;
padding: 20px;
background: #710105;
color: white;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: none;
z-index: 1000;
}

.side-panel::-webkit-scrollbar {
display: none;
}

.side-panel::after {
content: "";
position: absolute;
top: 0;
right: 8px;
width: 5px;
height: 110%;
background: #ffffff;
pointer-events: none;
}

.side-panel.right::after {
left: 6px;
right: auto;
}

/* LEFT */
.side-panel.left {
left: -260px;
}

.side-panel.left.active {
left: 0;
}

/* RIGHT */
.side-panel.right {
right: -260px;
}

.side-panel.right.active {
right: 0;
}

/* TITLES */
.side-panel h3 {
margin-top: 10px;
margin-bottom: 15px;
font-size: 18px;
color: #ffffff;
border-bottom: 1px solid #ffffff;
padding-bottom: 5px;
}

/* LINKS */
.side-panel a {
display: block;
padding: 8px 0;
color: #ddd;
text-decoration: none;
transition: 0.2s;
}

.side-panel a:hover {
color: #270202;
padding-left: 5px;
}

/* LIST */
.side-panel ul {
padding-left: 18px;
}

.side-panel li {
margin: 6px 0;
color: #e5ff74;
}

/* =========================
TOGGLE BUTTONS
========================= */
.side-toggle {
position: fixed;
top: 50%;
transform: translateY(-50%);
width: 28px;
height: 80px;
background: #CB8133;
color: white;
font-size: 22px;

display: flex;
align-items: center;
justify-content: center;

cursor: pointer;
border-radius: 4px;
z-index: 1100;
transition: 0.2s;

}

.side-toggle:hover {
background: #550505;
}

.side-toggle.left {
left: 0;
}

.side-toggle.right {
right: 0;
}

.side-panel.left.active + .side-toggle.left {
left: 260px;
}

.side-panel.right.active + .side-toggle.right {
right: 260px;
}

/* =========================
CAROUSEL
========================= */
.carousel {
position: relative;
width: 80%;
margin: 40px auto;
height: 300px;
border-radius: 15px;
overflow: hidden;
}

.carousel .slide {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.8s ease-in-out;
}

.carousel .slide.active {
opacity: 1;
z-index: 1;
}

.carousel .slide img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(60%);
}

.carousel .overlay {
position: absolute;
bottom: 30px;
left: 30px;
color: white;
}

.carousel .slide::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(0,0,0,0.7), transparent);
}

.carousel .prev,
.carousel .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,0.5);
border: none;
color: white;
padding: 12px;
border-radius: 50%;
cursor: pointer;
}

.carousel .prev { left: 15px; }
.carousel .next { right: 15px; }

.carousel .dots {
position: absolute;
bottom: 10px;
width: 100%;
text-align: center;
}

.carousel .dot {
height: 10px;
width: 10px;
margin: 5px;
display: inline-block;
background: gray;
border-radius: 50%;
}

.carousel .dot.active {
background: limegreen;
}

/* =========================
RANGE INPUT (GRID SIZE)
========================= */
#gridSize {
-webkit-appearance: none;
appearance: none;
width: 200px;
height: 8px;
border-radius: 5px;
background: #ccc;
outline: none;
}

#gridSize::-webkit-slider-runnable-track {
height: 8px;
border-radius: 5px;
background: transparent;
}

#gridSize::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
height: 18px;
width: 18px;
border-radius: 50%;
background: #8B0000;
cursor: pointer;
margin-top: -5px;
}

#gridSize::-moz-range-thumb {
height: 18px;
width: 18px;
border-radius: 50%;
background: #8B0000;
cursor: pointer;
}

#gridSize::-moz-range-track {
background: transparent;
}