/* 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;
}

.fig-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.fig-view-toggle {
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    background: #EEF0F4;
    border-radius: 999px;
}

.fig-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: #5B6472;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.fig-view-btn svg { flex: 0 0 auto; }

.fig-view-btn:hover { color: #1C2B68; }

.fig-view-btn.is-active {
    background: #fff;
    color: #1C2B68;
    box-shadow: 0 2px 6px rgba(20, 20, 20, .1);
}

/* "Images only" mode — captions stay in the DOM (so toggling back is
   instant, no re-fetch) but are hidden, leaving each card as just its
   photo. */
.fig-gallery.is-images-only .fig-card-caption {
    display: none;
}

/* 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; }

/* Sentinel that triggers the next page (see featured-image-gallery.js) — no
   footprint of its own beyond the spinner shown while a fetch is in flight. */
.fig-loadmore-sentinel { display: flex; justify-content: center; }

.fig-loadmore-spinner {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid rgba(28, 43, 104, .18);
    border-top-color: #1C2B68;
    animation: fig-spin .8s linear infinite;
}

@keyframes fig-spin {
    to { transform: rotate(360deg); }
}

.fig-backtotop-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    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-backtotop-btn:hover { background: #f5f6fa; }

/* 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 {
    position: relative;
    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-color: #BBBBBB;
    background-size: cover;
    background-position: center;
    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; }

    /* flex: 0 0 auto (not 1 1 0) — the photo must never be flex-shrunk
       below the image's own rendered size, or the card's overflow:hidden
       clips it. Only .fig-lb-details (which scrolls internally) gives up
       space when the two don't both fit in max-height. */
    .fig-lb-photo { flex: 0 0 auto; min-height: 240px; }
    .fig-lb-img { max-height: 50vh; }

    /* position:static pulls .fig-lb-close's `position:absolute` up to
       .fig-lb-card (the next positioned ancestor) instead of this panel,
       so the button sits over the photo (which is first in this column
       layout) rather than at the top of the details panel below it. The
       extra padding-top clears the title from underneath that button. */
    .fig-lb-details { flex: 1 1 auto; max-width: none; position: static; padding-top: 52px; overflow-y: auto; }

    .fig-lb-close { box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
    .fig-lb-nav { display: none; }
}

/* #menu-toggle (frontend.css) is a fixed, z-index:9999 button — above this
   lightbox's own z-index:1050 — so it stays clickable over the modal on
   mobile unless explicitly hidden here. featured-image-gallery.js toggles
   this class on open/close. */
body.fig-lightbox-open #menu-toggle {
    display: none;
}