/**
 * Block-specific styles
 * Frontend styling for standard WP Gutenberg blocks
 *
 * @package SDC_Theme
 * @since 0.1.0
 */

/* ==========================================================================
   CONTENT SECTION CONTAINER
   ========================================================================== */

.sdc-content-section {
	padding: var(--space-8xl) var(--site-padding);
	background-color: var(--color-white);
}

.sdc-content-section > * {
	margin-block-start: 0;
	margin-block-end: var(--space-4xl);
}

.sdc-content-section > *:last-child {
	margin-block-end: 0;
}

/* ==========================================================================
   VIDEO BLOCK
   Full width video with rounded corners
   ========================================================================== */

.sdc-video-block {
	margin-block-end: var(--space-4xl);
}

.sdc-video-block .wp-block-embed__wrapper {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background-color: var(--color-muted);
}

.sdc-video-block .wp-block-embed__wrapper iframe,
.sdc-video-block .wp-block-embed__wrapper > * {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: var(--radius-lg);
}

/* ==========================================================================
   TWO COLUMN TEXT
   Side-by-side paragraphs
   ========================================================================== */

.sdc-two-column-text {
	gap: var(--space-4xl);
	margin-block-end: var(--space-4xl);
}

.sdc-two-column-text .wp-block-column > p {
	font-family: var(--font-primary);
	font-size: var(--text-body);
	font-weight: var(--font-weight-regular);
	line-height: var(--leading-loose);
	letter-spacing: var(--tracking-normal);
	color: var(--color-contrast);
	margin: 0;
}

@media (max-width: 768px) {
	.sdc-two-column-text {
		gap: var(--space-xl);
	}
}

/* ==========================================================================
   BULLETED LIST
   Unordered list with custom styling
   ========================================================================== */

.sdc-bulleted-list {
	list-style: none;
	padding-left: 0;
	margin-block-end: var(--space-4xl);
}

.sdc-bulleted-list li {
	position: relative;
	padding-left: calc(24px + var(--space-md));
	margin-block-end: var(--space-md);
	font-family: var(--font-primary);
	font-size: var(--text-body);
	font-weight: var(--font-weight-regular);
	line-height: var(--leading-loose);
	color: var(--color-contrast);
}

.sdc-bulleted-list li::before {
	content: "●";
	position: absolute;
	left: 0;
	top: 0;
	font-size: var(--bullet-size);
	line-height: var(--leading-loose);
	color: var(--color-primary);
	flex-shrink: 0;
}

.sdc-bulleted-list li:last-child {
	margin-block-end: 0;
}

/* ==========================================================================
   FULL IMAGE WITH CAPTION
   ========================================================================== */

.sdc-full-image-with-caption {
	margin-block-end: var(--space-4xl);
}

.sdc-full-image-with-caption img {
	border-radius: var(--radius-lg);
	display: block;
	width: 100%;
}

.sdc-full-image-with-caption figcaption {
	font-family: var(--font-primary);
	font-size: var(--text-label);
	font-weight: var(--font-weight-regular);
	line-height: var(--leading-normal);
	color: var(--color-contrast);
	margin-top: var(--space-md);
	text-align: left;
}

/* ==========================================================================
   HEADINGS
   H2 with icon, H3-H6 styles
   ========================================================================== */

/* Emphasized H2 with sound wave icon */
.sdc-heading-emphasized {
	display: flex;
	align-items: center;
	gap: var(--heading-icon-gap);
	font-family: var(--font-primary);
	font-size: var(--text-h2);
	font-weight: var(--font-weight-bold);
	line-height: var(--leading-normal);
	letter-spacing: var(--tracking-normal);
	color: var(--color-accent);
	margin-block-start: var(--space-4xl);
	margin-block-end: var(--space-xl);
}

.sdc-heading-emphasized::before {
	content: "";
	display: inline-block;
	width: 56px;
	height: 44px;
	background-color: var(--color-accent);
	mask-image: url("../images/sound-wave-icon.svg");
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-image: url("../images/sound-wave-icon.svg");
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	flex-shrink: 0;
}

