/* ===== Y25 Tabs + Accordion Styles ===== */

:root {
	/* Image Tab - Colors */
	--image-tab-primary-color: #0073aa;
	--image-tab-text-primary: #111;
	--image-tab-text-secondary: #333;
	--image-tab-text-tertiary: #555;
	--image-tab-text-white: #fff;
	--image-tab-text-black: #000;
	--image-tab-border-standard: #ddd;
	--image-tab-border-subtle: #F0F0F0;
	--image-tab-bg-editor: #f9f9f9;
	--image-tab-bg-section-header: #f5f5f5;
	--image-tab-bg-section-hover: #efefef;
	--image-tab-bg-tab-buttons: #E1E9FF;
	--image-tab-border-divider: #e0e0e0;
	--image-tab-button-delete: #d32f2f;
	--image-tab-button-delete-hover: #b71c1c;

	/* Image Tab - Spacing */
	--image-tab-gap-xs: 8px;
	--image-tab-gap-sm: 10px;
	--image-tab-gap-md: 12px;
	--image-tab-gap-lg: 16px;
	--image-tab-gap-xl: 20px;
	--image-tab-gap-2xl: 30px;

	/* Image Tab - Border Radius */
	--image-tab-radius-sm: 4px;
	--image-tab-radius-md: 6px;
	--image-tab-radius-lg: 8px;
	--image-tab-radius-rounded: 2.5rem;
	--image-tab-radius-pill: 5rem;

	/* Image Tab - Transitions */
	--image-tab-transition-fast: 0.2s;
	--image-tab-transition-normal: 0.3s;

	/* Image Tab - Typography */
	--image-tab-font-weight-regular: 400;
	--image-tab-font-weight-medium: 500;
	--image-tab-font-weight-bold: 600;
}

/* Editor UI Styles */
.cmw-tabs-accordion-editor {
	border: 1px solid var(--image-tab-border-standard);
	border-radius: var(--image-tab-radius-lg);
	padding: var(--image-tab-gap-xl);
	background: var(--image-tab-bg-editor);
	margin: var(--image-tab-gap-sm) 0;
}

.cmw-tae-headline-section {
	margin-bottom: var(--image-tab-gap-xl);
	padding-bottom: var(--image-tab-gap-xl);
	border-bottom: 2px solid var(--image-tab-border-divider);
}

.cmw-tae-tabs {
	display: flex;
	gap: var(--image-tab-gap-xs);
	margin-bottom: var(--image-tab-gap-xl);
	flex-wrap: wrap;
}
.cmw-tab-content {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, calc(10.88px + 1.6vw), 32px);
	width: 50%;
}

.cmw-tab-content h2, .ray-running-text .cmw-tab-content h2,
.single-landing_page .page-wrapper .cmw-tab-content h2{
	margin-bottom: 0;
	color: var(--image-tab-text-black);
	font-family: "WeWork Serif";
	font-size: 2.25rem;
	font-weight: var(--image-tab-font-weight-regular);
	line-height: 120%;
	text-wrap-style: balance;
	margin-top: 0;
	width: 100%;
}
.cmw-tae-tab-button {
	padding: var(--image-tab-gap-sm) var(--image-tab-gap-lg);
	border: 2px solid var(--image-tab-border-standard);
	background: var(--image-tab-text-white);
	border-radius: var(--image-tab-radius-md);
	cursor: pointer;
	font-weight: var(--image-tab-font-weight-medium);
	transition: all var(--image-tab-transition-fast);
}

.cmw-tae-tab-button:hover {
	border-color: var(--image-tab-primary-color);
	color: var(--image-tab-primary-color);
}

.cmw-tae-tab-button.is-active {
	background: var(--image-tab-primary-color);
	color: var(--image-tab-text-white);
	border-color: var(--image-tab-primary-color);
}

.cmw-tae-tab-content {
	background: var(--image-tab-text-white);
	border: 1px solid var(--image-tab-border-standard);
	border-radius: var(--image-tab-radius-md);
	padding: var(--image-tab-gap-xl);
}

.cmw-tae-tab-header {
	margin-bottom: var(--image-tab-gap-xl);
	padding-bottom: var(--image-tab-gap-xl);
	border-bottom: 1px solid var(--image-tab-border-divider);
}

.cmw-tae-image-upload {
	display: flex;
	gap: var(--image-tab-gap-xs);
	margin-bottom: var(--image-tab-gap-md);
	flex-wrap: wrap;
}

.cmw-tae-preview-image {
	max-width: 100%;
	height: auto;
	max-height: 300px;
	border-radius: var(--image-tab-radius-md);
	margin-top: var(--image-tab-gap-md);
}

.cmw-tae-sections {
	margin-top: var(--image-tab-gap-xl);
}

.cmw-tae-sections h4, .ray-running-text .cmw-tae-sections h4 {
	margin-top: 0;
	color: var(--image-tab-text-secondary);
	font-size: 16px;
	
}

.cmw-tae-section-item {
	border: 1px solid var(--image-tab-border-standard);
	border-radius: var(--image-tab-radius-md);
	margin-bottom: var(--image-tab-gap-md);
	overflow: hidden;
}

.cmw-tae-section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--image-tab-gap-md) var(--image-tab-gap-lg);
	background: var(--image-tab-bg-section-header);
	cursor: pointer;
	transition: background var(--image-tab-transition-fast);
}

.cmw-tae-section-header:hover {
	background: var(--image-tab-bg-section-hover);
}

.cmw-tae-section-toggle {
	border: none;
	background: none;
	cursor: pointer;
	font-size: 16px;
	padding: 0;
	margin-right: var(--image-tab-gap-xs);
	color: var(--image-tab-primary-color);
	font-weight: bold;
}

