/**
 * AMICO Reviews Grid Styles - Pixel Perfect Figma Design
 */

.amico-reviews-wrapper {
    width: 100%;
    position: relative;
}

.reviews-grid-container {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    /* Auto-responsive: shows as many columns as fit with minimum 420px width */
    /* This ensures no columns get cut off by requiring more space per column */
}

/* Review Grid Item */
.review-grid-item {
    opacity: 0;
    position: relative;
    transition: all 0.3s ease;
}

.review-grid-item.animated {
    opacity: 1;
}

/* Review Card - UI/Testimonials */
.review-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    isolation: isolate;

    width: 100%;
    max-width: 400px;
    height: 527px;
    /* Default height - can be overridden by Elementor controls */
    min-height: 400px;
    /* Minimum height to ensure proper layout */

    background: #FFFFFF;
    border-radius: 0px;
    /* No border radius as per Figma */
    box-shadow: none;
    /* Remove default shadow */
    transition: all 0.3s ease;
    position: relative;

    flex: none;
    order: 0;
    flex-grow: 0;
}

/* Hover Animations (only on hover-capable, fine-pointer devices) */
@media (hover: hover) and (pointer: fine) {
    .review-grid-item[data-hover="scale"] .review-card:hover {
        transform: scale(1.05);
    }

    .review-grid-item[data-hover="lift"] .review-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    }

    .review-grid-item[data-hover="tilt"] .review-card:hover {
        transform: perspective(1000px) rotateX(5deg) rotateY(5deg);
    }

    .review-grid-item[data-hover="glow"] .review-card:hover {
        box-shadow: 0 0 30px rgba(0, 123, 255, 0.3);
    }
}

/* Cover Image - Frame 1321315653 */
.review-cover-image {
    width: 400px;
    height: 128px;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;

    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    z-index: 0;
}

.review-cover-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Hidden img tag for SEO/accessibility, background-image handles display */
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
}

/* Card Inner Content - Frame 1321315654 */
.review-card-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 40px 32px;
    gap: 0px;

    width: 100%;
    height: 399px;
    /* Default height - can be overridden by Elementor controls */
    min-height: 300px;
    /* Minimum height to ensure readability */

    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
    z-index: 1;
}

/* Reviewer Image - Ellipse 122 */
.reviewer-image {
    position: absolute;
    width: 102px;
    height: 102px;
    left: 32px;
    /* Fixed left position - can be adjusted via Elementor */
    top: 50px;
    /* Fixed top position - can be adjusted via Elementor */

    /* CSS variables for distance adjustments */
    --profile-vertical-adjust: 0px;
    --profile-horizontal-adjust: 0px;
    --stars-profile-distance: 0px;

    border: 3.70909px solid #FFFFFF;
    border-radius: 50%;
    overflow: hidden;

    /* Apply distance adjustments via transform */
    transform: translateY(calc(var(--profile-vertical-adjust) + var(--stars-profile-distance))) translateX(var(--profile-horizontal-adjust));

    flex: none;
    order: 2;
    flex-grow: 0;
    z-index: 2;
}

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

/* Rating Stars - Container */
.review-rating {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 1.3px;

    width: 93px;
    height: 19px;

    /* CSS variables for position adjustments */
    --stars-vertical-adjust: 0px;
    --stars-horizontal-adjust: 0px;

    /* Apply position adjustments via transform */
    transform: translateY(var(--stars-vertical-adjust)) translateX(var(--stars-horizontal-adjust));

    flex: none;
    order: 0;
    flex-grow: 0;
}

/* Individual Star */
.review-rating .star {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;

    width: 17px;
    height: 19px;

    flex: none;
    flex-grow: 0;
}

.review-rating .star svg {
    width: 17px;
    height: 19px;
    display: block;
    max-width: none;
}

/* Main Content Container - Frame 1321315485 */
.review-main-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 24px;

    width: 336px;
    height: 239px;

    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

/* Review Text - Frame 240021 */
.review-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 20px;

    width: 336px;
    height: 196px;

    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

.review-text p {
    width: 100%;
    max-width: 336px;
    height: auto;
    /* Allow height to adjust based on content */
    min-height: 196px;

    /* UI/Desktop/Body 2 - Default values (can be overridden by Elementor controls) */
    font-family: 'Gotham', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    display: flex;
    align-items: flex-start;
    /* Align to top for better text flow */

    color: rgba(24, 25, 26, 0.8);

    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    margin: 0;
}

/* Reviewer Info - Container */
.reviewer-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;

    width: 100%;
    height: auto;

    flex: none;
    order: 1;
    flex-grow: 0;
}

