/*! * WP-ImmoMakler static-fullwidth gallery preset. * * JamesEdition-style layout: large main image on the left, customer-configurable * rows × cols grid of secondary thumbs on the right. The preset writes four * CSS custom properties on the wrapper element: * * --immomakler-gallery-static-rows — thumb grid rows (1..4) * --immomakler-gallery-static-cols — thumb grid cols (1..4) * --immomakler-gallery-static-main-aspect — main image aspect (e.g. `3/2`) * --immomakler-gallery-static-fixed-height — explicit height (px/vh/svh/lvh/dvh) * * Plus four modifier classes that flag the layout mode: * * --aspect_ratio — main image's aspect drives the outer height * (thumbs grid fills the height established by main) * --split_5050 — main + thumbs split the outer width 50/50; * outer height is whatever the thumb grid produces * --height-fixed — the outer height is pinned by `--fixed-height`; * overrides aspect-ratio computation * * The "Alle N Fotos anzeigen" button (when `overflow_action=button`) and any * other action buttons hooked in via the * `immomakler_gallery_static_controls_items` PHP filter render into a * bottom-right `.immomakler-gallery__controls` overlay — see further * below for the styling. * * Vanilla CSS Grid + aspect-ratio, no Bootstrap. The shared gallery loader * wires the lightbox via `[data-immomakler-gallery-lightbox-index]` attrs. */ .immomakler-gallery--static_fullwidth{--immomakler-gallery-gap:6px;--immomakler-gallery-static-rows:3;--immomakler-gallery-static-cols:2;--immomakler-gallery-static-main-aspect:3/2;--immomakler-gallery-primary-color:#af1615;--immomakler-gallery-primary-color-inverted:#fff;display:grid;gap:var(--immomakler-gallery-gap);width:100%;max-width:100%;position:relative}.immomakler-gallery--static_fullwidth.immomakler-gallery--aspect_ratio{grid-template-columns:2fr 1fr}.immomakler-gallery--static_fullwidth.immomakler-gallery--split_5050{grid-template-columns:1fr 1fr}.immomakler-gallery--static_fullwidth.immomakler-gallery--split_5050:not(.immomakler-gallery--height-fixed){aspect-ratio:var(--immomakler-gallery-static-main-aspect)}.immomakler-gallery--static_fullwidth.immomakler-gallery--split_5050 .immomakler-gallery__static-main{aspect-ratio:auto;height:100%}.immomakler-gallery--static_fullwidth.immomakler-gallery--height-fixed{height:var(--immomakler-gallery-static-fixed-height,500px)}.immomakler-gallery--static_fullwidth .immomakler-gallery__static-main{display:block;grid-column:1;grid-row:1;width:100%;min-width:0;aspect-ratio:var(--immomakler-gallery-static-main-aspect);overflow:hidden;border-radius:var(--immomakler-gallery-border-radius,0);cursor:zoom-in;color:inherit;text-decoration:none}.immomakler-gallery--static_fullwidth.immomakler-gallery--height-fixed .immomakler-gallery__static-main{aspect-ratio:auto;height:100%}.immomakler-gallery--static_fullwidth .immomakler-gallery__static-main .immomakler-gallery__image,.immomakler-gallery--static_fullwidth .immomakler-gallery__static-main picture>.immomakler-gallery__image{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s linear,filter .2s linear;transform-origin:center}.immomakler-gallery--hover-zoom-in.immomakler-gallery--static_fullwidth .immomakler-gallery__static-main:hover .immomakler-gallery__image,.immomakler-gallery--hover-zoom-in.immomakler-gallery--static_fullwidth .immomakler-gallery__static-main:focus-visible .immomakler-gallery__image{transform:scale(1.005)}.immomakler-gallery--hover-brighten.immomakler-gallery--static_fullwidth .immomakler-gallery__static-main:hover .immomakler-gallery__image,.immomakler-gallery--hover-brighten.immomakler-gallery--static_fullwidth .immomakler-gallery__static-main:focus-visible .immomakler-gallery__image{filter:brightness(1.08)}.immomakler-gallery--static_fullwidth .immomakler-gallery__static-thumbs{grid-column:2;grid-row:1;display:grid;gap:var(--immomakler-gallery-gap);min-width:0;min-height:0;height:100%;grid-template-columns:repeat(var(--immomakler-gallery-static-cols),1fr);grid-template-rows:repeat(var(--immomakler-gallery-static-rows),1fr)}.immomakler-gallery--static_fullwidth .immomakler-gallery__static-thumb{position:relative;display:block;overflow:hidden;border-radius:var(--immomakler-gallery-border-radius,0);cursor:zoom-in;color:inherit;text-decoration:none;min-width:0;min-height:0}.immomakler-gallery--static_fullwidth .immomakler-gallery__static-thumb .immomakler-gallery__image,.immomakler-gallery--static_fullwidth .immomakler-gallery__static-thumb picture>.immomakler-gallery__image{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s linear,filter .2s linear;transform-origin:center}.immomakler-gallery--hover-zoom-in.immomakler-gallery--static_fullwidth .immomakler-gallery__static-thumb:hover .immomakler-gallery__image,.immomakler-gallery--hover-zoom-in.immomakler-gallery--static_fullwidth .immomakler-gallery__static-thumb:focus-visible .immomakler-gallery__image{transform:scale(1.0075)}.immomakler-gallery--hover-brighten.immomakler-gallery--static_fullwidth .immomakler-gallery__static-thumb:hover .immomakler-gallery__image,.immomakler-gallery--hover-brighten.immomakler-gallery--static_fullwidth .immomakler-gallery__static-thumb:focus-visible .immomakler-gallery__image{filter:brightness(1.08)}.immomakler-gallery--static_fullwidth .immomakler-gallery__static-thumb--more{opacity:1}.immomakler-gallery--static_fullwidth .immomakler-gallery__static-thumb-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:rgba(0,0,0,.6);color:#fff;font-size:clamp(14px,2vw,20px);font-weight:700;pointer-events:none}.immomakler-gallery--static_fullwidth .immomakler-gallery__controls{position:absolute;right:16px;bottom:16px;z-index:2;display:flex;gap:8px;pointer-events:none}.immomakler-gallery--static_fullwidth .immomakler-gallery__controls-item{pointer-events:auto;display:inline-flex;align-items:center;gap:6px;padding:14px 20px;background-color:rgba(255,255,255,.95);color:#1a1a1a;border:0;border-radius:21px;box-shadow:0 2px 8px rgba(0,0,0,.25);font-size:14px;font-weight:500;line-height:1;text-decoration:none;cursor:pointer;transition:background-color .15s ease}.immomakler-gallery--static_fullwidth .immomakler-gallery__controls-item:hover,.immomakler-gallery--static_fullwidth .immomakler-gallery__controls-item:focus-visible{background-color:#e5e5e5;text-decoration:none}.immomakler-gallery--static_fullwidth .immomakler-gallery__controls-item-icon{display:inline-flex;align-items:center;justify-content:center}.immomakler-gallery--static_fullwidth .immomakler-gallery__controls-item-icon svg{display:block;width:18px;height:18px}@media (max-width:768px){.immomakler-gallery--static_fullwidth .immomakler-gallery__controls{right:8px;bottom:8px}.immomakler-gallery--static_fullwidth .immomakler-gallery__controls-item{padding:10px 16px;font-size:13px}}.immomakler-gallery--static_fullwidth.immomakler-gallery--rounded-wrapper{border-radius:var(--immomakler-gallery-border-radius,0);overflow:hidden}.immomakler-gallery--static_fullwidth.immomakler-gallery--rounded-wrapper .immomakler-gallery__static-main,.immomakler-gallery--static_fullwidth.immomakler-gallery--rounded-wrapper .immomakler-gallery__static-thumb{border-radius:0}@media (max-width:768px){.immomakler-gallery--static_fullwidth,.immomakler-gallery--static_fullwidth.immomakler-gallery--aspect_ratio,.immomakler-gallery--static_fullwidth.immomakler-gallery--split_5050{grid-template-columns:1fr;height:auto}.immomakler-gallery--static_fullwidth .immomakler-gallery__static-thumbs{display:none}}