.cmw-tae-section-delete {
	border: none;
	background: var(--image-tab-button-delete);
	color: var(--image-tab-text-white);
	border-radius: var(--image-tab-radius-sm);
	width: 28px;
	height: 28px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--image-tab-transition-fast);
}

.cmw-tae-section-delete:hover:not(:disabled) {
	background: var(--image-tab-button-delete-hover);
}

.cmw-tae-section-delete:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.cmw-tae-section-content {
	padding: var(--image-tab-gap-lg);
	background: var(--image-tab-text-white);
	border-top: 1px solid var(--image-tab-border-standard);
}

/* ===== Frontend Styles ===== */

.cmw-tabs-accordion-wrapper {
	width: 100%;
	margin: 0 auto;
}

.cmw-tabs-accordion-container {
	display: grid;
	gap: 2rem;
}

/* Image positioning - right side (default) */
.cmw-image-right {
	align-items: flex-start;
}

.cmw-image-right .cmw-image-container {
	order: 2;
}
.cmw-tab-panels .cmw-image-container{
	width: 50%;
}

/* Image positioning - left side */
.cmw-image-left {
	align-items: flex-start;
}

.cmw-image-left .cmw-image-container {
	order: -1;
}

.cmw-tabs-buttons {
    display: flex;
    gap: clamp(0.250rem, calc(0.170rem + 0.4vw), 0.500rem);
    flex-wrap: wrap;
    padding: clamp(0.250rem, calc(0.170rem + 0.4vw), 0.500rem);
    background: var(--image-tab-bg-tab-buttons);
    width: fit-content;
    border-radius: var(--image-tab-radius-pill);
}

.cmw-tab-btn {
    font-family: "Apercu Pro";
    font-size: 1.125rem;
    line-height: 130%;
    cursor: pointer;
    font-weight: var(--image-tab-font-weight-regular);
    padding: 0.875rem 1.25rem 0.9375rem 1.25rem;
    transition: all var(--image-tab-transition-normal);
    color: var(--image-tab-text-black);
	border-radius: var(--image-tab-radius-rounded);
    background: transparent;
    border: none;
}

.cmw-tab-btn:hover {
	background: var(--image-tab-text-white);
}

.cmw-tab-btn.is-active {
    background: var(--image-tab-text-black);
    color: var(--image-tab-text-white);
    border-radius: var(--image-tab-radius-rounded);
    padding: 0.875rem 1.25rem 0.9375rem 1.25rem;
}

.cmw-tab-panels {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.cmw-tab-panel {
	display: none;
}

.cmw-tab-panel.is-active {
    display: flex;
    gap: clamp(2.500rem, calc(2.020rem + 2.4vw), 4.000rem);
}

.cmw-image-container {
	width: 100%;
	overflow: hidden;
	border-radius: var(--image-tab-radius-lg);
}

.cmw-image-container img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

.cmw-accordion {
	display: flex;
	flex-direction: column;
}
.cmw-accordion-item:first-child {
	border-top: 1px solid var(--image-tab-border-subtle);
}
.cmw-accordion-item {
    border-bottom: 1px solid var(--image-tab-border-subtle);
	overflow: hidden;
	padding: 1rem 0;
	gap: 0.75rem;
	    display: flex;
    flex-direction: column;
}

.cmw-accordion-header, .ray-running-text .cmw-accordion-header {
    width: 100%;
	font-family: "Apercu Pro";
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.25rem;
    font-weight: var(--image-tab-font-weight-bold);
    color: var(--image-tab-text-black);
    background: transparent;
    border: none;
	line-height: 130%;
	opacity: 0.85;
	padding: 0;
	margin: 0;
}

.cmw-accordion-title {
	flex: 1;
}

.cmw-accordion-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
}
.cmw-accordion-item.is-open .cmw-accordion-content {
	display: block;
}

.cmw-accordion-content, .ray-running-text .cmw-accordion-content {
    background: var(--image-tab-text-white);
    font-size: 16px;
    line-height: 1.6;
    color: var(--image-tab-text-secondary);
    display: none;
	margin: 0;
}
.cmw-accordion-content strong, .ray-running-text .cmw-accordion-content strong {
	font-weight: var(--image-tab-font-weight-bold);
	color: var(--image-tab-text-primary);
	margin: 0;
}

.cmw-accordion-content em {
	font-style: italic;
	color: var(--image-tab-text-tertiary);
}

.cmw-tabs-buttons.mobile {
  display: none;
}
.cmw-tabs-accordion-container-right{
	    justify-items: end;
}
/* ===== Responsive Design ===== */
@media (min-width: 951px){
	.cmw-tabs-buttons.cmw-tabs-buttons-left{
		margin-left: 10%;
	}
	.cmw-tabs-buttons.cmw-tabs-buttons-right{
		margin-right: 10%;
	}
}
@media (max-width: 950px) {
.cmw-tab-content h2 {
        text-wrap-style: pretty;
    }
	.cmw-tab-panel.is-active {
    flex-direction: column;
}
.cmw-tab-panels .cmw-image-container{
	width: 100%;
}
.cmw-tab-content{
	width: 100%;
	
}
.cmw-tabs-buttons {
    display: flex;
  }

}
@media(max-width: 950px) and (min-width: 450px){
	.cmw-image-container img{
		max-height: 36.375rem;
	}
}
@media(max-width: 450px){
	.cmw-tab-content h2, .ray-running-text .cmw-tab-content h2 {
		font-size: 1.5rem;
	}
	.cmw-tab-btn{
		padding: 0.625rem 1rem 0.6875rem 1rem;

	}
	.cmw-image-container img{
		max-height: 20rem;
	}
}