/*
 * Styles for Banking Services Bento Section Block
 */

.services-section {
	padding: 88px 57px 112px 57px;
	background-color: var(--white);
}

.services-header-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-bottom: 48px; /* Spacing between action button and grid */
}

/* Label Pill: E9EDFC bg, 25px side/10px vertical padding, gap 6px, text/dot 2342C8 */
.services-label-wrapper {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background-color: #E9EDFC;
	padding: 10px 25px;
	border-radius: 100px;
	margin-bottom: 20px; /* Spacing between label and heading: 20px */
}

.services-label-dot {
	width: 6px;
	height: 6px;
	background-color: var(--primary-color);
	border-radius: 50%;
}

.services-label-text {
	font-family: 'Public Sans', sans-serif;
	font-weight: 400;
	font-size: 16px;
	color: var(--primary-color);
	/* text-transform: uppercase; */
	letter-spacing: 0.05em;
}

/* Heading: Public Sans, Medium 60px, line-height 70, letter spacing -3% */
.services-title-editable,
.services-header-content h2 {
	font-family: 'Public Sans', sans-serif;
	font-weight: 500;
	font-size: 60px;
	line-height: 70px;
	letter-spacing: -0.03em;
	color: #0F172A;
	margin-bottom: 16px; /* Spacing between heading and description: 16px */
}

/* Description: same as hero description (Nunito regular 16px, line height 25, letter spacing 2%) */
.services-desc-editable,
.services-header-content p {
	font-family: var(--font-nunito);
	font-weight: 400;
	font-size: 16px;
	line-height: 25px;
	letter-spacing: 0.02em;
	color: var(--text-muted);
	margin-bottom: 36px; /* Spacing between description and button: 36px */
	max-width: 680px;
}

/* Button: left padding 20px, others 4px, arrow rotated by 35 deg inside 40x40 circle */
.services-pill-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 4px 4px 4px 20px;
	border-radius: 100px;
	font-family: var(--font-nunito);
	font-size: 16px;
	color: var(--white);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%), var(--primary-color);
	box-shadow: 0 4px 14px 0 rgba(35, 66, 200, 0.35);
	transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
	cursor: pointer;
	text-decoration: none;
}

.services-pill-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px 0 rgba(35, 66, 200, 0.45);
	filter: brightness(1.05);
}

.services-pill-btn:active {
	transform: translateY(0);
}

.services-btn-arrow-circle {
	width: 40px;
	height: 40px;
	background-color: var(--white);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform var(--transition-smooth);
}

.services-btn-arrow-circle svg {
	transform: rotate(-35deg); /* Arrow rotated 35 degrees up-right */
	transition: transform var(--transition-smooth);
}

.services-pill-btn:hover .services-btn-arrow-circle svg {
	transform: rotate(-35deg) translate(1px, -1px);
}

/* Second Button style: Outline pill */
.btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 20px;
	border-radius: 100px;
	font-family: var(--font-nunito);
	font-weight: 700;
	font-size: 16px;
	color: #1E293B;
	background-color: transparent;
	border: 1.5px solid #D5D5D5;
	box-shadow: 0 1px 0px 0 rgba(35, 66, 200, 0.35);
	transition: border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
}

.btn-secondary:hover {
	border-color: var(--primary-color);
	color: var(--primary-color);
	background-color: rgba(35, 66, 200, 0.03);
	transform: translateY(-2px);
}

.btn-secondary:active {
	transform: translateY(0);
}

/* Bento Grid: columns/rows gap 1px, gap color 71717B */
.services-bento-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	background-color: #71717B;
	border: 1.5px solid #71717B;
	border-radius: 24px;
	overflow: hidden;
}

/* Bento Cards: white bg, padding is applied to content only */
.bento-card {
	background-color: var(--white);
	display: flex;
	box-sizing: border-box;
	overflow: hidden;
}

.bento-card-content {
	display: flex;
	flex-direction: column;
}

/* Card custom border-radii (0px on corners touching parent boundaries, 24px elsewhere) */
.bento-card.mortgage-card {
	border-top-left-radius: 0;
	border-top-right-radius: 24px;
	border-bottom-left-radius: 24px;
	border-bottom-right-radius: 24px;
}

.bento-card.account-card {
	border-top-left-radius: 24px;
	border-top-right-radius: 0;
	border-bottom-left-radius: 24px;
	border-bottom-right-radius: 24px;
}

.bento-card.funding-card {
	border-top-left-radius: 24px;
	border-top-right-radius: 24px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 24px;
}

.bento-card.trade-card {
	border-top-left-radius: 24px;
	border-top-right-radius: 24px;
	border-bottom-left-radius: 24px;
	border-bottom-right-radius: 0;
}

/* Title: 24px Public Sans, line-height 25, letter-spacing 2% */
.bento-card-title {
	font-family: 'Public Sans', sans-serif;
	font-weight: 500;
	font-size: 24px;
	line-height: 25px;
	letter-spacing: 0.02em;
	color: #0F172A;
	margin-bottom: 12px;
}

/* Description: same as description */
.bento-card-desc {
	font-family: var(--font-nunito);
	font-weight: 400;
	font-size: 16px;
	line-height: 25px;
	letter-spacing: 0.02em;
	color: var(--text-muted);
	margin-bottom: 24px;
}

/* Learn More link: same style, color-transition to 2342C8 on hover */
.bento-card-link {
	font-family: var(--font-nunito);
	font-weight: 600;
	font-size: 16px;
	line-height: 25px;
	letter-spacing: 0.02em;
	color: var(--text-muted);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto; /* Push link to bottom if space permits */
	transition: color var(--transition-fast);
}

