/*
 * Styling for the big blog cards.
 */
.big-blog-card {
    height: 100%;
}

.big-blog-card-image-container {
    height: 200px;
    overflow: hidden;
}

.big-blog-card-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.big-blog-card-image-container .blog-categories-overlay {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    gap: 0.25rem;
    z-index: 1;
}

.big-blog-card-image-container .blog-categories-overlay .badge {
    background-color: rgba(var(--bs-secondary-rgb), 0.9);
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.big-blog-card .card-body {
    padding: 1.5rem;
}

.big-blog-card .card-body .card-title {
    min-height: 3rem;
    display: inline;
    background-image: linear-gradient(to right, currentColor 0%, currentColor 100%);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 2px;
    transition: background-size 0.5s;
    padding: 0.1em 0;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    line-height: 1.6;
    text-decoration-skip-ink: none;
}

.big-blog-card .card-body .card-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.big-blog-card:hover {
    background-color: #2c3a54;
    color:            var(--lorcana-spelen-light);
    transition: 0.2s;
}

.big-blog-card:hover .big-blog-card-image-container img {
    transform: scale(1.1);
}

.big-blog-card:hover .card-title {
    background-size: 100% 2px;
}

/**
 * Styling for the small blog cards.
 */
.small-blog-card .card-title {
   width: fit-content;
}

.small-blog-card:hover {
    background-color: #2c3a54;
}

.small-blog-card .img-col {
    border-top-left-radius: var(--bs-border-radius);
    border-bottom-left-radius: var(--bs-border-radius);
    overflow: hidden;
}

.small-blog-image {
    transition: transform 0.5s ease;
    object-fit: cover;
}

.small-blog-card:hover .small-blog-image {
    transform: scale(1.1);
}

/* For the hover to work, it must be placed within an element with display block. */
.small-blog-title {
    display: inline;
    background-image: linear-gradient(to right, currentColor 0%, currentColor 100%);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 2px;
    transition: background-size 0.5s;
    margin: 0;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    text-decoration-skip-ink: none;
}

.small-blog-card:hover .small-blog-title {
    background-size: 100% 2px;
}

.small-blog-card .very-small {
    font-size: 0.75rem;
}

/**
 * Styling for the blog itself.
 */
.blog-meta {
    font-size: 0.875rem;
}

.blog-featured-image-container img {
    max-height: 300px;
    object-fit: cover;
}

.blog-tags {
    justify-content: flex-end;
    align-items: center;
}

/* Bootstrap breakpoint is 768. */
@media (max-width: 767px) {
    .blog-tags {
        justify-content: flex-start;
    }
}

.blog-content h1, .blog-content h2, .blog-content h3, .blog-content h4, .blog-content h5, .blog-content h6 {
    color: var(--lorcana-spelen-light-blue);
}

.blog-content p {
    margin-bottom: 1.5rem;
}

.blog-content img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
}

/* Ensure images inside paragraphs scale within text width and get rounded corners */
.blog-content p img,
.blog-content li img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Responsive image gallery inside blog content */
.blog-content .image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 1.25rem 0;
}

.blog-content .image-gallery figure {
    margin: 0;
}

.blog-content .image-gallery img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 8px;
    cursor: zoom-in;
    object-fit: cover;
}

/* Uniform tile height for gallery items */
.blog-content .image-gallery .image-gallery-item {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* square tiles */
    overflow: hidden;
}

/* Lightbox overlay */
.ig-lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 1050; /* above bootstrap modals typical default */
}
.ig-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.85);
}
.ig-lightbox-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 92vw;
    max-width: 1100px;
    height: auto;
    max-height: 90vh;
    overflow: hidden; /* allow panning inside */
}
.ig-lightbox-image {
    max-width: 100%;
    max-height: 85vh;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    touch-action: none; /* enables custom pan/zoom gestures */
    cursor: zoom-in;
}
.ig-lightbox-image.ig-zoomed { cursor: grab; }
.ig-lightbox-image.ig-zoomed.dragging { cursor: grabbing; }
.ig-close, .ig-prev, .ig-next {
    position: absolute;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.ig-close { top: -50px; right: -50px; font-size: 24px; }
.ig-prev { top: 50%; left: -50px; transform: translateY(-50%); font-size: 28px; }
.ig-next { top: 50%; right: -50px; transform: translateY(-50%); font-size: 28px; }

@media (max-width: 600px) {
    .ig-lightbox-content { width: 96vw; }
    /* Use smaller, contained images on phones */
    .ig-lightbox-image {
        max-height: 60vh;
        object-fit: contain;
    }
    .ig-close { top: -46px; right: 0; }
    .ig-prev { left: 0; }
    .ig-next { right: 0; }
}