/* =====================================================================
   WP Image Accordion – frontend-stil v2
   ===================================================================== */

/* ----- Layout ----- */
.wp-image-accordion {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 48px;
    margin: 40px 0;
}

.wp-image-accordion__list {
    flex: 0 0 42%;
    max-width: 42%;
}

/* ----- Desktop bildyta – CSS grid-stackning för korrekt höjd ----- */
/*
   Alla bilder läggs i samma grid-cell och ges opacity: 0.
   Containern får sin höjd från den "talaste" bilden, vilket
   säkerställer att wp-block-group bakgrundsfärg täcker hela
   accordion-höjden (fixar problem 6).
*/
.wp-image-accordion__image-area {
    position: sticky;
    top: 48px;
    flex: 1;
    align-self: flex-start;
    display: grid;
    border-radius: 14px;
    overflow: hidden;
}

.wp-image-accordion__image {
    grid-column: 1;
    grid-row:    1;
    display:     block;
    width:       100%;
    height:      auto;
    opacity:     0;
    transition:  opacity 0.5s ease;
    pointer-events: none;
}

.wp-image-accordion__image.is-visible {
    opacity:        1;
    pointer-events: auto;
}

/* =====================================================================
   no-images läge – lista tar full bredd, bildyta döljs
   ===================================================================== */
.wp-image-accordion.no-images {
    gap: 0;
}

.wp-image-accordion.no-images .wp-image-accordion__list {
    flex:      none;
    max-width: 100%;
    width:     100%;
}

.wp-image-accordion.no-images .wp-image-accordion__image-area {
    display: none;
}


/*
   1. Separator-linje ENBART mellan items.
      Ingen border-top på första, ingen border-bottom på sista.
*/
.wp-image-accordion__item + .wp-image-accordion__item {
    border-top: 1px solid #d2d2d7;
}

/* ----- H3 heading reset ----- */
/*
   3. Nollställ H3:ans standardmarginaler och typografi
      så att button-utseendet styr helt.
*/
.wp-image-accordion__heading {
    margin:      0;
    padding:     0;
    font-size:   inherit;
    font-weight: inherit;
    line-height: inherit;
    font-family: var(--wp--preset--font-family--pt-serif), serif;
}

/* ----- Trigger-knapp ----- */
.wp-image-accordion__trigger {
    width:       100%;
    background:  none;
    border:      none;
    margin:      0;
    padding:     18px 0;
    text-align:  left;
    cursor:      pointer;
    display:     flex;
    align-items: center;
    justify-content: space-between;
    gap:         12px;
    font-size:   1rem;
    font-weight: 600;
    color:       inherit;
    font-family: inherit;
    line-height: 1.3;
    transition:  color 0.2s ease;
}

.wp-image-accordion__trigger:hover {
    color: var(--wp--preset--color--primary);
}

/* Chevron-ikon – SVG path animeras via JavaScript (cross-browser, inkl. Safari)
   D-attributet sätts initialt via PHP/HTML och uppdateras av frontend.js. */
.wp-image-accordion__trigger-icon {
    display:     inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width:       17px;
    height:      14px;
}

.wp-image-accordion__trigger-icon svg {
    width:    100%;
    height:   100%;
    overflow: visible;
}

/* =====================================================================
   5. Smooth motion – CSS grid-trick + fade/slide på brödtext

   grid-template-rows: 0fr → 1fr ger en perfekt mjuk höjdanimation
   utan att man behöver veta innehållets höjd i förväg.
   Brödtexten tonas in och glider upp med en kort fördröjning.
   ===================================================================== */
.wp-image-accordion__body {
    display:    grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}

.wp-image-accordion__item.is-active .wp-image-accordion__body {
    grid-template-rows: 1fr;
}

/* Nödvändig wrapper för grid-tricket */
.wp-image-accordion__body-inner-wrap {
    overflow:   hidden;
    min-height: 0;
}

/* Brödtext: fade-in + slide-up */
.wp-image-accordion__body-inner {
    opacity:    0;
    transform:  translateY(-10px);
    transition:
        opacity   0.32s ease 0.12s,
        transform 0.32s ease 0.12s;
    padding-bottom: 20px;
}

.wp-image-accordion__item.is-active .wp-image-accordion__body-inner {
    opacity:   1;
    transform: translateY(0);
}

/* Typografi i brödtext */
.wp-image-accordion__body-inner p {
    font-size:   0.95rem;
    line-height: 1.65;
    color:       var(--wp--preset--color--contrast);
    margin-top:  0;
}

.wp-image-accordion__body-inner p:last-child {
    margin-bottom: 0;
}

/* H4 i brödtext */
.wp-image-accordion__body-inner h4 {
    font-size:     1rem;
    font-weight:   600;
    margin-top:    18px;
    margin-bottom: 6px;
    color:         var(--wp--preset--color--contrast);
    line-height:   1.3;
}

.wp-image-accordion__body-inner h4:first-child {
    margin-top: 0;
}

/* Listor */
.wp-image-accordion__body-inner ul,
.wp-image-accordion__body-inner ol {
    font-size:     0.95rem;
    line-height:   1.65;
    color:         var(--wp--preset--color--contrast);
    padding-left:  22px;
    margin-bottom: 12px;
}

.wp-image-accordion__body-inner li {
    margin-bottom: 4px;
}

/* Länkar */
.wp-image-accordion__body-inner a {
    color:           var(--wp--preset--color--primary);
    text-decoration: none;
}

.wp-image-accordion__body-inner a:hover {
    text-decoration: underline;
}

/* Fetstil och kursiv */
.wp-image-accordion__body-inner strong {
    font-weight: 600;
}

.wp-image-accordion__body-inner em {
    font-style: italic;
}

/* ----- Mobilbild (inuti varje item) ----- */
.wp-image-accordion__mobile-image {
    overflow:    hidden;
    max-height:  0;
    opacity:     0;
    transition:
        max-height 0.42s cubic-bezier(0.4, 0, 0.2, 1) 0.06s,
        opacity    0.45s ease                          0.22s;
}

.wp-image-accordion__mobile-image img {
    display:       block;
    width:         100%;
    height:        auto;
    border-radius: 10px;
    margin-bottom: 12px;
}

/* =====================================================================
   Responsivitet – mobil
   ===================================================================== */
@media (max-width: 768px) {
    .wp-image-accordion {
        flex-direction: column;
        gap:            0;
    }

    .wp-image-accordion__list {
        flex:      none;
        max-width: 100%;
        width:     100%;
    }

    /* Dölj desktop-bildytan */
    .wp-image-accordion__image-area {
        display: none;
    }

    /* Visa mobilbild direkt utan fade – ingen motion på mobil */
    .wp-image-accordion__mobile-image {
        transition: none;
    }

    /* Visa mobilbild när item är aktivt */
    .wp-image-accordion__item.is-active .wp-image-accordion__mobile-image {
        max-height: 800px;
        opacity:    1;
    }
}

@media (min-width: 769px) {
    /* Säkerhetsregel: aldrig visa mobilbild på desktop */
    .wp-image-accordion__mobile-image {
        display: none !important;
    }
}