/* ========================================================================
 * Version 0.37.0 – fluid photo facts + editable software overview
 * ======================================================================== */

/* Software & Downloads: the one-time 0.37 migration converts the former
   server-side previews into ordinary Gutenberg groups. Keep those groups in
   the established card design. */
.dsa-editable-software-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: 1rem;
}
.dsa-editable-software-grid > .dsa-project-card {
    margin: 0 !important;
}
.dsa-editable-downloads {
    display: grid !important;
    gap: .75rem;
}
.dsa-editable-download-card {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin: 0 !important;
    padding: 1.1rem;
    border: 1px solid var(--dsa-border);
    border-radius: .7rem;
    background: rgba(16,29,40,.8);
}
.dsa-editable-download-card h3 { margin: 0; color: var(--dsa-heading); }
.dsa-editable-download-card p { margin: .25rem 0 0; color: var(--dsa-muted); }
.dsa-editable-download-card .wp-block-button { flex: 0 0 auto; }

/* Photo information: below 1000px the image and information box are stacked.
   From there on, let the actual width of the information container decide how
   many columns fit. This avoids device-specific breakpoints. */
@media (max-width: 1000px) {
    body.dsa-photo-template .dsa-photo-summary {
        container-type: inline-size;
        container-name: dsa-photo-summary;
        padding: clamp(.9rem, 3.2vw, 1.35rem);
    }

    body.dsa-photo-template .dsa-photo-summary .dsa-photo-terms {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)) !important;
        gap: .65rem 1rem !important;
    }

    body.dsa-photo-template .dsa-photo-summary .dsa-term-group {
        min-width: 0;
        margin: 0 !important;
        grid-template-columns: minmax(5.35rem, auto) minmax(0, 1fr) !important;
        gap: .28rem .55rem !important;
        align-content: start;
    }

    body.dsa-photo-template .dsa-photo-summary .dsa-term-group > span {
        padding-top: .28rem !important;
        font-size: clamp(.7rem, 2.2cqi, .78rem);
    }

    body.dsa-photo-template .dsa-photo-summary .dsa-term-chip {
        font-size: clamp(.78rem, 2.5cqi, .88rem) !important;
    }

    body.dsa-photo-template .dsa-photo-summary .dsa-object-facts {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)) !important;
        gap: clamp(.45rem, 1.7cqi, .65rem) !important;
        margin-top: clamp(.8rem, 2.5cqi, 1rem) !important;
    }

    body.dsa-photo-template .dsa-photo-summary .dsa-object-fact {
        min-height: 0;
        padding: clamp(.58rem, 2.1cqi, .78rem) clamp(.62rem, 2.3cqi, .86rem);
    }

    body.dsa-photo-template .dsa-photo-summary .dsa-object-fact span {
        font-size: clamp(.67rem, 2.05cqi, .74rem);
    }

    body.dsa-photo-template .dsa-photo-summary .dsa-object-fact strong {
        font-size: clamp(.84rem, 2.55cqi, .96rem);
        line-height: 1.3;
    }
}

/* Phones: use the available container width instead of a device list.
   Even an iPhone 12 mini has enough room for two compact information columns
   once labels sit above their values. Only genuinely tiny containers fall
   back to one column. */
@container dsa-photo-summary (max-width: 22.5rem) {
    body.dsa-photo-template .dsa-photo-summary .dsa-photo-terms {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .72rem .62rem !important;
    }
    body.dsa-photo-template .dsa-photo-summary .dsa-term-group {
        grid-template-columns: 1fr !important;
        gap: .18rem !important;
    }
    body.dsa-photo-template .dsa-photo-summary .dsa-term-group > span {
        padding-top: 0 !important;
    }
    body.dsa-photo-template .dsa-photo-summary .dsa-term-group > div {
        min-width: 0 !important;
    }
    body.dsa-photo-template .dsa-photo-summary .dsa-term-chip {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }
    body.dsa-photo-template .dsa-photo-summary .dsa-object-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .52rem !important;
    }
    body.dsa-photo-template .dsa-photo-summary .dsa-object-fact {
        padding: .58rem .6rem !important;
    }
    body.dsa-photo-template .dsa-photo-summary .dsa-object-fact strong {
        overflow-wrap: anywhere;
        hyphens: auto;
    }
}

/* Safety fallback for exceptionally narrow embedded views or strong browser
   zoom. This threshold is below the normal content width of an iPhone 12 mini. */
@container dsa-photo-summary (max-width: 18rem) {
    body.dsa-photo-template .dsa-photo-summary .dsa-photo-terms,
    body.dsa-photo-template .dsa-photo-summary .dsa-object-facts {
        grid-template-columns: 1fr !important;
    }
}

/* Larger phones / small tablets: fact tiles stay in two columns as soon as the
   container can genuinely hold them, independent of the device model. */
@container dsa-photo-summary (min-width: 22.5rem) and (max-width: 43rem) {
    body.dsa-photo-template .dsa-photo-summary .dsa-photo-terms,
    body.dsa-photo-template .dsa-photo-summary .dsa-object-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Portrait tablets: two taxonomy groups and up to four compact fact tiles. */
@container dsa-photo-summary (min-width: 43rem) {
    body.dsa-photo-template .dsa-photo-summary .dsa-photo-terms {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    body.dsa-photo-template .dsa-photo-summary .dsa-object-facts {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* On the classic wide desktop layout the summary is a narrow sidebar. Preserve
   the familiar two fact columns there; container queries are used for the
   stacked tablet/mobile layout only. */
@media (min-width: 1001px) {
    body.dsa-photo-template .dsa-photo-summary .dsa-object-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 620px) {
    .dsa-editable-download-card {
        align-items: stretch;
        flex-direction: column;
        gap: .8rem;
    }
    .dsa-editable-download-card .wp-block-button,
    .dsa-editable-download-card .wp-block-button__link {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }
}