/* Public "Images only · 3 columns" featured image gallery */

/* Elements toggled via the `hidden` attribute (fig-card-empty, fig-lb-img,
   fig-lb-placeholder, ...) also set their own `display`, which as an author
   rule beats the UA [hidden] rule at equal specificity — so [hidden] alone
   won't hide them. Force it. */
.fig-gallery [hidden], .fig-lightbox [hidden] {
    display: none !important;
}

.fig-gallery {
    max-width: 1180px;
    margin: 0 auto;
    padding: 30px 24px 8px;
    font-family: "Open Sans", Roboto, Helvetica, Arial, sans-serif;
}

/* 3 explicit columns instead of CSS `columns:3` — see the comment in
   featured-image-gallery.blade.php for why: a real multi-column layout
   redistributes every card on every DOM change, which reshuffled cards
   already on screen each time "Load more" appended new ones. */
.fig-grid {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.fig-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (max-width: 900px) {
    .fig-grid { flex-wrap: wrap; }
    .fig-col { flex: 1 1 45%; }
}

@media (max-width: 560px) {
    .fig-grid { flex-direction: column; }
    .fig-col { width: 100%; }
}

.fig-card {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid #D6D6D6;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(20, 20, 20, .06);
    cursor: pointer;
    break-inside: avoid;
    transition: transform .18s ease, box-shadow .18s ease;
}

.fig-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(20, 20, 20, .14);
}

.fig-card img {
    display: block;
    width: 100%;
    height: auto;
    /* Floor only — while the lazy-loaded image is still fetching (or if it
       404s and the JS below hides it) this is what reserves visible space
       for the placeholder background. A real photo's natural height is
       comfortably taller than this, so once it paints the box grows to fit
       it and the masonry column keeps each card's real aspect ratio
       instead of being cropped to a fixed one. */
    min-height: 220px;
    background: url(../images/placeholder-image.png) center / cover no-repeat;
}

.fig-card-empty {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    background: url(../images/placeholder-image.png) center / cover no-repeat;
}

.fig-card-caption {
    padding: 14px 16px 16px;
    text-align: left;
}

.fig-card-quote {
    margin: 0 0 12px;
    font-family: Georgia, "Palatino Linotype", "Times New Roman", serif;
    font-style: italic;
    font-size: 13.5px;
    line-height: 1.55;
    color: #444B57;
    /* 3-line clamp — the full comment is still available in the lightbox
       this card opens, so this is a teaser, not the only place it's shown. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fig-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.fig-card-tag {
    display: inline-block;
    max-width: 100%;
    padding: 4px 12px;
    border-radius: 999px;
    background: #EEF1F8;
    color: #1C2B68;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fig-card-more {
    flex: 0 0 auto;
    color: #1C2B68;
    font-size: 13px;
    font-weight: 600;
}

/* No tag on this entry — keep "Les mer" pinned right instead of left. */
.fig-card-footer .fig-card-more:only-child {
    margin-left: auto;
}

.fig-loadmore-row { text-align: center; padding: 20px 0 8px; }

.fig-loadmore-btn {
    border: 1px solid #1C2B68;
    background: #fff;
    color: #1C2B68;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 8px;
    cursor: pointer;
}

.fig-loadmore-btn:hover { background: #f5f6fa; }
.fig-loadmore-btn[disabled] { opacity: .6; cursor: default; }

/* Lightbox */
.fig-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(20, 22, 28, .72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    overflow: auto;
    font-family: "Open Sans", Roboto, Helvetica, Arial, sans-serif;
}

.fig-lightbox[hidden] { display: none; }

.fig-lb-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 0;
    background: #fff;
    color: #333333;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
    transition: background .15s, transform .15s;
    z-index: 2;
}

.fig-lb-nav:hover { background: #FAFBFC; transform: translateY(-50%) scale(1.06); }
.fig-lb-prev { left: 26px; }
.fig-lb-next { right: 26px; }

.fig-lb-card {
    background: #fff;
    border-radius: 6px;
    width: min(1180px, 96vw);
    max-height: 100%;
    overflow: hidden;
    display: flex;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .4);
}

.fig-lb-photo {
    position: relative;
    background: #111;
    /* flex-basis:0 (not auto) — an empty/placeholder photo area has no
       intrinsic content width, so "auto" would collapse it to ~0 and let
       the fixed-width details panel dictate the whole card's size. */
    flex: 1 1 0;
    min-width: 280px;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fig-lb-img {
    display: block;
    max-width: 100%;
    max-height: 86vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

.fig-lb-placeholder {
    position: absolute;
    inset: 0;
    background: url(../images/placeholder-image.png) center / cover no-repeat;
}

.fig-lb-details {
    flex: 0 0 400px;
    max-width: 400px;
    padding: 30px 30px 26px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-y: auto;
}

.fig-lb-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 6px;
    background: #FAFBFC;
    color: #666666;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fig-lb-model {
    font-family: Georgia, "Palatino Linotype", "Times New Roman", serif;
    margin: 0 0 18px;
    font-size: 27px;
    font-weight: 400;
    color: #2b3340;
}

.fig-lb-price {
    font-size: 17px;
    font-weight: 600;
    color: #1C2B68;
    margin: -10px 0 16px;
}

.fig-lb-price .fig-lb-was {
    font-size: 15px;
    font-weight: 400;
    color: #666666;
    text-decoration: line-through;
    margin-left: 10px;
}

.fig-lb-row { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-size: 14px; color: #333333; }

.fig-lb-swatch {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: #BBBBBB;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

.fig-lb-label { margin: 0 0 6px; font-size: 14px; color: #333333; }
.fig-lb-block { margin-bottom: 18px; }
.fig-lb-block hr { border: 0; border-top: 1px solid #D6D6D6; margin: 0 0 12px; }

.fig-lb-block blockquote {
    margin: 0;
    padding-left: 14px;
    border-left: 3px solid #D6D6D6;
    font-family: Georgia, "Palatino Linotype", "Times New Roman", serif;
    font-style: italic;
    font-size: 14.5px;
    line-height: 1.65;
    color: #666666;
    white-space: pre-wrap;
    quotes: none;
}

/* Neutralize the site's global blockquote::before/::after quote-mark glyph. */
.fig-lb-block blockquote::before,
.fig-lb-block blockquote::after {
    content: none;
}

.fig-lb-cta { margin-top: auto; padding-top: 22px; }

.fig-lb-composer-btn {
    display: block;
    text-align: center;
    background: #1C2B68;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    padding: 15px 26px;
    border-radius: 4px;
    text-decoration: none;
}

.fig-lb-composer-btn:hover { background: #16204f; color: #fff; }

@media (max-width: 760px) {
    .fig-lb-card { flex-direction: column; max-height: 92vh; }
    .fig-lb-photo { min-height: 240px; }
    .fig-lb-details { flex: 1 1 auto; max-width: none; }
    .fig-lb-nav { display: none; }
}