/*
 * Services Section — Custom Cards Layout
 * Isolated from style.css. All rules are scoped to #design_studio_services_section.
 */

/* ── Section shell ─────────────────────────────────────────────────────────── */
#design_studio_services_section.cm-services-section {
	position: relative;
	padding: 70px 0 80px;
	background-color: #191C21;
	overflow: hidden;
}

/* ── Decorative background text ────────────────────────────────────────────── */
#design_studio_services_section .cm-services__bg-text {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 50px;
    font-weight: 800;
    text-transform: uppercase;
    z-index: -1;
    font-family: var(--font-heading);
    opacity: 60%;
    color: var(--primary-color);
}

.cm-services__header{
	position: relative;
}

/* ── Wrapper z-index so it sits above bg text ──────────────────────────────── */
#design_studio_services_section .asterthemes-wrapper {
	position: relative;
	z-index: 1;
}

/* ── Header ─────────────────────────────────────────────────────────────────── */
#design_studio_services_section .cm-services__header {
	text-align: center;
	margin-bottom: 44px;
}

#design_studio_services_section .cm-services__title {
	margin: 0 0 14px;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.2;
	text-transform: uppercase;
	color: #ffffff;
	font-family: var(--font-heading);
}

#design_studio_services_section .cm-services__desc {
	margin: 0;
	font-family: var(--font-heading);
	color: #ffffff;
	font-size: 16px;
}

/* ── Cards grid ─────────────────────────────────────────────────────────────── */
#design_studio_services_section .cm-services__grid {
	display: flex;
	align-items: stretch;
	gap: 40px;
	min-height: 400px;
}

/* ── Base card ──────────────────────────────────────────────────────────────── */
#design_studio_services_section .cm-services__card {
	flex: 1;
	position: relative;
	border-radius: 22px;
	border: 1.5px solid rgba(255, 255, 255, 0.1);
	background-color: #191C21;
	overflow: hidden;
	transition: border-color 0.28s ease, box-shadow 0.28s ease, flex 0.75s ease;
}

#design_studio_services_section .cm-services__card:hover {
	border-color: rgba(255, 255, 255, 0.2);
}

.cm-services__card-top-inner {
    position: absolute;
    width: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ── Hovered card behaves like previous featured card ───────────────────────── */
#design_studio_services_section .cm-services__card:hover,
#design_studio_services_section .cm-services__card:focus-within {
    flex: 3.5;
    box-shadow: 8px 8px 7px -1px #164a34;
}

#design_studio_services_section .cm-services__card:hover,
#design_studio_services_section .cm-services__card:focus-within {
	box-shadow: 0 0 0 1px #1db977, 0 0 44px 0 rgba(29, 185, 119, 0.35);
}

/* ── Background image fill (active card only) ──────────────────────────────── */
#design_studio_services_section .cm-services__card-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    top: 10%;
	opacity: 0;
	transition: opacity 0.28s ease;
}

#design_studio_services_section .cm-services__card:hover .cm-services__card-bg,
#design_studio_services_section .cm-services__card:focus-within .cm-services__card-bg {
	opacity: 1;
}

#design_studio_services_section .cm-services__card-bg-img {
	display: block;
	width: 100%;
	height: 90%;
	border-radius: 22px;
	object-fit: cover;
}

/* Dark overlay so text stays readable over the image */
#design_studio_services_section .cm-services__card:hover .cm-services__card-bg::after,
#design_studio_services_section .cm-services__card:focus-within .cm-services__card-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(20, 22, 28, 0.35) 0%,
		rgba(20, 22, 28, 0.78) 100%
	);
}

/* ── Card inner content ─────────────────────────────────────────────────────── */
#design_studio_services_section .cm-services__card-inner {
    position: relative;
    z-index: 1;
    padding: 22px 20px 24px;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    border: 5px solid #555454;
    border-radius: 22px;
	transition: border-color 0.28s ease;
}

/* Default card: content centred vertically, title rotated */
#design_studio_services_section .cm-services__card:not(:hover):not(:focus-within) .cm-services__card-inner {
	align-items: flex-start;
	justify-content: space-between;
}

/* ── Card top row (number + icon) ───────────────────────────────────────────── */
#design_studio_services_section .cm-services__card:hover .cm-services__card-top,
#design_studio_services_section .cm-services__card:focus-within .cm-services__card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
    flex-direction: column;
	border: none;
	padding: 0;
}

/* ── Number label ───────────────────────────────────────────────────────────── */
#design_studio_services_section .cm-services__card:hover .cm-services__card-number,
#design_studio_services_section .cm-services__card:focus-within .cm-services__card-number {
	display: inline-block;
	font-size: 30px;
	font-weight: 800;
	line-height: 1;
	color: #1db977;
	font-family: var(--font-second);
}

