/* ==========================================================================
   Section 6: Practices (3-card Slick slider)
   Layout: practices
   Figma node: 493:2010
   Reference: pages/homepage-v4/figma/screenshots/06-practices.png
   ========================================================================== */

.practices {
    background-color: var(--color-white);
    color: var(--color-text-dark);
    padding: 67px clamp(24px, 10vw, 178px);
    padding: 67px 0;
    width: 100%;
}


/* Header row */
.practices-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 12px;
    padding-bottom: 37px;
    border-bottom: 1px solid var(--color-text-dark);
    margin-bottom: 31px;
}

.practices-heading {
    color: var(--color-text-dark);
    font-family: var(--font-heading);
    font-size: clamp(30px, 3vw, 43px);
    font-weight: 400;
    line-height: 55px;
    margin: 0;
}

.practices-slider-nav {
    display: flex;
    align-items: center;
    gap: 13px;
}

.practices-arrow-btn,
.practices-arrow-btn.slick-arrow,
.practices-arrow-btn.slick-disabled {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 57px;
    height: 57px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--color-text-dark);
    border-radius: 9999px;
    color: var(--color-text-dark);
    cursor: pointer;
    position: static;
    transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.practices-arrow-btn.slick-disabled {
    opacity: 0.35;
    cursor: default;
}
.practices-arrow-btn:hover {
    background-color: var(--color-text-dark);
    color: var(--color-white);
}
.practices-arrow-btn:hover svg path { color: var(--color-white); stroke: var(--color-white); }
.practices-arrow-btn svg {
    display: block;
    width: 11px;
    height: 21px;
    color: currentColor;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    transition: color 0.3s ease;
}
.practices-prev svg { transform: scaleX(-1); }

/* Cards */
.practices-slider {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 49px;
    align-items: stretch;
}

/* Slick overrides — Slick 1.8.x adds .slick-slide to each direct child of the slider,
   so .practices-card and .slick-slide are the SAME element. Slick's own
   `.slick-initialized .slick-slide { display: block }` (0,2,0) beats
   `.practices-card { display: flex }` (0,1,0), which kills our card gap.
   Restore flex layout with a higher-specificity selector. */
.practices-slider.slick-initialized { display: block; }

.practices-slider .slick-track { display: flex; align-items: stretch; }
.practices-slider .slick-slide { height: auto; }
.practices-slider .slick-slide > div { height: 100%; }

.practices-card {
	display: flex !important;
	flex-direction: column;
	gap: 24px 0;
/* 	padding: 38px 30px 104px 30px; */
	padding: 0;
	background-color: transparent;
	color: var(--color-text-dark);
	min-height: 412px;
	box-sizing: border-box;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.practices-card--highlighted {
    background-color: var(--color-brand-blue);
    color: var(--color-white);
/*     padding: 38px 51px 37px 51px; */
    /*gap: 48px; */
}

.practices-card .practices-card-main{
	padding: 38px 30px 104px 30px;
}
.practices-card--highlighted .practices-card-main{
	padding: 38px 51px 37px 51px;
}

.practices-card--highlighted .practices-card-title,
.practices-card--highlighted .practices-card-body,
.practices-card--highlighted .practices-card-read-more {
    color: var(--color-white);
}

.practices-card-title {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--color-text-dark);
    margin: 0 0 30px 0
}

.practices-card-body {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 27.2px;
    color: var(--color-text-dark);
    margin: 0;
    max-width: 455px;
}

.practices-card-read-more {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 27.2px;
    color: var(--color-brand-blue);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0;
    display: inline-block;
    align-self: flex-start;
    transition: opacity 0.3s ease, color 0.3s ease;
    margin: 20px 0 0 0;
}
.practices-card-read-more:hover { opacity: 0.8; color: var(--color-brand-blue); }
.practices-card--highlighted .practices-card-read-more:hover { color: var(--color-white); opacity: 0.85; }

/* Responsive */
@media (max-width: 1200px) {
    .practices { padding: 60px 0; }
    .practices-slider { gap: 32px; }
/*     .practices-card { padding: 32px 20px 40px 20px; }
    .practices-card--highlighted { padding: 32px 32px; } */
	
	.practices-card .practices-card-main{
		padding: 32px 20px 40px 20px;
	}
	.practices-card--highlighted .practices-card-main{
		padding: 32px 32px;
	}

    .practices-card-title{
        line-height: 1.4;
        margin: 0 0 20px 0;        
    }
    .practices-card-read-more{
        margin: 0;
    }
}

@media (max-width: 991px) {
    .practices-slider:not(.slick-initialized) { grid-template-columns: repeat(2, 1fr); }
    .practices-arrow-btn, .practices-arrow-btn.slick-arrow, .practices-arrow-btn.slick-disabled{
        width: 50px; height: 50px;
    }
}

@media (max-width: 767px) {
    .practices { padding: 48px 0; }
    .practices-header-row { padding-bottom: 24px; margin-bottom: 24px; }
    .practices-slider:not(.slick-initialized) { grid-template-columns: 1fr; gap: 24px; }
    .practices-arrow-btn { width: 44px; height: 44px; }
}