@media (max-width: 1024px) {
	.sdc-heading-emphasized {
		font-size: clamp(32px, 5vw, var(--text-h2));
	}
}

@media (max-width: 768px) {
	.sdc-heading-emphasized {
		font-size: clamp(28px, 8vw, 32px);
		gap: var(--space-md);
	}

	.sdc-heading-emphasized::before {
		width: 40px;
		height: 32px;
	}
}

/* H3 */
.sdc-heading-h3,
.wp-block-heading.sdc-heading-h3 {
	font-family: var(--font-primary);
	font-size: var(--text-h3);
	font-weight: var(--font-weight-bold);
	line-height: var(--leading-normal);
	letter-spacing: var(--tracking-normal);
	color: var(--color-contrast);
	margin-block-start: var(--space-2xl);
	margin-block-end: var(--space-md);
}

/* H4 */
.sdc-heading-h4,
.wp-block-heading.sdc-heading-h4 {
	font-family: var(--font-primary);
	font-size: var(--text-h4);
	font-weight: var(--font-weight-bold);
	line-height: var(--leading-normal);
	letter-spacing: var(--tracking-normal);
	color: var(--color-contrast);
	margin-block-start: var(--space-xl);
	margin-block-end: var(--space-md);
}

/* H5 */
.sdc-heading-h5,
.wp-block-heading.sdc-heading-h5 {
	font-family: var(--font-primary);
	font-size: var(--text-h5);
	font-weight: var(--font-weight-bold);
	line-height: var(--leading-normal);
	letter-spacing: var(--tracking-normal);
	color: var(--color-contrast);
	margin-block-start: var(--space-xl);
	margin-block-end: var(--space-sm);
}

/* H6 */
.sdc-heading-h6,
.wp-block-heading.sdc-heading-h6 {
	font-family: var(--font-primary);
	font-size: var(--text-h6);
	font-weight: var(--font-weight-demi-bold);
	font-style: var(--font-style-normal);
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-contrast);
	margin-block-start: var(--space-xl);
	margin-block-end: var(--space-sm);
}

/* ==========================================================================
   FULL TEXT (PARAGRAPH)
   ========================================================================== */

.sdc-full-text {
	font-family: var(--font-primary);
	font-size: var(--text-body);
	font-weight: var(--font-weight-regular);
	line-height: var(--leading-loose);
	letter-spacing: var(--tracking-normal);
	color: var(--color-contrast);
	margin-block-end: var(--space-4xl);
}

/* ==========================================================================
   ORDERED LIST
   Numbered list with custom styling - plain numbers per Figma
   ========================================================================== */

.sdc-ordered-list {
	list-style: none;
	padding-left: 0;
	margin-block-end: var(--space-4xl);
	counter-reset: ordered-list;
}

.sdc-ordered-list li {
	position: relative;
	padding-left: calc(var(--space-md) + 1.5em);
	margin-block-end: var(--space-md);
	font-family: var(--font-primary);
	font-size: var(--text-body);
	font-weight: var(--font-weight-regular);
	line-height: var(--leading-loose);
	color: var(--color-contrast);
}

.sdc-ordered-list li::before {
	counter-increment: ordered-list;
	content: counter(ordered-list) ".";
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--font-primary);
	font-size: var(--text-body);
	font-weight: var(--font-weight-bold);
	line-height: var(--leading-loose);
	color: var(--color-secondary);
	min-width: 1.5em;
	text-align: left;
}

.sdc-ordered-list li:last-child {
	margin-block-end: 0;
}

/* ==========================================================================
   IMAGE LEFT/RIGHT (MEDIA & TEXT)
   ========================================================================== */

.sdc-image-left-text-right,
.sdc-image-right-text-left {
	margin-block-end: var(--space-4xl);
	gap: var(--space-4xl);
}