.bento-link-arrow {
	transition: transform var(--transition-smooth);
}

.bento-card:hover .bento-card-link {
	color: var(--primary-color);
}

.bento-card:hover .bento-link-arrow {
	transform: translateX(4px);
}

/* Layout variants: Wide vs Narrow. Content to image gap: 4px */
.bento-card.wide {
	width: calc(100% - 483px);
	flex-direction: row;
	/* align-items: center; */
	justify-content: space-between;
	gap: 4px; /* 4px gap between content and graphic */
}

/* Padding of content of large cards: 32px top-left-bottom, 0px right */
.bento-card.wide .bento-card-content {
	flex: 1.2;
	max-width: 43%;
	padding: 32px 0px 32px 32px;
	box-sizing: border-box;
}

/* Graphic for large cards: zero padding on the image side */
.bento-card.wide .bento-card-graphic {
	flex: 0.8;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	max-width: 50%;
	height: 100%;
}

.bento-card.narrow {
	width: 482px;
	flex-direction: column;
	gap: 4px; /* 4px gap between graphic and content */
}

/* Padding on content section of small card: 12px top, 32px left-right-bottom.
   Heading and description on left, Learn More on the right bottom. */
.bento-card.narrow .bento-card-content {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 20px;
	padding: 12px 32px 32px 32px;
	box-sizing: border-box;
	width: 100%;
	flex: 1;
}

.bento-card.narrow .bento-card-title {
	grid-column: 1 / span 2;
	margin-bottom: 12px;
}

.bento-card.narrow .bento-card-desc {
	grid-column: 1;
	grid-row: 2;
	margin-bottom: 0;
}

.bento-card.narrow .bento-card-link {
	grid-column: 2;
	grid-row: 2;
	align-self: end;
	margin-top: 0;
	white-space: nowrap;
}

/* Graphic for small cards: zero padding on the image side */
.bento-card.narrow.account-card .bento-card-graphic{
	height: 196px;
}
.bento-card.narrow .bento-card-graphic {
	width: 100%;
	height: 220px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.bento-card-graphic img {
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

/* Custom layout sizing for cards graphic contents */
.mortgage-card .bento-card-graphic img {
	max-height: 400px;
}



.account-card .bento-card-graphic img {
	max-height: 196px;
	width: 100%;
	height: 100%;
	object-fit: cover; /* stretches top-edge-to-edge as in design */
}

.funding-card .bento-card-graphic img {
	max-height: 220px;
	width: 100%;
	height: 100%;
	object-fit: cover; /* stretches top-edge-to-edge as in design */
}

.trade-card .bento-card-graphic img {
	/* max-height: 220px; */
}

/* ==========================================
   Responsive Rules for Bento Grid
   ========================================== */
@media (max-width: 1024px) {
	.services-section {
		padding: 100px 24px 100px 24px;
	}
	
	.services-title-editable,
	.services-header-content h2 {
		font-size: 48px;
		line-height: 56px;
	}
}

@media (max-width: 1024px) {
	.services-bento-grid {
		flex-direction: column;
	}
	
	.bento-card.wide,
	.bento-card.narrow {
		width: 100% !important;
		/* flex-direction: column; */
		gap: 20px;
	}
	
	.bento-card.wide .bento-card-content,
	.bento-card.wide .bento-card-graphic {
		max-width: 100%;
		width: 100%;
	}
	
	.bento-card.wide .bento-card-content {
		padding: 32px;
	}
	
	.bento-card.wide .bento-card-graphic {
		justify-content: center;
		align-items: center;
	}

	.bento-card.narrow .bento-card-content {
		padding: 32px;
		display: flex;
		flex-direction: column;
	}

	.bento-card.narrow .bento-card-title,
	.bento-card.narrow .bento-card-desc,
	.bento-card.narrow .bento-card-link {
		grid-column: auto;
		grid-row: auto;
		align-self: flex-start;
	}

	.bento-card.narrow .bento-card-link {
		margin-top: 12px;
	}
	
	.bento-card.narrow{
        /* flex-direction: row-reverse; */
	}

	/* Responsive Corner overrides for single stacked column */
	.bento-card.mortgage-card {
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		border-bottom-left-radius: 24px;
		border-bottom-right-radius: 24px;
	}

	.bento-card.account-card {
		border-radius: 24px;
	}

	.bento-card.funding-card {
		border-radius: 24px;
	}

	.bento-card.narrow .bento-card-graphic{
		/* width: fit-content; */
	}

	.bento-card.narrow .bento-card-graphic img{
		/* max-height: 190px */
	}

	.bento-card.trade-card {
		border-top-left-radius: 24px;
		border-top-right-radius: 24px;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}
}

@media (max-width: 600px) {
	.services-title-editable,
	.services-header-content h2 {
		font-size: 34px;
		line-height: 42px;
		text-align: start;
        max-width: 300px;
	}

	.services-desc-editable, .services-header-content p{
		text-align: start;
	}

	.btn-secondary {
		width: 100%;
		justify-content: center;
	}

	.services-header-content{
		align-items: flex-start;
	}

	.bento-card.mortgage-card,.bento-card.trade-card {
		flex-direction: column-reverse;
	}

	.bento-card.narrow{
        flex-direction: column;
	}

	/* .account-card .bento-card-graphic img {
    max-height: 160px;
}*/

.bento-card.narrow.account-card .bento-card-graphic{
	align-items: end;
}

.bento-card.narrow.account-card .bento-card-content{
	padding: 20 32px 32px 32px;
}

    .account-card .bento-card-graphic img {
       width: 100%;
    height: 100%;
    max-height: fit-content;
    } 
}