/* Teacher Show Page - Specific Styles */

/* Image icons in story timeline */
.story-icon-image {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

/* Image icons in work cards - when shown in placeholder */
.work-icon-image {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

/* Icon-only image in work-image-wrapper (keeps background) */
.work-image-wrapper img.work-icon-only {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 50%;
    z-index: 3;
    position: relative;
}

/* Image icons in objective section */
.objective-icon-image {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.work-image-placeholder img,
.objective-icon img {
    border-radius: 50%;
}

.teacher-show-header h1 {
    font-size: clamp(1.0rem, 4vw, 2.2rem) !important;
    line-height: 1.2;
    word-break: break-word;
    hyphens: auto;
}

/* Ensure the header container has proper constraints */
.teacher-show-header .container {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}

/* Dynamic font sizes based on viewport width */
@media (max-width: 1477px) {
    .teacher-show-header h1 {
        font-size: clamp(1.0rem, 4vw, 2.1rem) !important;
    }
}
@media (max-width: 1411px) {
    .teacher-show-header h1 {
        font-size: clamp(1.0rem, 4vw, 2.0rem) !important;
    }
}
@media (max-width: 1344px) {
    .teacher-show-header h1 {
        font-size: clamp(1.0rem, 4vw, 1.9rem) !important;
    }
}
@media (max-width: 1277px) {
    .teacher-show-header h1 {
        font-size: clamp(1.0rem, 4vw, 1.8rem) !important;
    }
}
@media (max-width: 1209px) {
    .teacher-show-header h1 {
        font-size: clamp(1.0rem, 4vw, 1.6rem) !important;
    }
}

@media (max-width: 1075px) {
    .teacher-show-header h1 {
        font-size: clamp(1.0rem, 4vw, 1.5rem) !important;
    }
}

@media (max-width: 1009px) {
    .teacher-show-header h1 {
        font-size: clamp(1.0rem, 4vw, 1.4rem) !important;
    }
}

@media (max-width: 941px) {
    .teacher-show-header h1 {
        font-size: clamp(1.0rem, 4vw, 1.3rem) !important;
    }
}

@media (max-width: 874px) {
    .teacher-show-header h1 {
        font-size: clamp(1.0rem, 4vw, 1.2rem) !important;
    }
}

@media (max-width: 807px) {
    .teacher-show-header h1 {
        font-size: clamp(1.0rem, 4vw, 1.1rem) !important;
    }
}

@media (max-width: 740px) {
    .teacher-show-header h1 {
        font-size: 1.0rem !important;
    }
}