/**
 * Background Section Block Styles
 * All styles are handled via Tailwind utility classes in the PHP output
 */

.wp-block-ttk-website-background-section {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.wp-block-ttk-website-background-section .ttk-bg-section-shape {
	position: absolute;
	background-color: var(--bg-section-shape-color, #B8E6E6);
	top: -2rem;
	bottom: -2rem;
	right: 0;
	width: calc(75% + 2rem);
	transform: translateX(2rem);
}

@media (min-width: 1024px) {
	.wp-block-ttk-website-background-section .ttk-bg-section-shape {
		top: -4rem;
		bottom: 4rem;
		width: calc(75% + 4rem);
		transform: translateX(4rem);
	}
}

.wp-block-ttk-website-background-section .ttk-bg-section-shape.ttk-bg-section-shape-right {
	right: 0;
}

.wp-block-ttk-website-background-section .ttk-bg-section-shape.ttk-bg-section-shape-left {
	left: 0;
	transform: translateX(-2rem);
}

@media (min-width: 1024px) {
	.wp-block-ttk-website-background-section .ttk-bg-section-shape.ttk-bg-section-shape-left {
		transform: translateX(-4rem);
	}
}

.wp-block-ttk-website-background-section .bg-black {
  transition: opacity 0.3s ease-in-out;
}

@media (max-width: 768px) {
  .wp-block-ttk-website-background-section .text-4xl {
    font-size: 2rem;
    line-height: 2.5rem;
  }
  .wp-block-ttk-website-background-section .text-5xl {
    font-size: 2.5rem;
    line-height: 3rem;
  }
  .wp-block-ttk-website-background-section .text-lg {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

@media (max-width: 1023px) {
  .wp-block-ttk-website-background-section .grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}