/**
 * AI Frontend Editor — Public Content Styles
 *
 * Loaded for ALL visitors (not just editors).
 * Styles content structures created by the frontend editor
 * (block inserts, sliders, video embeds) so they render correctly.
 *
 * Keep this file MINIMAL — only what's needed for saved content.
 */

/* ═══════════════════════════════════════════════════════════════════════════════════════
   🔴 SKYDDSNÄT: REDIGERINGSKROM SOM BAKATS IN I KUNDENS SPARADE INNEHÅLL
   ═══════════════════════════════════════════════════════════════════════════════════════

   Funnet på cidmedia.se LIVE 2026-10-19: Christoffer såg små blå kryss mitt i texten på
   mobilen. De var vårt eget raderingskrom, sparat IN i en override:

       <button type="button" class="ai-fe-bi-delete" data-tip="Ta bort rubriken"
               aria-label="">×</button>

   Regeln som döljer det FANNS redan — `body:not(.ai-fe-editing) .ai-fe-bi-delete
   { display:none !important }` i `ai-fe-block-insert.css:26`. **Men den filen laddas aldrig
   för en utloggad besökare.** Mätt på live: publikt laddas bara `ai-fe-content.css` och
   `ai-fe-faq.css`, och `<body>` bär ingen klass alls. Skyddet låg alltså i en fil som bara
   den som redan var skyddad kunde se.

   Krommet var dessutom gammalt — lagrad glyf är `×`, medan koden ritar en papperskorg sedan
   2026-10-08. Det hade legat synligt för hans besökare i minst elva dygn.

   ⚠️ DÄRFÖR HÖR NÄTET HÄR OCH INTE DÄR. Den här filen laddas för ALLA. Att strippa krommet
   ur kunddatan är den riktiga städningen, men den lagar bara de poster som finns i dag.
   Nätet gäller även det som bakas in i morgon, på varje sajt, utan att någon upptäcker det.

   Samma familj som Incident #3 ("ALDRIG spara editor-UI som innehåll") och
   [[serverrendering-gor-lagrat-krom-synligt]].

   🟢 Villkoret `:not(.ai-fe-editing)` gör nätet ofarligt i redigeringsläget: där ska krommet
   synas, och där sätter pennan klassen på `<body>`. */
body:not(.ai-fe-editing) .ai-fe-bi-delete,
body:not(.ai-fe-editing) .ai-fe-bi-edit,
body:not(.ai-fe-editing) .ai-fe-bi-dup,
body:not(.ai-fe-editing) .ai-fe-bi-carddel,
body:not(.ai-fe-editing) .ai-fe-bi-add-card,
body:not(.ai-fe-editing) .ai-fe-bi-picker,
body:not(.ai-fe-editing) .ai-fe-bi-edit-popover,
body:not(.ai-fe-editing) .aife-text-del,
body:not(.ai-fe-editing) .aife-li-del,
body:not(.ai-fe-editing) .aife-tr-del,
body:not(.ai-fe-editing) .aife-sb-insert,
body:not(.ai-fe-editing) .aife-sb-delete,
body:not(.ai-fe-editing) .aife-sb-duplicate,
body:not(.ai-fe-editing) aife-zone {
    display: none !important;
}

/* ─── Block Insert: Video ─── */
.aife-bi-block .aife-bi-video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #111;
    border-radius: 4px;
    overflow: hidden;
}

.aife-bi-block .aife-bi-video-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ─── Block Insert: Image ─── */
.aife-bi-block img {
    max-width: 100%;
    height: auto;
}

/* ─── Slider (section-add) ─── */
.aife-sb-slider {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.aife-sb-slide {
    display: none;
}

.aife-sb-slide--active {
    display: block;
}

.aife-sb-slider-prev,
.aife-sb-slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(22, 22, 63, 0.85);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: background 0.15s ease, transform 0.15s ease;
}

.aife-sb-slider-prev { left: 10px; }
.aife-sb-slider-next { right: 10px; }

.aife-sb-slider-prev:hover,
.aife-sb-slider-next:hover {
    background: #e8960c;
    transform: translateY(-50%) scale(1.1);
}

.aife-sb-slider-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 10px 0 4px;
}

.aife-sb-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.aife-sb-dot:hover {
    background: rgba(255, 255, 255, 0.6);
}