.sdc-image-left-text-right .wp-block-media-text__media,
.sdc-image-right-text-left .wp-block-media-text__media {
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.sdc-image-left-text-right .wp-block-media-text__media img,
.sdc-image-right-text-left .wp-block-media-text__media img {
	border-radius: var(--radius-lg);
	display: block;
}

.sdc-image-left-text-right .wp-block-media-text__content p,
.sdc-image-right-text-left .wp-block-media-text__content p {
	font-family: var(--font-primary);
	font-size: var(--text-body);
	font-weight: var(--font-weight-regular);
	line-height: var(--leading-loose);
	color: var(--color-contrast);
	margin: 0;
}

@media (max-width: 768px) {
	.sdc-image-left-text-right,
	.sdc-image-right-text-left {
		gap: var(--space-xl);
	}
}

/* ==========================================================================
   FILE DOWNLOAD
   ========================================================================== */

.sdc-file-text {
	font-family: var(--font-primary);
	font-size: var(--text-body);
	font-weight: var(--font-weight-regular);
	line-height: var(--leading-loose);
	color: var(--color-contrast);
	margin-block-end: var(--space-md);
}

.sdc-file-download {
	margin-block-end: var(--space-4xl);
}

.sdc-file-download .wp-block-file__button {
	display: inline-flex;
	align-items: center;
	gap: var(--button-gap);
	padding: var(--space-md) var(--space-lg);
	font-family: var(--font-primary);
	font-size: var(--text-button-sm);
	font-weight: var(--font-weight-bold);
	line-height: var(--leading-tight);
	background-color: var(--color-secondary);
	color: var(--color-white);
	border-radius: var(--radius-md);
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: all 0.2s ease;
}

.sdc-file-download .wp-block-file__button:hover {
	filter: brightness(1.1);
}

/* ==========================================================================
   CODE BLOCK
   ========================================================================== */

.sdc-code-block {
	background-color: var(--color-muted);
	border-radius: var(--radius-lg);
	padding: var(--space-xl);
	margin-block-end: var(--space-4xl);
}

.sdc-code-block code {
	font-family: var(--font-code);
	font-size: var(--text-code);
	font-weight: var(--font-weight-regular);
	line-height: var(--leading-normal);
	letter-spacing: var(--tracking-normal);
	color: var(--color-contrast);
	background: transparent;
	padding: 0;
	white-space: pre-wrap;
}

/* ==========================================================================
   AUDIO BLOCK
   ========================================================================== */

.sdc-audio-block {
	margin-block-end: var(--space-4xl);
}

.sdc-audio-block figcaption {
	font-family: var(--font-primary);
	font-size: var(--text-label);
	font-weight: var(--font-weight-medium);
	line-height: var(--leading-normal);
	color: var(--color-contrast);
	margin-bottom: var(--space-sm);
}

.sdc-audio-block audio {
	width: 100%;
	border-radius: var(--radius-md);
}

/* ==========================================================================
   TABLE BLOCK
   ========================================================================== */

.sdc-table-block {
	margin-block-end: var(--space-4xl);
}

.sdc-table-block table {
	width: 100%;
	background-color: var(--color-muted);
	border-radius: var(--radius-lg);
	overflow: hidden;
	border-collapse: collapse;
}

.sdc-table-block th,
.sdc-table-block td {
	padding: var(--space-md) var(--space-lg);
	font-family: var(--font-primary);
	font-size: var(--text-body);
	font-weight: var(--font-weight-regular);
	line-height: var(--leading-normal);
	color: var(--color-contrast);
	text-align: left;
	border-bottom: 1px solid var(--color-white);
}

.sdc-table-block th {
	font-weight: var(--font-weight-bold);
	background-color: transparent;
}

.sdc-table-block tr:last-child th,
.sdc-table-block tr:last-child td {
	border-bottom: none;
}

.sdc-table-block figcaption {
	font-family: var(--font-primary);
	font-size: var(--text-label);
	font-weight: var(--font-weight-regular);
	line-height: var(--leading-normal);
	color: var(--color-contrast);
	margin-top: var(--space-md);
	text-align: left;
}

/* ==========================================================================
   SEPARATOR (HR)
   Dots style: ●●●●●●●●●●
   ========================================================================== */

.sdc-separator-block {
	border: none;
	margin-block: var(--space-4xl);
	width: 100%;
	max-width: none;
	height: auto;
	text-align: center;
	overflow: visible;
}

.sdc-separator-block::before {
	content: "●●●●●●●●●●";
	display: block;
	font-size: var(--bullet-size);
	letter-spacing: var(--space-sm);
	color: var(--color-accent);
	line-height: 1;
}

/* ==========================================================================
   GALLERY BLOCK
   ========================================================================== */

.sdc-gallery-block {
	margin-block-end: var(--space-xl);
}

/* WordPress gallery grid layout */
.sdc-gallery-block .blocks-gallery-grid,
.sdc-gallery-block.wp-block-gallery .wp-block-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-lg);
	padding: 0;
	margin: 0;
	list-style: none;
}