/* ── Card top row (number + icon) ───────────────────────────────────────────── */
#design_studio_services_section .cm-services__card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 100px;
    flex-direction: column;
    border-bottom: 5px solid #555454;
    padding-bottom: 20px;
	transition: margin-bottom 0.28s ease, padding-bottom 0.28s ease, border-color 0.28s ease;
}

/* ── Number label ───────────────────────────────────────────────────────────── */
#design_studio_services_section .cm-services__card-number {
	display: inline-block;
	font-size: 30px;
	font-weight: 800;
	line-height: 1;
	color: #1db977;
	font-family: var(--font-second);
	transition: transform 0.28s ease;
}

/* ── Code icon box ──────────────────────────────────────────────────────────── */
#design_studio_services_section .cm-services__card-icon {
	display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0;
    height: 0;
    border-radius: 10px;
    background: #fff;
    font-size: 16px;
    font-weight: 600;
    color: #000;
    font-family: var(--font-heading);
	margin-top: 0;
	opacity: 0;
	overflow: hidden;
	transform: translateY(8px);
	transition: width 0.28s ease, height 0.28s ease, margin-top 0.28s ease, opacity 0.22s ease, transform 0.28s ease;
}

#design_studio_services_section .cm-services__card:hover .cm-services__card-icon, #design_studio_services_section .cm-services__card:focus-within .cm-services__card-icon {
    width: auto;
    height: auto;
    margin-top: 8px;
    opacity: 1;
    transform: translateY(0);
    padding: 2px 5px;
    text-align: center;
}

/* ── Card title ─────────────────────────────────────────────────────────────── */
#design_studio_services_section .cm-services__card-title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	color: #ffffff;
	font-family: var(--font-second);
	transition: margin 0.28s ease, font-size 0.28s ease, letter-spacing 0.28s ease;
}

#design_studio_services_section .cm-services__card-title a {
	color: inherit;
	text-decoration: none;
}

#design_studio_services_section .cm-services__card-title a:hover,
#design_studio_services_section .cm-services__card-title a:focus {
	color: inherit;
	text-decoration: none;
}

/* Sidebar title — rotated vertically ───────────────────────────────────────── */
#design_studio_services_section .cm-services__card:not(:hover):not(:focus-within) .cm-services__card-title {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-align: center;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -50px auto 70px;
    font-size: 15px;
    letter-spacing: 0.15em;
    height: 190px;
}

/* Active card title — normal horizontal ────────────────────────────────────── */
#design_studio_services_section .cm-services__card:hover .cm-services__card-title,
#design_studio_services_section .cm-services__card:focus-within .cm-services__card-title {
	font-size: 20px;
	margin-top: 22px;
}

/* ── Card description (active card only) ───────────────────────────────────── */
#design_studio_services_section .cm-services__card-desc {
	display: block;
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: #ffffff;
	font-family: var(--font-heading);
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transform: translateY(8px);
	transition: max-height 0.32s ease, margin-top 0.28s ease, opacity 0.22s ease, transform 0.28s ease;
}

#design_studio_services_section .cm-services__card:hover .cm-services__card-desc,
#design_studio_services_section .cm-services__card:focus-within .cm-services__card-desc {
	margin-top: 10px;
	max-height: 220px;
	opacity: 1;
	transform: translateY(0);
}

/* ── Responsive — tablet (≤ 1100px) ────────────────────────────────────────── */
@media only screen and (max-width: 1100px) {
	#design_studio_services_section .cm-services__grid {
		min-height: 380px;
	}
	#design_studio_services_section .cm-services__card-top {
		margin-bottom: 50px;
	}
	#design_studio_services_section .cm-services__card:not(:hover):not(:focus-within) .cm-services__card-title{
		margin: -20px auto 70px;
	}
}

/* ── Responsive — small tablet (≤ 950px) ───────────────────────────────────── */
@media only screen and (max-width: 950px) {
	#design_studio_services_section .cm-services__grid {
		flex-wrap: wrap;
		min-height: 0;
	}

	#design_studio_services_section .cm-services__card:not(:hover):not(:focus-within) .cm-services__card-title {
        margin: 0;
    }

	#design_studio_services_section .cm-services__card-top {
        margin-bottom: 30px;
		padding-bottom: 10px;
    }

	/* On tablet: hovered card can expand full width, others split 2 per row */
	#design_studio_services_section .cm-services__card:hover,
	#design_studio_services_section .cm-services__card:focus-within {
		flex: 1 1 100%;
		min-height: 320px;
	}

	#design_studio_services_section .cm-services__card:not(:hover):not(:focus-within) {
		flex: 1 1 calc(50% - 8px);
		min-height: 160px;
	}

	/* Turn off rotation on small tablet — show title horizontally */
	#design_studio_services_section .cm-services__card:not(:hover):not(:focus-within) .cm-services__card-title {
		writing-mode: horizontal-tb;
		transform: none;
		text-align: left;
		font-size: 13px;
		letter-spacing: 0.06em;
	}
}