/* ── Social-post generator (port of fotografia's ig_spots.css) ───────────────
   Class names match the proven fotografia builder; the color/font tokens are
   driven by the platform's app_branding row via --brand-* vars injected on
   .ig-post by the generator page. Fallbacks keep posts legible for platforms
   without branding configured. */

/* Local aliases resolved from branding */
.ig-post {
    --sp-accent:       var(--brand-accent, var(--brand-primary, #C9A96E));
    --sp-on-accent:    #1a1713;
    --sp-font-heading: var(--brand-font-heading, 'Cormorant Garamond', serif);
    --sp-font-body:    var(--brand-font-body, 'Poppins', system-ui, sans-serif);
    --sp-font-sub:     var(--brand-font-body, 'Montserrat', sans-serif);
}

/* Dropzone */
.ig-dropzone {
    border: 2px dashed #ced4da;
    border-radius: 8px;
    padding: 1.25rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.ig-dropzone:hover,
.ig-dropzone.dragging {
    border-color: var(--am-accent, #0d6efd);
    background: rgba(13,110,253,.04);
}

/* Preset swatches */
.ig-preset {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform .15s, outline .15s;
}
.ig-preset:hover  { transform: scale(1.12); }
.ig-preset.active { border-color: #fff; outline: 2px solid var(--am-accent, #0d6efd); }

.ig-img-preset {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    transition: transform .15s, outline .15s;
}
.ig-img-preset:hover  { transform: scale(1.1); }
.ig-img-preset.active { border-color: #fff; outline: 2px solid var(--am-accent, #0d6efd); }
.ig-img-preset .ig-img-del {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: #dc3545;
    color: #fff;
    font-size: 10px;
    line-height: 1;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.ig-img-preset:hover .ig-img-del { display: flex; }

/* Lazy gallery accordion (Fase 4: photo_session content) */
.ig-gal-head {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    background: none;
    border: 0;
    padding: .45rem .65rem;
    font-size: .82rem;
    text-align: left;
    cursor: pointer;
}
.ig-gal-head:hover { background: rgba(0,0,0,.04); }
.ig-gal-body { border-top: 1px solid rgba(0,0,0,.08); }

/* Photo picker thumbnails (Fase 4: photo_session content) */
.ig-photo-pick {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 6px;
    border: 2px solid transparent;
    background-size: cover;
    background-position: center;
    background-color: #e9ecef;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform .15s, outline .15s;
}
.ig-photo-pick:hover  { transform: scale(1.06); }
.ig-photo-pick.active { border-color: #fff; outline: 2px solid var(--am-accent, #0d6efd); }
.ig-photo-pick-num {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 50%;
    background: var(--am-accent, #0d6efd);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
.ig-photo-pick-num:empty { display: none; }

/* Photo-grid template (Fase 4): selected photos tile the whole canvas */
.ig-post .ig-photo-grid {
    position: absolute;
    inset: 0;
    display: none;
    gap: 4px;
}
.ig-photo-grid .ig-grid-cell {
    background-size: cover;
    background-position: center;
    background-color: rgba(255,255,255,.06);
}
.ig-photo-grid .ig-grid-empty {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.4);
    font-family: var(--sp-font-body);
    font-size: 11px;
    text-align: center;
    padding: 1rem;
}

/* Preview panel */
.ig-preview-sticky { position: sticky; top: 80px; }
.ig-preview-wrapper {
    height: min(72vh, 580px);
    display: flex;
    justify-content: center;
}

/* The post canvas */
.ig-post {
    position: relative;
    aspect-ratio: 1 / 1;
    height: 100%;
    width: auto;
    max-width: 100%;
    background: linear-gradient(160deg, #1a1a2e, #16213e);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,.35);
    font-family: var(--sp-font-body);
}
/* Wide/landscape formats fit by width instead of height */
.ig-preview-wrapper.is-wide { height: auto; }
.ig-preview-wrapper.is-wide .ig-post { width: 100%; height: auto; }

.ig-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,.15) 0%,
        rgba(0,0,0,.42) 40%,
        rgba(0,0,0,.72) 100%
    );
}
.ig-post.is-photo .ig-overlay {
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,.05) 0%,
        rgba(0,0,0,.25) 55%,
        rgba(0,0,0,.78) 100%
    );
}
/* Light/paper rendering (e.g. white solid backgrounds) drops the dark wash */
.ig-post.is-light .ig-overlay { background: none; }

.ig-overlay-custom {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
}

.ig-post .ig-photo-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: filter .25s, transform .25s;
}

/* Watermark (optional, from app_branding_assets type=watermark) */
.ig-watermark {
    position: absolute;
    right: 4%;
    bottom: 3%;
    width: 14%;
    opacity: .5;
    pointer-events: none;
    display: none;
}
.ig-post.has-watermark .ig-watermark { display: block; }

.ig-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 3.5%, 26px);
    padding: clamp(16px,6%,32px) clamp(20px,8%,40px);
}
.ig-content[data-align-v="top"]    { justify-content: flex-start; }
.ig-content[data-align-v="middle"] { justify-content: center;     }
.ig-content[data-align-v="bottom"] { justify-content: flex-end;   }
.ig-content[data-align-h="left"]   { align-items: flex-start; text-align: left;   }
.ig-content[data-align-h="center"] { align-items: stretch;    text-align: center; }
.ig-content[data-align-h="right"]  { align-items: flex-end;   text-align: right;  }

/* Brand logo row */
.ig-logo-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ig-logo-row img {
    max-height: 44px;
    max-width: 55%;
    object-fit: contain;
}

/* Title block */
.ig-title-block { flex-shrink: 0; }
.ig-tagline {
    color: rgba(255,255,255,.7);
    font-family: var(--sp-font-sub);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    margin: 0 0 6px;
    line-height: 1.4;
}
.ig-heading {
    color: #fff;
    font-family: var(--sp-font-heading);
    font-size: clamp(22px, 6.5%, 34px);
    font-weight: 400;
    margin: 0 0 12px;
    line-height: 1.1;
    letter-spacing: .02em;
}
.ig-heading-divider {
    width: 48px;
    height: 1px;
    background: var(--sp-accent);
    display: inline-block;
}
.ig-content[data-align-h="center"] .ig-heading-divider { margin: 0 auto; display: block; }

/* Item cards (event-list) */
.ig-sessions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.ig-empty-msg {
    color: rgba(255,255,255,.4);
    font-size: 11px;
    text-align: center;
    margin: 0;
}
.ig-session-card {
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 10px;
    padding: 9px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}
.ig-date-block {
    flex-shrink: 0;
    text-align: center;
    min-width: 30px;
}
.ig-date-dayname {
    color: rgba(255,255,255,.55);
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1;
    margin-bottom: 2px;
}
.ig-date-num {
    color: #fff;
    font-family: var(--sp-font-heading);
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
}
.ig-date-month {
    color: rgba(255,255,255,.55);
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-top: 2px;
}
.ig-card-divider {
    width: 1px;
    height: 36px;
    flex-shrink: 0;
    opacity: .85;
    background: var(--sp-accent);
}
.ig-session-info { flex: 1; min-width: 0; }
.ig-session-type {
    color: #fff;
    font-family: var(--sp-font-heading);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: .02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ig-session-avail {
    color: var(--sp-accent);
    font-family: var(--sp-font-sub);
    font-size: 9px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-top: 3px;
}

/* Single announcement */
.ig-announce {
    flex-shrink: 0;
    max-width: 100%;
}
.ig-announce-date {
    color: var(--sp-accent);
    font-family: var(--sp-font-sub);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 10px;
}
.ig-announce-title {
    color: #fff;
    font-family: var(--sp-font-heading);
    font-size: clamp(26px, 9%, 44px);
    font-weight: 400;
    line-height: 1.08;
    margin: 0 0 8px;
    letter-spacing: .02em;
}
.ig-announce-subtitle {
    color: rgba(255,255,255,.85);
    font-family: var(--sp-font-sub);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    margin: 0 0 14px;
}
.ig-announce-extra {
    color: rgba(255,255,255,.75);
    font-family: var(--sp-font-body);
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
}

/* CTA row */
.ig-cta-row {
    flex-shrink: 0;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.18);
    text-align: center;
}
.ig-cta {
    color: var(--sp-accent);
    font-family: var(--sp-font-sub);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

/* Light/paper variant: dark text on light backgrounds */
.ig-post.is-light .ig-tagline,
.ig-post.is-light .ig-announce-extra      { color: rgba(20,20,20,.6); }
.ig-post.is-light .ig-heading,
.ig-post.is-light .ig-date-num,
.ig-post.is-light .ig-session-type,
.ig-post.is-light .ig-announce-title      { color: #141414; }
.ig-post.is-light .ig-announce-subtitle   { color: rgba(20,20,20,.75); }
.ig-post.is-light .ig-empty-msg           { color: rgba(20,20,20,.4); }
.ig-post.is-light .ig-date-dayname,
.ig-post.is-light .ig-date-month          { color: rgba(20,20,20,.55); }
.ig-post.is-light .ig-session-card {
    background: rgba(0,0,0,.05);
    border-color: rgba(0,0,0,.12);
}
.ig-post.is-light .ig-cta-row             { border-top-color: rgba(0,0,0,.15); }

/* Slide navigator */
.ig-slide-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.ig-slide-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #d0d5dc;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background .15s, transform .15s;
}
.ig-slide-dot.active { background: var(--am-accent, #0d6efd); transform: scale(1.25); }
.ig-slide-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Screenshot overlay */
.ig-screenshot-overlay {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
#screenshotPost { position: relative; overflow: hidden; }
#screenshotPost .ig-post {
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    border-radius: 0;
    box-shadow: none;
    max-width: unset;
}
.ig-screenshot-close {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 10000;
    background: rgba(255,255,255,.18);
    border: none;
    color: #fff;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    transition: opacity .4s;
}

@keyframes ig-spin { to { transform: rotate(360deg); } }
.ig-spin { display: inline-block; animation: ig-spin .7s linear infinite; }