/* =======================================================
   PROFESSIONALS LANDING PAGE
   ======================================================= */

.box-prof-landing-wrapper {
    width: 100%;
    font-family: var(--e-global-typography-primary-font-family), "AeonikPro", Sans-serif;
}

/* --- Header Row: Title Left, Description Right --- */
.box-prof-landing-header {
    display: flex;
    align-items: flex-start;
    gap: 60px;
    margin-bottom: 40px;
}

.box-prof-landing-title {
    font-size: clamp(1.125rem, 5vw, 2rem);
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    margin: 0;
    line-height: 1.1;
    flex-shrink: 0;
}

.box-prof-landing-desc {
    font-size: var(--box-font-size-desc, 1.125rem);
    color: var(--box-color-black, #000);
    line-height: 1.6;
    margin: 0;
    max-width: 480px;
	margin-left:33.9%;
}

/* --- Tile Grid (3 columns) --- */
.box-prof-landing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
}

.box-prof-tile {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--box-border-color, #E5E5E5);
    background: #ffffff;
    /* Square tiles — height set by Elementor tile_height control, defaulting to aspect-ratio */
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
}

.box-prof-tile-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 30px;
    box-sizing: border-box;
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: opacity 0.3s ease;
    text-align: center;
}

.box-prof-tile-link:hover {
    opacity: 0.8;
}

.box-prof-tile-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.box-prof-tile-title {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 1px;
    margin: 0;
    position: relative;
    z-index: 1;
    color: var(--box-color-black, #000);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .box-prof-landing-header {
        flex-direction: column;
        gap: 20px;
    }
    .box-prof-landing-desc {
        max-width: 100%;
		margin-left:0;
    }
}

@media (max-width: 768px) {
    .box-prof-landing-grid {
        grid-template-columns: 1fr;
    }
    /* Tiles remain square on mobile via aspect-ratio, no fixed height needed */
}