/* Stacked film cards: image first, then the complete editable film information. */
.abbpf.abbpf-film-layout-stacked .af-event-with-image > .af-event-main,
.abbpf.abbpf-film-layout-stacked .af-film-with-image,
.abbpf.abbpf-film-layout-stacked .af-film-page-with-image {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:var(--af-gap);
    align-items:start;
}

.abbpf.abbpf-film-layout-stacked .af-event-with-image > .af-event-main > .af-event-image,
.abbpf.abbpf-film-layout-stacked .af-film-with-image > .af-film-image,
.abbpf.abbpf-film-layout-stacked .af-film-page-with-image > .af-film-image {
    grid-column:1;
    width:100%;
    max-width:none;
    margin:0;
}

.abbpf.abbpf-film-layout-stacked .af-event-with-image > .af-event-main > .af-event-body,
.abbpf.abbpf-film-layout-stacked .af-film-with-image > .af-film-copy,
.abbpf.abbpf-film-layout-stacked .af-film-page-with-image > .af-film-copy {
    grid-column:1;
    min-width:0;
    width:100%;
    margin:0;
}

.abbpf.abbpf-film-layout-stacked .af-event-with-image > .af-event-main > .af-event-body {
    display:block;
}

/* The optional separate technical panel also follows the picture and synopsis. */
.abbpf.abbpf-film-layout-stacked .af-event-with-image > .af-event-main > .af-film-info,
.abbpf.abbpf-film-layout-stacked .af-film-with-image > .af-film-info {
    grid-column:1;
    min-width:0;
    margin:0;
    padding:var(--af-gap) 0 0;
    border-left:0;
    border-top:var(--af-border) solid var(--af-line);
}

/* A chosen two-column layout remains two columns; the default three gives two rows for six films. */
.abbpf.abbpf-film-layout-stacked .af-films-columns {
    grid-template-columns:repeat(var(--af-short-columns),minmax(0,1fr));
    gap:var(--af-gap);
    align-items:start;
}

@container(min-width:761px) and (max-width:1100px) {
    .abbpf.abbpf-film-layout-stacked .af-films-columns {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@container(max-width:760px) {
    .abbpf.abbpf-film-layout-stacked .af-films-columns {
        grid-template-columns:minmax(0,1fr);
        gap:0;
    }
    .abbpf.abbpf-film-layout-stacked.abbpf-mobile-edge .af-event-with-image > .af-event-main > .af-event-image,
    .abbpf.abbpf-film-layout-stacked.abbpf-mobile-edge .af-film-with-image > .af-film-image,
    .abbpf.abbpf-film-layout-stacked.abbpf-mobile-edge .af-film-page-with-image > .af-film-image {
        width:calc(100% + 2 * var(--af-mobile-inset));
        margin-inline:calc(-1 * var(--af-mobile-inset));
    }
}

/* Feature films keep a modest side image and give the synopsis its own readable column. */
.abbpf .af-feature-editorial.af-event-with-image > .af-event-main,
.abbpf .af-film.af-feature-editorial.af-film-with-image,
.abbpf .af-film-page-body.af-feature-editorial.af-film-page-with-image {
    display:grid;
    grid-template-columns:min(var(--af-image-width),35%) minmax(0,1fr);
    gap:var(--af-gap);
    align-items:start;
}

.abbpf .af-feature-editorial.af-event-with-image > .af-event-main > .af-event-image,
.abbpf .af-film.af-feature-editorial.af-film-with-image > .af-film-image,
.abbpf .af-film-page-body.af-feature-editorial.af-film-page-with-image > .af-film-image {
    grid-column:1;
    grid-row:1;
    width:100%;
    max-width:none;
    margin:0;
}

.abbpf .af-feature-editorial.af-event-with-image > .af-event-main > .af-event-body,
.abbpf .af-film.af-feature-editorial.af-film-with-image > .af-film-copy,
.abbpf .af-film-page-body.af-feature-editorial.af-film-page-with-image > .af-film-copy {
    grid-column:2;
    grid-row:1;
    width:100%;
    min-width:0;
    margin:0;
}

.abbpf .af-feature-editorial > .af-event-main > .af-event-body {display:block;min-width:0}
.abbpf .af-feature-editorial .af-feature-copy {
    display:grid;
    grid-template-columns:minmax(0,2fr) minmax(0,3fr);
    gap:var(--af-gap);
    align-items:start;
}
.abbpf .af-feature-heading,
.abbpf .af-feature-prose {min-width:0}
.abbpf .af-feature-heading > h1,
.abbpf .af-feature-heading > h3,
.abbpf .af-feature-heading > h4,
.abbpf .af-feature-heading > .af-tags,
.abbpf .af-feature-heading > .af-credits,
.abbpf .af-feature-heading > .af-guests,
.abbpf .af-feature-heading > .af-venue {text-align:var(--af-heading-align,left)}
.abbpf .af-feature-heading > .af-venue {justify-content:var(--af-meta-justify,flex-start)}
.abbpf .af-feature-heading > .af-tags {margin:10px 0}
.abbpf .af-feature-prose > :first-child,
.abbpf .af-feature-prose > :first-child > .af-details {margin-top:0}
.abbpf .af-feature-prose > .af-details:first-child > div,
.abbpf .af-feature-prose > :first-child > .af-details > div {padding-top:0}
.abbpf .af-feature-prose > .af-details {max-width:none}

/* User-selected programme columns have less room for a second text column. */
.abbpf.abbpf-cards .af-feature-editorial .af-feature-copy,
.abbpf .af-films-columns .af-feature-editorial .af-feature-copy {grid-template-columns:minmax(0,1fr)}

@container(max-width:1100px) {
    .abbpf .af-feature-editorial .af-feature-copy {grid-template-columns:minmax(0,1fr)}
}
@container(max-width:760px) {
    .abbpf .af-feature-editorial.af-event-with-image > .af-event-main,
    .abbpf .af-film.af-feature-editorial.af-film-with-image,
    .abbpf .af-film-page-body.af-feature-editorial.af-film-page-with-image {grid-template-columns:minmax(0,1fr)}
    .abbpf .af-feature-editorial.af-event-with-image > .af-event-main > .af-event-image,
    .abbpf .af-film.af-feature-editorial.af-film-with-image > .af-film-image,
    .abbpf .af-film-page-body.af-feature-editorial.af-film-page-with-image > .af-film-image,
    .abbpf .af-feature-editorial.af-event-with-image > .af-event-main > .af-event-body,
    .abbpf .af-film.af-feature-editorial.af-film-with-image > .af-film-copy,
    .abbpf .af-film-page-body.af-feature-editorial.af-film-page-with-image > .af-film-copy {
        grid-column:1;
        grid-row:auto;
    }
    .abbpf.abbpf-mobile-edge .af-feature-editorial.af-event-with-image > .af-event-main > .af-event-image,
    .abbpf.abbpf-mobile-edge .af-film.af-feature-editorial.af-film-with-image > .af-film-image,
    .abbpf.abbpf-mobile-edge .af-film-page-body.af-feature-editorial.af-film-page-with-image > .af-film-image {
        width:calc(100% + 2 * var(--af-mobile-inset));
        margin-inline:calc(-1 * var(--af-mobile-inset));
    }
}