.aife-sb-dot--active {
    background: #e8960c;
    transform: scale(1.2);
}

/* ─── Slider images ─── */
.aife-sb-slide img {
    width: 100%;
    height: auto;
    display: block;
}

/* ─── Section Builder rows (section-add): grid recovery ───
   When a customer saves a 2+ column layout, the structural .aife-sb-row class
   is stripped on save (only the inline grid-template-columns survives), AND the
   editor-only section-builder CSS is never loaded for visitors. Without
   display:grid the columns collapse to full-width stacked blocks and any
   image (width:100%) blows up to the full container width.
   Recover the grid here for ALL visitors. Scoped to added sections
   (.section-pad) so it cannot leak into the theme's own grids. */
.section-pad [style*="grid-template-columns"] {
    display: grid;
    gap: 2rem;
    align-items: center;
}
.section-pad [style*="grid-template-columns"] > * {
    min-width: 0; /* let long text / wide images shrink instead of forcing column blowout */
}
.section-pad [style*="grid-template-columns"] img {
    max-width: 100%;
    height: auto;
}
@media (max-width: 768px) {
    .section-pad [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AVSKILJARE OCH TOMRUM — 2026-10-15, /hiro-extcus. Roberts begäran.

   🔴 ETT ELEMENT, TVÅ KORT. Ett tomrum ÄR en avskiljare med linjen av. Samma
   låda, samma spacingkontroll, samma sparväg. Bygg aldrig två — då driftar
   deras inställningar isär och kunden får lära sig två saker som är en.

   🔴 PADDING, INTE MARGIN. Två skäl, båda mätta på pennan 2026-10-14:
     1. Padding ligger INNANFÖR rutan. Med margin blir träffytan 1 px hög och
        raderingskrysset hamnar i dödyta — exakt buggen som stängdes i 2.35.4,
        inbyggd från start.
     2. Marginaler KOLLAPSAR. 30 px bredvid en sektions 40 px ger 40, inte 70.
        Kunden ställer in 30 och får något annat beroende på grannen. För en
        kontroll man justerar i 5 px-steg är förutsägbarhet hela poängen.

   🔴 FÄRGEN ÄR `currentColor`, INTE SVART. `rgba(0,0,0,.3)` är osynlig på de
   mörka sektionerna hos Gösab och på demo. `currentColor` ärver omgivningens
   textfärg och blir mörk på ljusa sidor, ljus på mörka — utan inställning.
   Kunden kan skriva över med egen färg; defaulten behöver inte väljas.

   ⚠️ TALET BETYDER OLIKA SAK I DE TVÅ KORTEN, och det är avsiktligt:
       avskiljare  `--aife-rule-space` = luft PER SIDA   (30 ⇒ 30+1+30)
       tomrum      `--aife-rule-space` = TOTAL höjd      (30 ⇒ 30)
   Roberts formulering: *"30px ovanför och nedanför"* respektive *"skapar helt
   enkelt ett utrymme ... default 30px"*. Samma variabel, olika avläsning.

   ⚠️ DEFAULTVÄRDENA BOR PÅ ETT STÄLLE OCH LÄSES HÄRIFRÅN. Ge aldrig ett
   insatt element en egen kopia av värdet — då driftar varje divider som sattes
   in före en ändring. Samma fälla som priserna hade.
   ═══════════════════════════════════════════════════════════════════════════ */
.aife-rule {
    --aife-rule-space: 30px;
    --aife-rule-thickness: 1px;
    --aife-rule-width: 100%;
    --aife-rule-color: currentColor;
    --aife-rule-alpha: 0.15;

    display: block;
    width: 100%;
    margin: 0;
    border: 0;
    padding: var(--aife-rule-space) 0;
    line-height: 0;
}

.aife-rule::before {
    content: '';
    display: block;
    width: var(--aife-rule-width);
    height: var(--aife-rule-thickness);
    background: var(--aife-rule-color);
    opacity: var(--aife-rule-alpha);
    margin-left: auto;
    margin-right: auto;
}

.aife-rule--left::before  { margin-left: 0; margin-right: auto; }
.aife-rule--right::before { margin-left: auto; margin-right: 0; }

/* TOMRUM. Talet är totalhöjd här, inte luft per sida — se noten ovan. */
.aife-rule--space {
    padding: 0;
    height: var(--aife-rule-space);
}
.aife-rule--space::before { display: none; }