/* Reviewer Name - Heading 4 */
.reviewer-name {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;

    width: 100%;
    height: auto;

    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

.reviewer-name strong {
    width: 100%;
    height: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;

    /* Default values (can be overridden by Elementor controls) */
    font-family: 'Gotham', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-style: normal;
    font-weight: 350;
    font-size: 18px;
    line-height: 28px;

    color: rgba(24, 25, 26, 0.8);

    flex: none;
    order: 0;
    flex-grow: 0;
}

/* Reviewer Title Container */
.reviewer-title {
    width: 100%;
    height: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;

    opacity: 0.8;

    flex: none;
    order: 1;
    flex-grow: 0;

    /* UI/Mobile/Body 2 - Default values (can be overridden by Elementor controls) */
    font-family: 'Gotham', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;

    color: rgba(24, 25, 26, 0.8);
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.5);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes bounceIn {

    0%,
    20%,
    40%,
    60%,
    80% {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
    }

    20% {
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        transform: scale3d(.9, .9, .9);
    }

    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        transform: scale3d(.97, .97, .97);
    }

    100% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

/* Highlighted state for synchronized interactions */
.review-grid-item.highlighted .review-card {
    transform: scale(1.02);
    box-shadow: 0 5px 25px rgba(0, 123, 255, 0.2);
    border: 2px solid #007cba;
}

/* Last row alignment helpers - handled via JavaScript and inline styles */

/* Responsive Design - True Auto-Responsive Grid */
@media (max-width: 1200px) {
    .reviews-grid-container {
        grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
        gap: 25px;
    }
}

@media (max-width: 900px) {
    .reviews-grid-container {
        grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
        gap: 20px;
    }

    /* Scale down proportionally for tablets */
    .review-card {
        width: 100%;
        max-width: 400px;
        height: auto;
        /* Allow Elementor height control to work */
        min-height: 480px;
        /* Slightly smaller minimum for tablets */
    }

    .review-cover-image {
        width: 100%;
        height: 128px;
        /* Maintain original height */
    }

    .review-card-inner {
        width: 100%;
        height: auto;
        /* Allow flexible height based on card height control */
        min-height: 350px;
        /* Smaller minimum for tablets */
        padding: 40px 32px;
    }

    .review-main-content {
        width: 100%;
        max-width: 336px;
    }

    .review-text {
        width: 100%;
        height: auto;
        min-height: 196px;
    }

    .review-text p {
        width: 100%;
        height: auto;
    }

    .reviewer-info {
        width: 100%;
        max-width: none;
        /* Remove width constraint */
        height: auto;
    }

    .reviewer-name {
        width: 100%;
        height: auto;
    }

    .reviewer-title {
        width: 100%;
        height: auto;
    }

    /* Ensure profile image stays fixed on tablet */
    .reviewer-image {
        left: 32px;
        /* Same fixed position as desktop */
        top: 50px;
        /* Same fixed position as desktop */
    }
}

@media (max-width: 768px) and (min-width: 601px) {

    /* Tablet range - keep auto-responsive but ensure profile image positioning */
    .reviewer-image {
        left: 32px;
        top: 50px;
    }
}

@media (max-width: 600px) {
    .reviews-grid-container {
        grid-template-columns: 1fr;
        /* Force single column only on very small screens */
        gap: 20px;
    }

    /* Mobile scaling - True mobile only */
    .review-card {
        width: 100%;
        height: auto;
        /* Allow Elementor height control to work */
        min-height: 420px;
        /* Smaller minimum for mobile */
    }

    .review-cover-image {
        height: 100px;
        /* Slightly smaller for mobile */
    }

    .review-card-inner {
        padding: 30px 24px;
        /* Proportional padding reduction */
        height: auto;
        /* Allow flexible height based on card height control */
        min-height: 300px;
        /* Smaller minimum for mobile */
    }

    .reviewer-image {
        width: 80px;
        /* Slightly smaller for mobile */
        height: 80px;
        left: 4px;
        /* Only 4 pixels from left edge as requested */
        top: 40px;
        /* Slightly higher for mobile */
        border: 3px solid #FFFFFF;

        /* Preserve all transforms on mobile */
        transform: translateY(calc(var(--profile-vertical-adjust) + var(--stars-profile-distance))) translateX(var(--profile-horizontal-adjust));
    }

    .review-text p {
        font-size: 16px;
        /* Slightly smaller text */
        line-height: 24px;
    }

    .reviewer-name strong {
        font-size: 16px;
        line-height: 24px;
        width: 100%;
        height: auto;
        word-wrap: break-word;
        text-align: left;
    }

    .reviewer-title {
        font-size: 14px;
        line-height: 20px;
        width: 100%;
        height: auto;
        word-wrap: break-word;
    }

    /* Ensure proper layout flow on mobile */
    .reviewer-info {
        width: 100%;
        max-width: none;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .reviewer-name {
        width: 100%;
        order: 0;
    }

    .reviewer-title {
        width: 100%;
        order: 1;
    }
}

/* Elementor Editor Styles */
.elementor-editor-active .review-grid-item {
    opacity: 1 !important;
}

/* Empty state */
.elementor-alert {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    text-align: center;
    color: #666;
    margin: 20px 0;
}

/* Collapse review cards to a single column on narrower desktops */
@media (max-width: 1400px) {
    .amico-reviews-wrapper .reviews-grid-container {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        justify-items: stretch !important;
    }

    .amico-reviews-wrapper .review-grid-item,
    .amico-reviews-wrapper .review-card {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 420px !important;
        justify-self: stretch !important;
    }

    .amico-reviews-wrapper .review-grid-item {
        max-width: none !important;
    }

    .amico-reviews-wrapper .review-cover-image {
        width: 100% !important;
    }

    .amico-reviews-wrapper .review-card-inner {
        height: auto !important;
        min-height: 320px !important;
        width: 100% !important;
    }

    .amico-reviews-wrapper .review-main-content,
    .amico-reviews-wrapper .review-text,
    .amico-reviews-wrapper .review-text p {
        width: 100% !important;
        max-width: none !important;
    }
}