/* ================================================================
   Sensual-media Blocks — Frontend CSS
   Masonry Galerie + Lightbox
================================================================ */

/* ----------------------------------------------------------------
   Masonry Section Wrapper
---------------------------------------------------------------- */
.sm-masonry-section {
    padding: var(--sm-section-padding, 5rem 0);
}

.sm-masonry-section--surface {
    background:   var(--sm-surface, #111118);
    border-top:    1px solid var(--sm-border, rgba(255,255,255,0.08));
    border-bottom: 1px solid var(--sm-border, rgba(255,255,255,0.08));
}

.sm-masonry-section__header {
    text-align:    center;
    margin-bottom: 2.5rem;
}

/* Empty-State */
.sm-masonry-empty {
    padding:    3rem;
    text-align: center;
    color:      var(--sm-text-muted, #888);
    font-size:  0.9375rem;
    border:     1px dashed var(--sm-border, rgba(255,255,255,0.1));
    border-radius: 8px;
    margin: 1rem;
}

/* ----------------------------------------------------------------
   Masonry Grid — CSS Grid + JS row-span
   Funktioniert ohne JavaScript als gleichmäßige Spalten,
   mit JavaScript werden die Zeilen exakt per row-span angepasst.
---------------------------------------------------------------- */
.sm-masonry-gallery {
    display:               grid;
    grid-template-columns: repeat(var(--sm-gallery-cols, 3), 1fr);
    grid-auto-rows:        4px; /* kleine Grundeinheit für row-span */
    gap:                   0 var(--sm-gallery-gap, 12px);
    align-items:           start;
}

@media (max-width: 900px) {
    .sm-masonry-gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .sm-masonry-gallery { grid-template-columns: 1fr; }
}

.sm-masonry-gallery__item {
    /* row-span wird per JS gesetzt */
    padding-bottom: var(--sm-gallery-gap, 12px);
}

/* Gap = none */
.sm-masonry-gallery[style*="--sm-gallery-gap:0px"] .sm-masonry-gallery__item {
    padding-bottom: 0;
}
.sm-masonry-gallery[style*="--sm-gallery-gap:0px"] .sm-masonry-gallery__btn,
.sm-masonry-gallery[style*="--sm-gallery-gap:0px"] .sm-masonry-gallery__static {
    border-radius: 0;
}

/* ----------------------------------------------------------------
   Bildverhältnis (aspect ratio)
---------------------------------------------------------------- */
/* Quadratisch (1:1) — fixe Höhe, JS-Masonry ignoriert natürliche Höhe */
.sm-masonry-gallery--ratio-square .sm-masonry-gallery__btn img,
.sm-masonry-gallery--ratio-square .sm-masonry-gallery__static img {
    width:            100%;
    aspect-ratio:     1 / 1;
    object-fit:       cover;
    object-position:  center;
}

/* Hochformat (3:4) */
.sm-masonry-gallery--ratio-portrait .sm-masonry-gallery__btn img,
.sm-masonry-gallery--ratio-portrait .sm-masonry-gallery__static img {
    width:            100%;
    aspect-ratio:     3 / 4;
    object-fit:       cover;
    object-position:  center top;
}

/* Querformat (16:9) */
.sm-masonry-gallery--ratio-landscape .sm-masonry-gallery__btn img,
.sm-masonry-gallery--ratio-landscape .sm-masonry-gallery__static img {
    width:            100%;
    aspect-ratio:     16 / 9;
    object-fit:       cover;
    object-position:  center;
}

/* ----------------------------------------------------------------
   Galerie-Button (mit Lightbox)
---------------------------------------------------------------- */
.sm-masonry-gallery__btn {
    display:       block;
    width:         100%;
    padding:       0;
    border:        none;
    background:    none;
    cursor:        pointer;
    border-radius: 6px;
    overflow:      hidden;
    position:      relative;
}

.sm-masonry-gallery__btn::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: rgba(0,0,0,0);
    transition: background 0.25s ease;
    border-radius: 6px;
}

.sm-masonry-gallery__btn:hover::after {
    background: rgba(109, 40, 217, 0.18);
}

.sm-masonry-gallery__btn:focus-visible {
    outline:        2px solid var(--sm-purple, #7C3AED);
    outline-offset: 2px;
}

.sm-masonry-gallery__btn img {
    width:      100%;
    height:     auto;
    display:    block;
    transition: transform 0.35s ease;
}

.sm-masonry-gallery__btn:hover img {
    transform: scale(1.03);
}

/* Galerie ohne Lightbox */
.sm-masonry-gallery__static {
    border-radius: 6px;
    overflow:      hidden;
}

.sm-masonry-gallery__static img {
    width:   100%;
    height:  auto;
    display: block;
}

/* ----------------------------------------------------------------
   Lightbox
---------------------------------------------------------------- */
.sm-lightbox-overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(5, 5, 10, 0.94);
    z-index:         99998;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             1rem;
    padding:         1.5rem;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.sm-lb-content {
    position:      relative;
    max-width:     min(90vw, 1100px);
    max-height:    90vh;
    display:       flex;
    flex-direction: column;
    align-items:   center;
}

.sm-lb-img {
    max-width:    100%;
    max-height:   85vh;
    object-fit:   contain;
    border-radius: 8px;
    box-shadow:   0 32px 80px rgba(0,0,0,0.6);
    display:      block;
}

.sm-lb-counter {
    margin-top: 0.75rem;
    font-size:  0.8125rem;
    color:      rgba(255,255,255,0.45);
    letter-spacing: 0.05em;
}

/* Navigations-Buttons */
.sm-lb-close,
.sm-lb-prev,
.sm-lb-next {
    background:    rgba(255,255,255,0.07);
    border:        1px solid rgba(255,255,255,0.12);
    color:         #fff;
    cursor:        pointer;
    border-radius: 50%;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    background 0.2s ease, transform 0.2s ease;
    flex-shrink:   0;
}

.sm-lb-close {
    position:  absolute;
    top:       1rem;
    right:     1rem;
    width:     44px;
    height:    44px;
    z-index:   1;
}

.sm-lb-prev,
.sm-lb-next {
    width:  56px;
    height: 56px;
}

.sm-lb-close:hover,
.sm-lb-prev:hover,
.sm-lb-next:hover {
    background: rgba(124, 58, 237, 0.4);
    transform:  scale(1.08);
}

.sm-lb-close:focus-visible,
.sm-lb-prev:focus-visible,
.sm-lb-next:focus-visible {
    outline:        2px solid var(--sm-purple, #7C3AED);
    outline-offset: 2px;
}

@media (max-width: 600px) {
    .sm-lb-prev, .sm-lb-next { width: 40px; height: 40px; }
    .sm-lightbox-overlay      { gap: 0.5rem; padding: 1rem; }
}

/* ----------------------------------------------------------------
   FAQ Block (ergänzt die bestehenden .faq-section Stile)
---------------------------------------------------------------- */
.sm-faq-section .faq-section__heading {
    margin-top: 0.5rem;
}

/* ----------------------------------------------------------------
   Service-Card Bild (optionales Bild oben in der Karte)
---------------------------------------------------------------- */
.service-card__img {
    margin:        -1.5rem -1.5rem 1.25rem;
    border-radius: var(--sm-radius, 12px) var(--sm-radius, 12px) 0 0;
    overflow:      hidden;
    aspect-ratio:  16/9;
}

.service-card__img img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform 0.4s ease;
}

.service-card:hover .service-card__img img {
    transform: scale(1.04);
}

/* ----------------------------------------------------------------
   Apply Section (Shooting-Anfrage mit Hintergrundbild)
---------------------------------------------------------------- */
.apply {
    position: relative;
    overflow: hidden;
}

.apply__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.apply__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top; /* wird per inline-style überschrieben */
}

.apply .container {
    position: relative;
    z-index: 1;
}

.apply__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.apply__perks {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    list-style: none;
    padding: 0;
}

.apply__perk {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    font-size: 0.9375rem;
    color: var(--sm-text-muted, var(--text-muted));
}

.apply__perk svg {
    width: 18px;
    height: 18px;
    color: var(--sm-crimson-light, var(--crimson-light));
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .apply__inner { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ----------------------------------------------------------------
   Contact Section (2-spaltig: Info links, Formular rechts)
---------------------------------------------------------------- */
.contact__inner {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 4rem;
    align-items: start;
}

.contact__info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1rem;
}

.contact__item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.contact__item-icon {
    width: 44px;
    height: 44px;
    background: var(--sm-surface, var(--surface));
    border: 1px solid var(--sm-border, var(--border));
    border-radius: var(--sm-radius, var(--radius));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact__item-icon svg {
    width: 20px;
    height: 20px;
    color: var(--sm-purple-light, var(--purple-light));
}

.contact__item-label {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sm-text-subtle, var(--text-subtle));
    margin-bottom: 0.25rem;
}

.contact__item-value {
    font-size: 0.9375rem;
    color: var(--sm-text-muted, var(--text-muted));
}

.contact__item-value a {
    color: var(--sm-text-muted, var(--text-muted));
    text-decoration: none;
    transition: color 0.2s ease;
}

.contact__item-value a:hover {
    color: var(--sm-purple-light, var(--purple-light));
}

@media (max-width: 768px) {
    .contact__inner { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ----------------------------------------------------------------
   Contact Direct Buttons
---------------------------------------------------------------- */
.contact__direct {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin-bottom: 2.5rem;
}

.contact__direct-btn {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem 1.5rem;
    border-radius: var(--sm-radius-lg, 16px);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid;
}

.contact__direct-btn--email {
    background: rgba(124, 58, 237, 0.08);
    border-color: var(--sm-purple, #7C3AED);
    color: var(--sm-text, #f0f0f0);
}

.contact__direct-btn--email:hover {
    background: rgba(124, 58, 237, 0.15);
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.2);
}

.contact__direct-btn--whatsapp {
    background: rgba(37, 211, 102, 0.07);
    border-color: rgba(37, 211, 102, 0.4);
    color: var(--sm-text, #f0f0f0);
}

.contact__direct-btn--whatsapp:hover {
    background: rgba(37, 211, 102, 0.13);
    border-color: rgba(37, 211, 102, 0.7);
    box-shadow: 0 0 20px rgba(37, 211, 102, 0.15);
}

/* ----------------------------------------------------------------
   Contact FAQ (inline in contact section)
---------------------------------------------------------------- */
.contact__faq-title {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--sm-text-subtle, #666);
    margin-bottom: 0.75rem;
}

.contact__faq-item {
    border-bottom: 1px solid var(--sm-border, rgba(255,255,255,0.08));
    padding: 0.875rem 0;
}

.contact__faq-item:last-child {
    border-bottom: none;
}

.contact__faq-item summary {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--sm-text-muted, #bbb);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    transition: color 0.2s ease;
}

.contact__faq-item summary::-webkit-details-marker { display: none; }

.contact__faq-item summary::after {
    content: '+';
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--sm-purple-light, #A78BFA);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.contact__faq-item[open] summary::after {
    transform: rotate(45deg);
}

.contact__faq-item summary:hover {
    color: var(--sm-text, #f0f0f0);
}

.contact__faq-item p {
    font-size: 0.875rem;
    color: var(--sm-text-subtle, #888);
    max-width: none;
    padding-top: 0.75rem;
    margin: 0;
    line-height: 1.7;
}

/* ----------------------------------------------------------------
   Standalone FAQ Section
---------------------------------------------------------------- */
.faq-section .contact__faq-item summary {
    font-size: 1rem;
    font-weight: 400;
    color: var(--sm-text, #f0f0f0);
}

.faq-section .contact__faq-item p {
    font-size: 0.9375rem;
    color: var(--sm-text-muted, #bbb);
}

/* ================================================================
   Before/After Slider (.sm-ba)
================================================================ */
.sm-ba {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
    cursor: ew-resize;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
    box-shadow: 0 8px 32px rgba(0,0,0,0.45);
}

.sm-ba__hdr {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.sm-ba__sdr {
    position: absolute;
    inset: 0;
    clip-path: inset(0 calc(100% - var(--ba-pos, 50%)) 0 0);
}

.sm-ba__img {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}

.sm-ba__divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--ba-pos, 50%);
    transform: translateX(-50%);
    width: 3px;
    background: rgba(255,255,255,0.9);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sm-ba__handle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sm-purple, #7C3AED);
    flex-shrink: 0;
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.sm-ba:focus .sm-ba__handle,
.sm-ba:hover .sm-ba__handle {
    transform: scale(1.12);
    box-shadow: 0 4px 20px rgba(0,0,0,0.55);
}

.sm-ba__label {
    position: absolute;
    bottom: 14px;
    padding: 4px 10px;
    border-radius: 4px;
    background: rgba(0,0,0,0.62);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    pointer-events: none;
}
.sm-ba__label--left  { left:  14px; }
.sm-ba__label--right { right: 14px; }

.sm-ba__caption {
    text-align: center;
    font-size: 0.8125rem;
    color: var(--sm-text-muted, #9CA3AF);
    margin-top: 0.75rem;
    font-style: italic;
}

.sm-ba:focus-visible {
    outline: 2px solid var(--sm-purple, #7C3AED);
    outline-offset: 3px;
}

/* Originalproportion: Bildhöhe bestimmt Container */
.sm-ba--natural { height: auto; }
.sm-ba--natural .sm-ba__hdr { position: relative; inset: unset; width: 100%; }
.sm-ba--natural .sm-ba__hdr .sm-ba__img { position: relative; inset: auto; height: auto; object-fit: unset; }
.sm-ba--natural .sm-ba__sdr { position: absolute; inset: 0; }
.sm-ba--natural .sm-ba__sdr .sm-ba__img { position: absolute; height: 100%; object-fit: cover; }