/* =========================================================
   UTEC EXTRA CLASS — Poster Ratio Consistency v3.5.28
   Source poster standard: 1080 × 1440 px (3:4 portrait)
   Goal: identical, uncropped poster framing on desktop + mobile.
   ========================================================= */

/* Public Extra Class schedule cards — desktop, tablet and mobile */
.public-premium-class-grid .class-theme-visual,
.public-premium-class-grid .class-theme-visual.has-theme-image {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 3 / 4 !important;
    overflow: hidden !important;
    background: #eef4ff;
}

.public-premium-class-grid .class-theme-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
    transform: none !important;
}

/* Never enlarge the poster on hover: enlargement would crop its edges. */
.public-premium-class-grid .public-class-card:hover .class-theme-image {
    transform: none !important;
}

/* Keep overlays readable without masking the artwork. */
.public-premium-class-grid .class-theme-image-shade {
    background: linear-gradient(180deg, rgba(3,16,42,0) 66%, rgba(3,16,42,.17) 100%) !important;
}

/* Paid class detail page: use the same portrait poster frame. */
.class-detail-summary-card .class-detail-visual.has-theme-image {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 3 / 4 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #eef4ff !important;
}

.class-detail-summary-card .class-detail-theme-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
}

.class-detail-summary-card .class-detail-image-shade {
    background: linear-gradient(180deg, rgba(1,14,39,0) 60%, rgba(1,14,39,.48) 100%) !important;
}

/* Desktop: portrait poster remains full-width in the card. */
@media (min-width: 721px) {
    .public-premium-class-grid .class-theme-visual,
    .public-premium-class-grid .class-theme-visual.has-theme-image {
        aspect-ratio: 3 / 4 !important;
        border-radius: 0 !important;
    }
}

/* Mobile: retain the existing compact horizontal card layout,
   while the thumbnail itself stays a true 3:4 portrait. */
@media (max-width: 720px) {
    .public-premium-class-grid .class-theme-visual,
    .public-premium-class-grid .class-theme-visual.has-theme-image {
        aspect-ratio: 3 / 4 !important;
        min-height: 0 !important;
        border-radius: 17px !important;
    }

    .public-premium-class-grid .class-theme-image {
        object-fit: cover !important;
        object-position: center !important;
    }

    .class-detail-summary-card .class-detail-visual.has-theme-image {
        aspect-ratio: 3 / 4 !important;
        min-height: 0 !important;
    }
}

/* Very small phones: preserve the same ratio rather than shrinking height. */
@media (max-width: 390px) {
    .public-premium-class-grid .class-theme-visual,
    .public-premium-class-grid .class-theme-visual.has-theme-image {
        aspect-ratio: 3 / 4 !important;
        min-height: 0 !important;
    }
}