/**
 * Common styles for cdaf/download
 * 
 * @since 2025-11-24
 * @author Designs and Codes, LLC
 */

.wp-block-cdaf-download-list__inner,
.wp-block-cdaf-download,
.wp-block-cdaf-download-header,
.wp-block-cdaf-download-footer {
	display: flex;
	align-items: stretch;
	justify-content: start;
}

.wp-block-cdaf-download-list__inner {
	--cdaf-download__inline-size: 100%;
	flex-flow: row wrap;
	gap: var( --fluffle-flexbox__gap-v ) var( --fluffle-flexbox__gap-h );
}

.wp-block-cdaf-download,
.wp-block-cdaf-download-header,
.wp-block-cdaf-download-footer {
	flex-flow: column nowrap;
}

:is( .wp-block-cdaf-download-list__inner, .wp-block-cdaf-download, .wp-block-cdaf-download-header, .wp-block-cdaf-download-footer ) > * {
	margin: 0 !important;
}

.wp-block-cdaf-download.wp-block-cdaf-download,
.wp-block-cdaf-download-spacer.wp-block-cdaf-download-spacer {
	max-inline-size: var( --cdaf-download__inline-size, 100% );
	inline-size: 360px;
}

.wp-block-cdaf-download {
	--cdaf-download__image-padding: 1.0rem;
	--cdaf-download__image-size: 5.0rem;
	
	gap: var( --fluffle-para__spacing-v );
	margin-block: var( --fluffle-block__spacing-v, 1.5rem );
	margin-inline: 0;
	border: 2px solid var( --wp--preset--color--accent-1 );
	padding-block: var( --fluffle-para__spacing-v );
	padding-inline: calc( var( --fluffle-flexbox__gap-h ) / 2 );
	background-color: var( --wp--preset--color--accent-0 );
}

.wp-block-cdaf-download-header,
.wp-block-cdaf-download-footer {
	gap: var( --fluffle-line__spacing-v );
}

.wp-block-cdaf-download-header {
	grid-template-columns: 100%;
}

.wp-block-cdaf-download-header__icon-wrap {
	grid-row: 1;
}

.wp-block-cdaf-download-header__text {
	grid-row: 2;
}

.wp-block-cdaf-download-description {
	flex: 1 0 auto;
	grid-row: 3;
}

.wp-block-cdaf-download-footer {
	grid-row: 4;
}

.wp-block-cdaf-download-buttons {
	display: flex;
	flex-flow: row wrap;
	gap: 1rem;
	inline-size: 100%;
}

.wp-block-cdaf-download-buttons.wp-block-buttons > .wp-block-button > .wp-block-button__link {
	border-radius: 1px;
}

.wp-block-cdaf-download-footnote {
	font-size: 0.9em;
}

@media( min-width: 640px ) {
	.wp-block-cdaf-download-list {
		--cdaf-download__inline-size: calc( ( 100% - var( --fluffle-flexbox__gap-h ) ) / 2 );
	}
}

@media( min-width: 990px ) {
	.wp-block-cdaf-download-list {
		--cdaf-download__inline-size: calc( ( 100% - 2 * var( --fluffle-flexbox__gap-h ) ) / 3 );
	}
}

@supports ( container-type: inline-size ) {
	.wp-block-cdaf-download-list {
		container: cdaf-download-list / inline-size;
	}
	
	.wp-block-cdaf-download-list__inner {
		--cdaf-download__inline-size: 100%;
	}
	
	@container cdaf-download-list ( min-width: 640px ) {
		.wp-block-cdaf-download-list__inner {
			--cdaf-download__inline-size: calc( ( 100% - var( --fluffle-flexbox__gap-h ) ) / 2 );
		}
	}
	
	@container cdaf-download-list ( min-width: 990px ) {
		.wp-block-cdaf-download-list__inner {
			--cdaf-download__inline-size: calc( ( 100% - 2 * var( --fluffle-flexbox__gap-h ) ) / 3 );
		}
	}
}

@supports( grid-template-rows: subgrid ) {
	.wp-block-cdaf-download-list__inner {
		--cdaf-download__inline-size: 100%;
		display: grid;
		grid-template-columns: min( 100%, 360px );
		grid-template-rows: repeat( 4, auto );
		grid-auto-rows: auto auto auto auto;
	}
	
	.wp-block-cdaf-download-list__inner > * {
		grid-row: span 4;
	}
	
	:where( .wp-block-cdaf-download-list__inner ) > * > .wp-block-cdaf-download-header {
		grid-row: 1 / span 2;
	}
	
	:where( .wp-block-cdaf-download-list__inner ) > .wp-block-cdaf-download,
	:where( .wp-block-cdaf-download-list__inner ) > * > .wp-block-cdaf-download-header {
		display: grid;
		grid-template-rows: subgrid;
	}
	
	@media( min-width: 640px ) {
		.wp-block-cdaf-download-list__inner {
			grid-template-columns: repeat( 2, min( ( ( 100% - var( --fluffle-flexbox__gap-h ) ) / 2 ), 360px ) );
		}
	}
	
	@media( min-width: 990px ) {
		.wp-block-cdaf-download-list__inner {
			grid-template-columns: repeat( 3, min( ( ( 100% - 2 * var( --fluffle-flexbox__gap-h ) ) / 3 ), 360px ) );
		}
	}
	
	@supports ( container-type: inline-size ) {
		.wp-block-cdaf-download-list__inner {
			grid-template-columns: min( 100%, 360px );
		}
		
		@media( min-width: 640px ) {
			.wp-block-cdaf-download-list__inner {
				grid-template-columns: repeat( 2, min( ( ( 100% - var( --fluffle-flexbox__gap-h ) ) / 2 ), 360px ) );
			}
		}
		
		@media( min-width: 990px ) {
			.wp-block-cdaf-download-list__inner {
				grid-template-columns: repeat( 3, min( ( ( 100% - 2 * var( --fluffle-flexbox__gap-h ) ) / 3 ), 360px ) );
			}
		}
	}
}