/* ==========================================================================
   BS Supported By Data Block
   ========================================================================== */

.bs-sbd {
	width: 100%;
	box-sizing: border-box;
}

.bs-sbd.alignfull {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Separator
   ========================================================================== */
.bs-sbd__separator {
	width: 100%;
	height: 1px;
	background-color: #cccccc;
}

/* Inner
   ========================================================================== */
.bs-sbd__inner {
	padding: 48px 0px 64px;
}

/* Two-column layout
   ========================================================================== */
.bs-sbd__layout {
	display: flex;
	align-items: flex-start;
}

/* Left — Title (30%)
   ========================================================================== */
.bs-sbd__left {
	flex: 0 0 15%;
	padding-right: 48px;
	box-sizing: border-box;
}

.bs-sbd__title {
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
	outline: none;
	box-sizing: border-box;
	font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
	font-size: 28px;
	line-height: 30px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--black-text);
}

/* Right — Description + Table (70%)
   ========================================================================== */
.bs-sbd__right {
	flex: 0 0 85%;
	min-width: 0;
}

.bs-sbd__description {
        margin-right: 50%;
	margin-bottom: 40px;
	line-height: 1.7;
	color: #333333;
        font-size: 12px;
        font-weight: 500;
}

.bs-sbd__description p {
	margin: 0 0 0.75em;
}

.bs-sbd__description p:last-child {
	margin-bottom: 0;
}

/* Table
   ========================================================================== */
.bs-sbd__table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.bs-sbd__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.8125rem;
	color: #1a1a1a;
}

/* Table head */
.bs-sbd__table thead tr {
	border-top: 1px solid #1a1a1a;
	border-bottom: 1px solid #1a1a1a;
}

.bs-sbd__table thead th {
	padding: 10px 24px 10px 0;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #1a1a1a;
	text-align: left;
	white-space: nowrap;
}

.bs-sbd__table thead th:first-child {
	padding-left: 0;
}

/* Table body */
.bs-sbd__table tbody tr {
	border-bottom: 1px solid #d0d0d0;
}

.bs-sbd__table tbody td {
	padding: 10px 24px 10px 0;
	color: #333333;
}

.bs-sbd__table tbody td:first-child {
	padding-left: 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
	.bs-sbd__layout {
		flex-direction: column;
	}

	.bs-sbd__left {
		flex: none;
		width: 100%;
		padding-right: 0;
	}

	.bs-sbd__right {
		flex: none;
		width: 100%;
	}

	.bs-sbd__inner {
		padding: 32px 24px 48px;
	}
}

@media (max-width: 480px) {
	.bs-sbd__inner {
		padding: 24px 16px 40px;<?php
/**
 * ACF Block Template: BS Supported By Data
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

$bg_color    = get_field( 'sbd_bg_color' ) ?: '#ffffff';
$title       = get_field( 'sbd_title' ) ?: 'Supported by Data';
$description = get_field( 'sbd_description' ) ?: '';

$block_id      = ! empty( $block['anchor'] ) ? $block['anchor'] : ( 'bs-sbd-' . $block['id'] );
$align_class   = ! empty( $block['align'] ) ? 'align' . $block['align'] : 'alignfull';
$extra_classes = ! empty( $block['className'] ) ? ' ' . esc_attr( $block['className'] ) : '';

// Collect column headers and their cell values
$columns_data = array();
if ( have_rows( 'sbd_columns' ) ) :
	while ( have_rows( 'sbd_columns' ) ) : the_row();
		$cells = array();
		if ( have_rows( 'sbd_cells' ) ) :
			while ( have_rows( 'sbd_cells' ) ) : the_row();
				$cells[] = get_sub_field( 'sbd_cell_value' );
			endwhile;
		endif;
		$columns_data[] = array(
			'header' => get_sub_field( 'sbd_col_header' ),
			'cells'  => $cells,
		);
	endwhile;
endif;

// How many rows to render
$row_count = 0;
foreach ( $columns_data as $col ) {
	$row_count = max( $row_count, count( $col['cells'] ) );
}
?>
<section
	id="<?php echo esc_attr( $block_id ); ?>"
	class="bs-sbd <?php echo esc_attr( $align_class . $extra_classes ); ?>"
	style="background-color: <?php echo esc_attr( $bg_color ); ?>;"
>
	<div class="container">
		<div class="bs-sbd__separator" aria-hidden="true"></div>

		<div class="bs-sbd__inner">
			<div class="bs-sbd__layout">

				<div class="bs-sbd__left">
					<h2 class="bs-sbd__title"><?php echo esc_html( $title ); ?></h2>
				</div>

				<div class="bs-sbd__right">

					<?php if ( $description ) : ?>
						<div class="bs-sbd__description"><?php echo wp_kses_post( $description ); ?></div>
					<?php endif; ?>

					<?php if ( ! empty( $columns_data ) ) : ?>
						<div class="bs-sbd__table-wrap">
							<table class="bs-sbd__table">

								<thead>
									<tr>
										<?php foreach ( $columns_data as $col ) : ?>
											<th scope="col"><?php echo esc_html( $col['header'] ); ?></th>
										<?php endforeach; ?>
									</tr>
								</thead>

								<?php if ( $row_count > 0 ) : ?>
									<tbody>
										<?php for ( $i = 0; $i < $row_count; $i++ ) : ?>
											<tr>
												<?php foreach ( $columns_data as $col ) : ?>
													<td><?php echo esc_html( isset( $col['cells'][ $i ] ) ? $col['cells'][ $i ] : '' ); ?></td>
												<?php endforeach; ?>
											</tr>
										<?php endfor; ?>
									</tbody>
								<?php endif; ?>

							</table>
						</div>
					<?php endif; ?>

				</div><!-- .bs-sbd__right -->

			</div><!-- .bs-sbd__layout -->
		</div><!-- .bs-sbd__inner -->
	</div><!-- .container -->
</section><!-- .bs-sbd -->

	}
}