.sdc-gallery-block .blocks-gallery-item,
.sdc-gallery-block.wp-block-gallery figure {
	margin: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.sdc-gallery-block .blocks-gallery-item img,
.sdc-gallery-block.wp-block-gallery figure img {
	border-radius: var(--radius-lg);
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Responsive: 2 columns on tablet, 1 on mobile */
@media (max-width: 768px) {
	.sdc-gallery-block .blocks-gallery-grid,
	.sdc-gallery-block.wp-block-gallery .wp-block-gallery {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-md);
	}
}

@media (max-width: 480px) {
	.sdc-gallery-block .blocks-gallery-grid,
	.sdc-gallery-block.wp-block-gallery .wp-block-gallery {
		grid-template-columns: 1fr;
	}
}

.sdc-gallery-caption {
	font-family: var(--font-primary);
	font-size: var(--text-body);
	font-weight: var(--font-weight-regular);
	line-height: var(--leading-normal);
	color: var(--color-contrast);
	margin-block-end: var(--space-4xl);
	text-align: center;
}

/* ==========================================================================
   QUOTE BLOCK
   Figma: White background, 80px padding, icon left with 40px gap
   ========================================================================== */

.sdc-quote-block {
	position: relative;
	background-color: var(--color-white);
	border-radius: var(--radius-xl);
	padding: var(--space-7xl);
	padding-left: calc(var(--space-7xl) + 60px + var(--space-2xl)); /* padding + 60px icon + gap */
	margin-block-end: var(--space-4xl);
	border-left: none;
}

/* Quote icon - positioned absolutely on the left */
.sdc-quote-block::before {
	content: "";
	position: absolute;
	left: var(--space-7xl);
	top: var(--space-7xl);
	width: 60px;
	height: 48px;
	background-color: var(--color-primary);
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z'/%3E%3C/svg%3E");
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.sdc-quote-block p {
	font-family: var(--font-primary);
	font-size: var(--text-h3);
	font-weight: var(--font-weight-bold);
	line-height: var(--leading-normal);
	color: var(--color-contrast);
	margin: 0 0 var(--space-md) 0;
}

.sdc-quote-block cite {
	font-family: var(--font-primary);
	font-size: var(--text-body);
	font-weight: var(--font-weight-medium);
	font-style: normal;
	line-height: var(--leading-normal);
	color: var(--color-contrast);
}

@media (max-width: 768px) {
	.sdc-quote-block {
		padding: var(--space-xl);
		padding-left: calc(var(--space-xl) + 40px + var(--space-lg));
	}

	.sdc-quote-block::before {
		left: var(--space-xl);
		top: var(--space-xl);
		width: 40px;
		height: 32px;
	}

	.sdc-quote-block p {
		font-size: var(--text-h4);
	}
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
	.sdc-content-section {
		padding: var(--space-4xl) var(--space-lg);
	}

	.sdc-content-section > * {
		margin-block-end: var(--space-2xl);
	}

	.sdc-table-block th,
	.sdc-table-block td {
		padding: var(--space-sm) var(--space-md);
		font-size: var(--text-small);
	}
}