/*
 * The film sheet's sections, folded into an accordion on the phone.
 *
 * The design draws the same sheet twice. On the desktop every section is a row
 * of two columns —the heading on the left, the content on the right— and on the
 * phone it is a stack of accordions: a full-width heading with a caret, and the
 * content underneath only once it has been opened.
 *
 * Same sheet and same markup for both: everything here lives inside one media
 * query, so above the phone breakpoint the page is served exactly as it was
 * before this file existed. Nothing is duplicated, nothing is hidden, and a
 * change to the sheet is still made once.
 *
 * The item of the accordion is the section container itself, which already
 * carries `testaferro-section` or `testaferro-group` — the very classes the
 * empty-section rules in filmmaker-lists.css hang off. So a section with
 * nothing to show still takes its own accordion heading down with it, and that
 * mechanism needed no changes at all.
 *
 * The file is in two halves, and the split matters. The first is the phone
 * layout, which applies whatever happens: the heading at full width, the rule
 * above it, the laurels in a column. The second is the folding, and every
 * selector in it hangs off `.testaferro-js` — the class the plugin writes on the
 * document before anything paints. With no JavaScript nothing folds, no caret
 * is drawn and the whole sheet stays readable and honest, which is the right
 * way round: a section folded shut with no script to open it is content nobody
 * can reach, and a caret that does not answer is worse than no caret.
 *
 * And the folded state is written here rather than in a class the script adds,
 * so the sheet is already folded at the first paint. The script only ever adds
 * `data-open`, the ARIA and the click.
 */

@media (max-width: 767px) {

	/* ---- The phone layout, script or no script ---- */

	/*
	 * Elementor lays these sections out as rows whose first column is 60% wide,
	 * and it writes that width with no media query of its own, so the phone
	 * inherits it. Both have to go for the heading to reach the full width the
	 * design gives it.
	 *
	 * The extra `.e-con` in the selector is not decoration: without it this ties
	 * with Elementor's own `.elementor-283 .elementor-element.elementor-element-*`
	 * on specificity, and which one wins comes down to the order the stylesheets
	 * happen to be enqueued in.
	 */
	.single-film .elementor-location-single > .e-con:is( .testaferro-section, .testaferro-group ) {
		--flex-direction: column;
		--padding-top: 0px;
		--padding-bottom: 0px;
		position: relative;
		gap: 0;
	}

	.single-film
		.elementor-location-single
		> .e-con:is( .testaferro-section, .testaferro-group )
		> .e-con {
		--width: 100%;
	}

	/*
	 * The rule of the design sits on the heading rather than on the section,
	 * because the section runs edge to edge and the heading is already inset by
	 * its padding — which is exactly where the design draws the line, level with
	 * the text.
	 */
	.single-film
		.elementor-location-single
		> .e-con:is( .testaferro-section, .testaferro-group )
		.elementor-widget-heading {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		width: 100%;
		padding: 0.6em 0;
		border-top: 1px solid var( --e-global-color-text, currentColor );
	}

	/*
	 * The last section closes the stack with a rule of its own — the one the
	 * others get for free from the heading below them.
	 *
	 * It is inset with Elementor's own padding variable rather than a number, so
	 * it stays level with the headings if that padding is ever changed from the
	 * panel.
	 */
	.single-film
		.elementor-location-single
		> .e-con:is( .testaferro-section, .testaferro-group ):last-child::after {
		content: "";
		position: absolute;
		right: var( --padding-right, 0 );
		bottom: 0;
		left: var( --padding-left, 0 );
		height: 1px;
		background: var( --e-global-color-text, currentColor );
	}

	/*
	 * The laurels are a row on every other screen of the design; here they are a
	 * column, left aligned and drawn bigger, which is the one place the phone
	 * lays the same list out differently.
	 */
	.testaferro-laurels {
		--testaferro-laurel-height: 56px;

		flex-direction: column;
		align-items: flex-start;
		gap: 2rem;
	}

	/*
	 * And the design parts the two lists of «Festivales» with a rule, which the
	 * desktop does not draw.
	 *
	 * Asking for both lists at once is what keeps it honest: a film with laurels
	 * and no selections, or selections and no laurels, gets no rule at all
	 * rather than one hanging under the heading with nothing above it.
	 */
	.elementor-widget:has( .testaferro-laurels )
		+ .elementor-widget:has( .testaferro-selections ) {
		padding-top: 2rem;
		border-top: 1px solid var( --e-global-color-text, currentColor );
	}

	/* ---- The folding, only where there is a script to undo it ---- */

	.testaferro-js
		.single-film
		.elementor-location-single
		> .e-con:is( .testaferro-section, .testaferro-group )
		.elementor-widget-heading {
		cursor: pointer;
	}

	/*
	 * The caret. It is drawn rather than loaded so it takes the colour of the
	 * heading, whatever the kit decides that is, and costs no request.
	 */
	.testaferro-js
		.single-film
		.elementor-location-single
		> .e-con:is( .testaferro-section, .testaferro-group )
		.elementor-widget-heading::after {
		content: "";
		flex: none;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0.4em 0 0.4em 0.62em;
		border-color: transparent transparent transparent currentColor;
		transition: transform 0.2s ease;
	}

	.testaferro-js
		.single-film
		.elementor-location-single
		> .e-con[data-open]:is( .testaferro-section, .testaferro-group )
		.elementor-widget-heading::after {
		transform: rotate( 90deg );
	}

	/*
	 * Folded means: every widget but the heading, gone. Written as «not the
	 * heading» rather than as a list of the shortcodes because the sections are
	 * not made of the same things — Festivales keeps its laurels in the same
	 * column as its own heading, and those have to fold away too.
	 */
	.testaferro-js
		.single-film
		.elementor-location-single
		> .e-con:is( .testaferro-section, .testaferro-group ):not( [data-open] )
		.elementor-widget:not( .elementor-widget-heading ) {
		display: none;
	}

	/*
	 * And the column that is left holding none of them goes with it, or its own
	 * padding would leave a gap under the heading that looks like a mistake.
	 */
	.testaferro-js
		.single-film
		.elementor-location-single
		> .e-con:is( .testaferro-section, .testaferro-group ):not( [data-open] )
		> .e-con:not( :has( .elementor-widget-heading ) ) {
		display: none;
	}

	/*
	 * Room between the heading and what it opens, and between that and the next
	 * heading's rule.
	 */
	.testaferro-js
		.single-film
		.elementor-location-single
		> .e-con[data-open]:is( .testaferro-section, .testaferro-group )
		> .e-con {
		padding-bottom: 1.5rem;
	}
}