/* ============================================================
   InatUni — custom overrides / responsive polish
   Loaded site-wide via frontend.layouts.app (after the theme bundle).
   Page-specific rules are scoped by their page/section classes.
   ============================================================ */

/* ============ Careers page — responsive polish ============ */
@media (max-width: 991px) {
    /* Hero illustration was cropped by object-fit:cover inside a fixed 400px box — show it fully */
    .hero-section-career .two-columns-hero-section__main-img { height: auto !important; max-height: none !important; }
    .hero-section-career .two-columns-hero-section__main-img img.img-cover { height: auto !important; object-fit: contain !important; }
    .hero-section-career .two-columns-hero-section__content { text-align: center; }
    .hero-section-career .two-columns-hero-section__images-side { margin-top: 26px; }
    .hero-section-career .main-heading br { display: none; }
}
@media (max-width: 767px) {
    /* Stacked "Why InatUni?" cards were touching — add a gap between them */
    .know-us-section .why-us_card-item { margin-bottom: 20px; padding-bottom: 24px; }
    .hero-section-career .main-heading { font-size: 32px; line-height: 1.22; }
    /* Job-locations table: give each stacked row spacing and full-width buttons */
    .custom-table .table-row { padding: 16px 0; row-gap: 8px; border-bottom: 1px solid #e7e9e4; }
    .custom-table .table-cell.text-center { margin-top: 8px; }
    .custom-table .table-cell .btn { width: 100%; justify-content: center; }
    .hero-section-career__job-search .text-p { padding: 0 8px; }
    /* Our Location cards: gap when stacked */
    .course-category-section .course-category-card { margin-bottom: 16px; }
}
@media (max-width: 575px) {
    .hero-section-career .main-heading { font-size: 27px; }
}

/* ============ Shared button fixes (site-wide) ============ */
/* Flip buttons: keep the label centred both ways */
.btn-flip-effect { align-items: center !important; justify-content: center !important; text-align: center; }
/* Keep flip-button label in normal case (default + on-hover flip text) instead of UPPERCASE */
.btn-flip-effect.keep-case,
.btn-flip-effect.keep-case .btn-flip-effect__text,
.btn-flip-effect.keep-case:after { text-transform: none !important; }
/* Subscription-plan buttons are display:inline-block with a min-height but no vertical padding,
   so the label flows to the top-left. Flex-center them so the text sits dead-centre (home + educators). */
.subscription-plans-section .btn {
    display: flex !important; align-items: center !important; justify-content: center !important;
    text-align: center; width: 100% !important; min-height: 52px; padding: 12px 20px !important; line-height: 1.2;
}

/* ============ Educators page (/educators) ============ */
/* Hero: keep the educator figure fully visible and grounded at the bottom */
.hero-section-educator { min-height: 520px; }
.hero-section-educator .single-instructor-hero-section__main-img { max-height: none; align-self: flex-end; }
.hero-section-educator .single-instructor-hero-section__main-img .edu-hero-img { width: 100%; height: auto; max-height: 600px; object-fit: cover; object-position: bottom; display: block; }
.hero-section-educator .single-instructor-hero-section__spinning-img { top: 7.3em; right: 25px; }

.edu-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 0 0 44px; }
.edu-intro__title { font-family: "Lato", sans-serif; font-weight: 700; font-size: 44px; line-height: 1.08; color: #004238; margin: 0; }
.edu-intro__text { font-family: "Lato", sans-serif; font-size: 17px; line-height: 1.9; color: #8a93a3; margin: 0; }

/* Tablet: stack the hero, image comes below the text and centres */
@media (max-width: 991px) {
    .hero-section-educator { min-height: 0; }
    .hero-section-educator .single-instructor-hero-section__contents { padding: 70px 0 40px; }
    .hero-section-educator .single-instructor-hero-section__main-img { align-self: center; }
    /* Show the WHOLE figure on mobile — contain (not cover) so the face is never cropped */
    .hero-section-educator .single-instructor-hero-section__main-img .edu-hero-img {
        height: auto !important; max-height: 440px !important; object-fit: contain !important; object-position: center bottom; margin: 0 auto;
    }
    .edu-intro { grid-template-columns: 1fr; gap: 14px; padding: 8px 0 24px; }
    .edu-intro__title { font-size: 30px; }
    .edu-intro__text { font-size: 15.5px; line-height: 1.8; }
    /* Forced <br> line-breaks look wrong once columns narrow — let text wrap naturally */
    .educate-section .text-p br,
    .subscription-plans-section p br,
    .inatuni-register-form p br { display: none; }
    .subscription-plans-section .plan-box { height: auto; }
}
/* Phone: smaller headline / description, full-width buttons, tighter stats */
@media (max-width: 767px) {
    /* extra top gap so the headline isn't stuck right under the overlapping header card */
    .hero-section-educator .single-instructor-hero-section__contents { padding: 84px 0 30px; }
    .hero-section-educator .single-instructor-hero-section__contents h1 { font-size: 32px; line-height: 1.18; }
    .hero-section-educator .single-instructor-hero-section__contents .single-instructor-hero-section__description span { font-size: 15px; line-height: 22px; }
    .hero-section-educator .single-instructor-hero-section__contents .mt-40 { margin-top: 22px !important; }
    .hero-section-educator .single-instructor-hero-section__contents .mt-60 { margin-top: 30px !important; }
    .hero-section-educator .single-instructor-hero-section__contents .gap-54 { gap: 26px !important; }
    .hero-section-educator .btn.btn-xlg { width: 100%; justify-content: center; }
    .hero-section-educator .single-instructor-hero-section__main-img .edu-hero-img { max-height: 360px !important; }
    .single-instructor-hero-section__contents h1.font-64 { font-size: 30px; line-height: 1.2; }
    .edu-intro__title { font-size: 26px; }
    .edu-intro__title br { display: none; }
    .horizontal-stepper .btn-flip-effect { width: 100%; justify-content: center; }
    .subscription-plan-card { margin-bottom: 22px; }
    .subscription-plans-section .plan-title { font-size: 18px; }
    .inatuni-register-form .single-instructor-hero_wrap { padding: 26px 16px; }
    .inatuni-register-form h1.sub-heading { font-size: 26px; line-height: 1.22; }
    /* left-align the intro copy on mobile */
    .inatuni-register-form .font-18 { font-size: 15px; max-width: 460px; margin-left: auto; margin-right: auto; text-align: left !important; }
    /* register-form image now shows on mobile — show it fully (no crop), just cap the height */
    .inatuni-register-form img { max-height: 360px; width: auto; max-width: 100%; height: auto; object-fit: contain; margin: 0 auto; display: block; border-radius: 12px; }
}
@media (max-width: 575px) {
    .single-instructor-hero-section__contents h1.font-64 { font-size: 26px; }
    .edu-intro__title { font-size: 23px; }
    .subscription-plans-section .btn { font-size: 15px; min-height: 48px; }
}

/* ============ Certificate of Achievement page ============ */
/* "Certify Your Success" band — same intro treatment as the about page */
.talent-style-wrapper .row { align-items: flex-start; }
.talent-style-wrapper .span-block { display: inline-block; background: var(--yellow); color: #000; font-family: "Inter", sans-serif; font-weight: 600; font-size: 15px; line-height: 1; border-radius: 8px; padding: 4px 20px; margin-bottom: 20px; }
/* .sub-heading forces font-size:30px !important in the theme, so override with !important */
.talent-style-wrapper .headline { font-family: "Inter", sans-serif; font-weight: 600; font-size: 44px !important; line-height: 1.2 !important; margin-right: 20px !important; color: #004238 !important; }
.talent-style-wrapper .talent-point h4 { font-family: "Inter", sans-serif; font-weight: 600; color: #000; }
.talent-style-wrapper .talent-point p { font-family: "Inter", sans-serif; color: #8a93a3; margin-left: 30px !important; line-height: 1.7; }
@media (max-width: 991px) {
    .talent-style-wrapper .headline { font-size: 30px !important; }
    .talent-style-wrapper .col-lg-7 { margin-top: 18px; }
}
@media (max-width: 767px) {
    .talent-style-wrapper .headline { font-size: 26px !important; }
    /* start the copy from the left edge on mobile (drop the desktop indent + any centering) */
    .talent-style-wrapper .talent-point h4,
    .talent-style-wrapper .talent-point p { margin-left: 0 !important; text-align: left !important; }
}

/* ============ Using InatUni page (/using-inatuni) ============ */
/* Top section clears the overlapping header — needs more room as the header grows taller on mobile */
.using-inatuni-page .using-inatuni-top { padding-top: 100px !important; }
@media (max-width: 991px) { .using-inatuni-page .using-inatuni-top { padding-top: 150px !important; } }
@media (max-width: 767px) { .using-inatuni-page .using-inatuni-top { padding-top: 170px !important; } }
.using-inatuni-page .other_page_top_title { line-height: 1.12; }
@media (max-width: 991px) {
    .using-inatuni-page .other_page_top_title.main-heading { font-size: 34px !important; line-height: 1.15 !important; }
}
@media (max-width: 767px) {
    .using-inatuni-page .other_page_top_title.main-heading { font-size: 28px !important; line-height: 1.2 !important; }
    .using-inatuni-page h3.font-24 { font-size: 19px; }
    .using-inatuni-page h2.font-24,
    .using-inatuni-page h2[style*="font-size:25px"] { font-size: 20px !important; line-height: 1.32; }
    .using-inatuni-page .text-p { font-size: 15px; }
    /* CTA: drop the forced line-break and give the copy spacing when stacked */
    .using-inatuni-page .join-inatuni-title br { display: none; }
    .using-inatuni-page .join-inatuni-content { margin-top: 16px; }
}
@media (max-width: 575px) {
    .using-inatuni-page .other_page_top_title.main-heading { font-size: 25px !important; }
}

/* ============ Investors page (/investors) ============ */
/* Hero mentor illustration was cropped by object-fit:cover in a fixed 440px box — show it fully */
.new-banner .new-image .two-columns-hero-section__main-img.inv-mentor-img { width: 100%; height: auto; max-height: 470px; }
.inv-mentor-img .img-cover { width: 100%; height: auto; max-height: 470px; object-fit: contain; }

/* ============ Blogs page (/blogs) ============ */
/* Grids are hard-coded to 3 / 5 columns — add breakpoints so cards stack on smaller screens */
@media (max-width: 991px) {
    .blog-featured-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .blog-dev-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .blog-dev { margin-top: 44px; }
}
@media (max-width: 767px) {
    /* one card below another on mobile */
    .blog-featured-grid,
    .blog-dev-grid { grid-template-columns: 1fr; gap: 16px; }
    /* stacked dev cards: full 1px border + hover lift transition */
    .blog-dev-card {
        border: 1px solid #e7e9e4; border-radius: 14px; padding: 16px 16px 14px;
        background: #fff; box-shadow: 0 1px 2px rgba(12, 31, 26, .05);
        transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    }
    /* zoom-in effect on hover/tap (works on mobile too) */
    .blog-dev-card:hover,
    .blog-dev-card:focus-visible,
    .blog-dev-card:active {
        transform: scale(1.04);
        box-shadow: 0 18px 34px -18px rgba(13, 77, 58, .35);
        border-color: #cfe0d8;
    }
    .blog-dev-card:hover h4 { color: #0d4d3a; }
    .blog-dev-card h4 { height: auto; line-height: 1.35; transition: color .2s ease; }
    .blog-featured-card h3 { min-height: 0; }
    /* category header: stack the title and "See all…" link */
    .blog-dev-header { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 18px; }
}

/* ============ Our Partners page (/our-partners) ============ */
/* Partner logos had no styling — box each one so they're contained, padded and never stick together */
.partner_logos { row-gap: 20px; align-items: stretch; }
.partner_logos .logo_img { display: flex; }
.partner_logos .logo_img img {
    width: 100%; height: 120px; object-fit: contain;
    border: 1px solid #e7e9e4; border-radius: 12px; padding: 18px; background: #fff;
    transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease;
}
.partner_logos .logo_img img:hover {
    border-color: #cfe0d8; box-shadow: 0 14px 28px -16px rgba(13, 77, 58, .3); transform: translateY(-3px);
}
@media (max-width: 767px) {
    .partner_logos .logo_img img { height: 96px; padding: 14px; }
}

/* Reusable: first content section clears the overlapping fixed header (mobile header is taller) */
.page-top-clear { padding-top: 90px !important; }
@media (max-width: 991px) { .page-top-clear { padding-top: 150px !important; } }
@media (max-width: 767px) { .page-top-clear { padding-top: 160px !important; } }

/* ============ Sticky header (mobile) ============ */
/* The scrolled header is locked to height:162px, which clips the "Join for free" button.
   Let it grow to fit its content so the button is always visible. */
@media (max-width: 767px) {
    .theme-header-1__main.sticky {
        height: auto !important;
        min-height: 162px;
        padding-bottom: 10px;
        overflow: visible;
    }
}

/* ============ About page — feature cards ============ */
/* The .feature-grid cards stack with dividing borders but no gap, so they stick together on mobile */
@media (max-width: 991px) {
    .feature-grid { gap: 16px; border: 0; }
    .feature-card { border: 1px solid #e3e3e3; border-radius: 12px; padding-bottom: 24px; }
}
@media (max-width: 600px) {
    .feature-grid { gap: 14px; }
}

.plan-revenue-badge {   
   font-size:14px; border:2px solid #D5D52B; border-radius:10px; padding:5px;margin-top: 8px;
}

/* ============ Social login buttons (frontend pages, e.g. /educators form) ============ */
.social-login { margin-top: 6px; }
.social-divider { display: flex; align-items: center; gap: 14px; color: #6c766f; font-size: 12.5px; margin-bottom: 18px; }
.social-divider::before, .social-divider::after { content: ""; flex: 1 1 auto; height: 1px; background: #e3e7e3; }
.social-divider span { white-space: nowrap; }
.social-btns { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
.social-btn { width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1.5px solid #a78bfa; border-radius: 14px; cursor: pointer; text-decoration: none; box-shadow: 0 2px 6px rgba(16, 24, 40, .06); transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; }
.social-btn img { width: 28px; height: 28px; display: block; object-fit: contain; }
.social-btn:hover, .social-btn:focus-visible { border-color: #7c3aed; box-shadow: 0 12px 24px -8px rgba(124, 58, 237, .28); transform: translateY(-3px); }

/* Educator register-form social buttons: match the login/signup style (the theme's
   .inatuni-register-form .social-btn has higher specificity, so override it here) + tidy spacing. */
.inatuni-register-form .social-login { margin-top: 20px; }
.inatuni-register-form .social-divider { display: flex; align-items: center; gap: 14px; color: #6c766f; font-size: 13px; margin: 0 0 18px; }
.inatuni-register-form .social-divider::before,
.inatuni-register-form .social-divider::after { content: ""; flex: 1 1 auto; height: 1px; background: #e3e7e3; }
.inatuni-register-form .social-btns { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-bottom: 4px; }
/* circular, no border, and no grey hover — just a soft shadow lift */
.inatuni-register-form .social-btn {
    width: 56px !important; height: 56px !important; border-radius: 50% !important; border: none !important; background: #fff !important;
    box-shadow: 0 2px 10px rgba(16, 24, 40, .12) !important; transition: box-shadow .3s ease, transform .3s ease;
}
.inatuni-register-form .social-btn:hover,
.inatuni-register-form .social-btn:focus-visible {
    border: none !important; background: #fff !important; box-shadow: 0 8px 20px rgba(16, 24, 40, .18) !important; transform: translateY(-3px);
}
.inatuni-register-form .social-btn img { width: 26px !important; height: 26px !important; }
.inatuni-register-form .log-in-box { margin-top: 16px; }

/* Terms checkbox was stuck to the submit button — give it breathing room */
.inatuni-register-form .form-check { margin: 16px 0 20px; display: flex; align-items: flex-start; gap: 8px; }
.inatuni-register-form .form-check .form-check-input { margin-top: 3px; flex: none; }