/*
 * AiConnectPageContent - layout, plus colour that is only ever *derived*.
 *
 * Rules for this file (docs/GUIDELINE.md section 8.3, docs/ARCHITECTURE.md section 11.5):
 *   - every selector prefixed .kpg-aicpc-, no bare element selectors, no ilc_* overrides
 *   - allowed:   display/grid/flex, widths, gaps, margins, padding, float, clear,
 *                aspect-ratio, object-fit, max-width in ch, and the media queries that
 *                collapse side-by-side layouts
 *   - allowed:   currentColor and color-mix(in srgb, currentColor n%, transparent) - the
 *                inherited text colour, weakened. Nothing else. A border or a background built
 *                from those is this installation's own colour, so it cannot clash with a skin,
 *                and it is right on a dark skin without a second rule
 *   - forbidden: any literal colour (hex, rgb(), hsl(), a keyword), font-family, font-size,
 *                font-weight, shadow, !important
 *
 * Typography and hue come from the object's ILIAS content style, which the rendered markup
 * addresses through ilc_<type>_<Characteristic> classes. Where a style defines the
 * characteristic, its rules win; where it does not - and no ILIAS installation defines a
 * `section` characteristic out of the box - what is left is the shading below.
 *
 * Every color-mix() *border* is preceded by a plain currentColor fallback, so a browser that
 * does not know the function renders the edge at full strength rather than nothing. A
 * color-mix() *background* has no fallback on purpose: the only possible one would be a literal
 * colour, so where the function is unknown the tint is simply absent, which costs nothing.
 */

.kpg-aicpc {
    /* One spacing scale, so nothing in here invents its own gaps. */
    --kpg-aicpc-gap: 1.5rem;
    --kpg-aicpc-gap-s: 1rem;
    --kpg-aicpc-pad: 1.25rem;
    /* The measure: how long a line of text may get before it is tiring to read. */
    --kpg-aicpc-measure: 68ch;

    display: block;
    margin-block: var(--kpg-aicpc-gap);
}

/*
 * Line length. Applied to the text-carrying children of a block group rather than to the group
 * itself, so images, galleries and reference grids keep the full column width.
 */
.kpg-aicpc__blocks > p,
.kpg-aicpc__blocks > ul,
.kpg-aicpc__blocks > ol {
    max-width: var(--kpg-aicpc-measure);
}

.kpg-aicpc__figure {
    margin: 0 0 var(--kpg-aicpc-gap-s);
}

.kpg-aicpc__figure img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.kpg-aicpc__figure figcaption {
    margin-block-start: .5rem;
}

/* image beside the text; collapses below the breakpoint */
.kpg-aicpc--image_side_left,
.kpg-aicpc--image_side_right {
    display: grid;
    gap: var(--kpg-aicpc-gap);
    align-items: start;
}

@media (min-width: 48rem) {
    .kpg-aicpc--image_side_left {
        grid-template-columns: 2fr 3fr;
    }

    .kpg-aicpc--image_side_right {
        grid-template-columns: 3fr 2fr;
    }

    .kpg-aicpc--image_side_right .kpg-aicpc__figure {
        grid-column: 2;
        grid-row: 1;
    }
}

/* images placed inside the flow of a single block */
.kpg-aicpc__figure--left,
.kpg-aicpc__figure--right {
    width: 100%;
}

@media (min-width: 48rem) {
    .kpg-aicpc__figure--left {
        float: left;
        width: 40%;
        margin-inline-end: var(--kpg-aicpc-gap);
    }

    .kpg-aicpc__figure--right {
        float: right;
        width: 40%;
        margin-inline-start: var(--kpg-aicpc-gap);
    }
}

.kpg-aicpc__blocks::after {
    content: "";
    display: block;
    clear: both;
}

