/*
 * Styles for the Single Tutor Page Template (single-tutor.php)
 * Version: 11.1 (Mobile Hero Layout)
 *
 * CHANGE LOG:
 * - ADDED: CSS `order` property to move the tutor image above the text on mobile.
 * - ADDED: `margin-bottom` to the tutor image on mobile to create space below it.
 * - REMOVED: Unnecessary `margin-top` from the image on mobile. This creates a much
 *   cleaner and better-spaced mobile hero section, matching the design request.
 */

/* ==========================================================================
   1. GLOBAL OVERFLOW FAILSAFE & MOBILE LAYOUT
   ========================================================================== */

html, body {
    overflow-x: hidden;
}

*, *::before, *::after {
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .tutor-hero-section-final .container {
        flex-direction: column;
        text-align: center;
    }

    /* Re-order elements and add spacing for mobile view */
    .tutor-hero-section-final .hero-content {
        order: 2; /* Content (name, quote, buttons) comes second */
    }

    .tutor-hero-section-final .hero-image-wrapper {
        order: 1; /* Image comes first */
        margin-top: 0; /* Remove previous top margin */
        margin-bottom: 1.5rem; /* Add space AFTER the image */
    }

    .tutor-hero-section-final .hero-cta-buttons {
        justify-content: center;
    }

    .tutor-main-grid, .content-row {
        grid-template-columns: 1fr;
    }
    .content-row {
        gap: 2rem 0;
    }
}

/* ==========================================================================
   2. CONTENT & COLUMN OVERFLOW FIXES
   ========================================================================== */

.tutor-main-column,
.content-row > .tutor-page-section,
.tutor-hero-section-final .container > div {
    min-width: 0;
}

.prose,
.tutor-hero-section-final h1,
.tutor-hero-section-final p {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ==========================================================================
   3. PAGE-SPECIFIC LAYOUT, CARDS, AND SPACING
   ========================================================================== */

.tutor-page-section {
    display: flex;
    flex-direction: column;
    margin-bottom: 3rem;
}
.tutor-main-column > *:last-child {
    margin-bottom: 0;
}
.content-row {
    margin-bottom: 3rem;
}

.tutor-achievements-card,
.tutor-testimonial-slider {
    background-color: white;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.tutor-achievements-card .prose {
    padding: 1.5rem;
}
.tutor-achievements-card .prose ul {
    list-style-position: inside;
    padding-left: 0;
}

@media (min-width: 768px) {
    .content-row {
        display: grid;
        align-items: stretch;
    }
}

/* ==========================================================================
   4. TESTIMONIAL SLIDER (REVISED)
   ========================================================================== */

.tutor-testimonial-slider { padding: 0; }
.slides-viewport { flex-grow: 1; overflow: hidden; width: 100%; }
.slides-container { height: 100%; display: flex; transition: transform 0.4s ease-in-out; }
.slide { width: 100%; flex-shrink: 0; height: 100%; padding: 1.5rem; display: flex; flex-direction: column; }

.testimonial-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    font-style: italic;
    color: #4A5568;
}

.testimonial-content p {
    flex-grow: 0;
    margin-bottom: 0;
}

.testimonial-attribution {
    margin-top: 1.5rem;
    font-style: normal;
}

.attribution-name {
    font-weight: 700;
    color: var(--primary-blue);
    font-size: 1.1rem;
    margin-bottom: 0.35rem;
}

.attribution-detail {
    font-size: 0.95rem;
    color: #4B5563;
    line-height: 1.5;
}

.attribution-detail:last-child {
    color: #9CA3AF;
}

.slider-dots { margin: 1rem 1.5rem 1rem; padding: 0; }
.slider-dots .dot.active { background-color: var(--primary-blue); }

/* ==========================================================================
   5. SIDEBAR STYLES
   ========================================================================== */

.sidebar-icon-list > li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.sidebar-icon-list li:has(.inner-list) {
    margin-bottom: 0.75rem;
}

.sidebar-icon-list > li > span {
    padding-top: 0.1rem;
}

.sidebar-icon-list > li > i {
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.list-item-content {
    flex: 1;
}

.sidebar-icon-list .inner-list {
    list-style-type: disc;
    list-style-position: outside;
    margin-top: 0.25rem;
    padding-left: 1rem;
}

.sidebar-icon-list .inner-list li {
    display: list-item !important;
}