/* text first, images as a strip below - and the mirror of it, the strip above the text */
.kpg-aicpc--gallery_bottom .kpg-aicpc__gallery,
.kpg-aicpc--gallery_top .kpg-aicpc__gallery {
    display: grid;
    gap: var(--kpg-aicpc-gap-s);
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.kpg-aicpc--gallery_bottom .kpg-aicpc__gallery {
    margin-block-start: var(--kpg-aicpc-gap);
}

.kpg-aicpc--gallery_top .kpg-aicpc__gallery {
    margin-block-end: var(--kpg-aicpc-gap);
}

/*
 * The whole element as one framed panel. The frame is the inherited text colour at a sixth of
 * its strength, which reads as a hairline on a light skin and on a dark one alike.
 */
.kpg-aicpc--card {
    padding: var(--kpg-aicpc-pad);
    border: 1px solid currentColor;
    border-color: color-mix(in srgb, currentColor 15%, transparent);
    border-radius: 4px;
}

/*
 * A callout. `ilc_section_<Variant>` is on the same element, so a content style that defines
 * the characteristic overrides all of this; until one does, the shading below is what makes an
 * Info box look like a box (docs/ARCHITECTURE.md section 11.5).
 */
.kpg-aicpc__callout {
    margin-block: var(--kpg-aicpc-gap);
    padding: var(--kpg-aicpc-gap-s) var(--kpg-aicpc-pad);
    border-inline-start: 3px solid currentColor;
    border-inline-start-color: color-mix(in srgb, currentColor 35%, transparent);
    background: color-mix(in srgb, currentColor 5%, transparent);
}

.kpg-aicpc__callout > p {
    max-width: var(--kpg-aicpc-measure);
}

.kpg-aicpc__callout > p:first-child {
    margin-block-start: 0;
}

.kpg-aicpc__callout > p:last-child {
    margin-block-end: 0;
}

/* The three variants differ in weight of the edge, not in hue - the hue is not ours to pick. */
.kpg-aicpc__callout--important {
    border-inline-start-width: 5px;
    border-inline-start-color: color-mix(in srgb, currentColor 60%, transparent);
}

.kpg-aicpc__callout--note {
    border-inline-start-style: dashed;
    background: none;
}

/* A quotation: an indent and an edge, so it reads as set apart even with no style rules. */
.kpg-aicpc__quote {
    margin-block: var(--kpg-aicpc-gap);
    margin-inline: 0;
    padding-inline-start: var(--kpg-aicpc-pad);
    border-inline-start: 2px solid currentColor;
    border-inline-start-color: color-mix(in srgb, currentColor 25%, transparent);
}

.kpg-aicpc__quote > p {
    max-width: var(--kpg-aicpc-measure);
}

/*
 * A proposal, in the editor only. The renderer emits this wrapper for a block that is still
 * `proposed`, and it is worth seeing at a glance which parts of the element are not yet
 * reviewed - so it gets a dashed edge and the note underneath gets a little air.
 */
.kpg-aicpc__proposed {
    margin-block: var(--kpg-aicpc-gap-s);
    padding-inline-start: var(--kpg-aicpc-gap-s);
    border-inline-start: 2px dashed currentColor;
    border-inline-start-color: color-mix(in srgb, currentColor 30%, transparent);
}

.kpg-aicpc__proposed-note,
.kpg-aicpc__draft-note {
    margin-block-start: .25rem;
}

.kpg-aicpc__disclosure {
    display: block;
    margin-block-start: var(--kpg-aicpc-gap-s);
    padding-block-start: .5rem;
    border-block-start: 1px solid currentColor;
    border-block-start-color: color-mix(in srgb, currentColor 12%, transparent);
    max-width: var(--kpg-aicpc-measure);
}

/* reference list (section 9.6) - grid, spacing, and an edge derived from the text colour */
.kpg-aicpc__refs {
    display: block;
    margin-block-start: var(--kpg-aicpc-gap);
    padding-inline-start: 0;
    list-style: none;
}

.kpg-aicpc__refs > li {
    display: flex;
    gap: .5rem;
    align-items: baseline;
    margin-block-end: .5rem;
}

.kpg-aicpc__refs--tiles {
    display: grid;
    gap: var(--kpg-aicpc-gap-s);
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.kpg-aicpc__refs--tiles > li {
    display: block;
    margin-block-end: 0;
    padding: var(--kpg-aicpc-gap-s);
    border: 1px solid currentColor;
    border-color: color-mix(in srgb, currentColor 15%, transparent);
    border-radius: 4px;
}

.kpg-aicpc__ref-icon {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    object-fit: contain;
}