/* =====================================================================
   Both Learners — responsive.css
   Mobile, tablet and desktop layout + auto-fitting thumbnails.
   Loaded after style.css (see inc/responsive-media.php).

   Breakpoints
     Desktop        ≥ 1201px
     Laptop         1025 – 1200px
     Tablet         769 – 1024px   (portrait and landscape)
     Mobile         ≤ 768px
     Small mobile   ≤ 480px
   ===================================================================== */


/* ─────────────────────────────────────────────────────────────────────
   1. GLOBAL SAFETY — nothing may overflow the screen
   ───────────────────────────────────────────────────────────────────── */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, canvas, iframe, embed, object { max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, .section-title, .hero-title { overflow-wrap: break-word; word-wrap: break-word; hyphens: manual; }
p, li, a, span { overflow-wrap: break-word; }

/* Content from the editor (blog posts, pages) */
.entry-content iframe[src*="youtube"],
.entry-content iframe[src*="youtu.be"],
.entry-content iframe[src*="vimeo"],
.wp-block-embed iframe { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; }
.entry-content table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-collapse: collapse; }
.entry-content pre { max-width: 100%; overflow-x: auto; }
.entry-content figure, .entry-content .wp-block-image { max-width: 100%; }


/* ─────────────────────────────────────────────────────────────────────
   2. AUTO-FITTING THUMBNAILS
   Every thumbnail sits in a fixed-ratio frame and fills it (object-fit),
   so any uploaded image — any size or shape — fits each area cleanly.
   ───────────────────────────────────────────────────────────────────── */
.bl-thumb { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Home page blog cards + generic .blog-card */
.blog-card-image-wrap,
.blog-posts-wrap .blog-card .blog-card-image-wrap { height: auto !important; aspect-ratio: 16 / 9; }
.blog-card-image-wrap > img,
.blog-card-image,
.blog-posts-wrap .blog-card .blog-card-image { width: 100%; height: 100% !important; object-fit: cover; }
.blog-card-image-wrap > div { height: 100% !important; }

/* Blog page grid cards */
body .bl-card-thumb { height: auto; aspect-ratio: 16 / 9; }
body .bl-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
body .bl-card-thumb-ph { height: auto; aspect-ratio: 16 / 9; }

/* Blog page "Latest Post" hero */
body .bl-featured-img { min-height: 300px; }
body .bl-featured-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Sidebar recent posts (4:3) */
body .bl-rp-img, body .bl-rp-ph { width: 64px; height: 48px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }

/* Single post hero */
body .bl-post-hero { max-height: none; aspect-ratio: 21 / 9; }
body .bl-post-hero img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
body .bl-post-hero .hero-ph { height: 100%; }

/* "Up Next" card */
body .bl-next-card .nc-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* YouTube cards (home page) */
.yt-thumb-frame { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; background: #1F2124; }
.yt-thumb-frame .bl-thumb { transition: transform .4s ease; }
.yt-thumb-frame:hover .bl-thumb { transform: scale(1.05); }


/* ─────────────────────────────────────────────────────────────────────
   3. HEADER / NAVIGATION
   Switch to the hamburger menu on tablets so the menu never wraps.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .header-nav ul li a { padding: .5rem .7rem; font-size: .82rem; }
    .header-cta { margin-left: .75rem; }
}
@media (max-width: 1024px) {
    .header-nav, .header-cta { display: none !important; }
    .hamburger { display: flex !important; }
    .header-inner { padding: 0 1.25rem; }
    .mobile-nav { max-height: calc(100vh - var(--header-height)); overflow-y: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 480px) {
    .header-inner { padding: 0 1rem; }
    .header-logo img, a.header-logo img { max-width: 190px !important; }
}


/* ─────────────────────────────────────────────────────────────────────
   4. LAYOUT GRIDS — written in templates as inline styles
   These rules make every inline grid collapse sensibly on smaller
   screens, including grids added in future templates.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    main [style*="grid-template-columns:repeat(4"]:not(#bl-scene *):not(#abt-scene *):not(#testimonials-track),
    main [style*="grid-template-columns: repeat(4"]:not(#bl-scene *):not(#abt-scene *):not(#testimonials-track),
    main [style*="grid-template-columns:repeat(3"]:not(#bl-scene *):not(#abt-scene *):not(#testimonials-track),
    main [style*="grid-template-columns: repeat(3"]:not(#bl-scene *):not(#abt-scene *):not(#testimonials-track) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
    main [style*="grid-template-columns:repeat(3"]:not(#bl-scene *):not(#abt-scene *):not(#testimonials-track),
    main [style*="grid-template-columns: repeat(3"]:not(#bl-scene *):not(#abt-scene *):not(#testimonials-track),
    main [style*="grid-template-columns:repeat(2"]:not(#bl-scene *):not(#abt-scene *):not(#testimonials-track),
    main [style*="grid-template-columns: repeat(2"]:not(#bl-scene *):not(#abt-scene *):not(#testimonials-track),
    main [style*="grid-template-columns:1fr 1fr"]:not(#bl-scene *):not(#abt-scene *):not(#testimonials-track),
    main [style*="grid-template-columns: 1fr 1fr"]:not(#bl-scene *):not(#abt-scene *):not(#testimonials-track) { grid-template-columns: 1fr !important; }
}
@media (max-width: 380px) {
    main [style*="grid-template-columns:repeat(4"]:not(#bl-scene *):not(#abt-scene *):not(#testimonials-track),
    main [style*="grid-template-columns: repeat(4"]:not(#bl-scene *):not(#abt-scene *):not(#testimonials-track) { grid-template-columns: 1fr !important; }
}
/* The cinematic intro videos and the testimonial slider are excluded above
   (they manage their own layout). */

/* Class-based grids from style.css */
@media (max-width: 1024px) {
    .grid-3, .grid-4, .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .about-preview-grid, .youtube-grid, .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .service-section-grid { gap: 2.5rem; }
}
@media (max-width: 640px) {
    .grid-2, .grid-3, .grid-4, .blog-grid, .services-grid { grid-template-columns: 1fr; }
}


/* ─────────────────────────────────────────────────────────────────────
   5. SPACING & TYPE ON SMALL SCREENS
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .container { padding-left: 1.25rem; padding-right: 1.25rem; }
    .section-subtitle { font-size: 1rem; }
    p { font-size: 1rem; }
    [style*="padding:2.5rem"], [style*="padding: 2.5rem"] { padding: 1.75rem !important; }
    [style*="padding:3rem"], [style*="padding: 3rem"] { padding: 2rem !important; }
}
@media (max-width: 480px) {
    .container { padding-left: 1rem; padding-right: 1rem; }
    [style*="padding:2.5rem"], [style*="padding: 2.5rem"],
    [style*="padding:3rem"], [style*="padding: 3rem"] { padding: 1.35rem !important; }
    /* Prevent iOS zoom on focus */
    input, select, textarea { font-size: 16px !important; }
}


/* ─────────────────────────────────────────────────────────────────────
   6. BUTTONS
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .btn { white-space: normal; text-align: center; justify-content: center; line-height: 1.35; }
    .btn-lg { padding: .9rem 1.5rem; font-size: .9rem; }
    .btn-group { flex-direction: column; align-items: stretch; width: 100%; }
    .btn-group .btn { width: 100%; }
}


/* ─────────────────────────────────────────────────────────────────────
   7. HOME PAGE
   ───────────────────────────────────────────────────────────────────── */
/* Hero: stack on tablet as well as mobile */
@media (max-width: 1024px) {
    #hero { min-height: auto; }
    .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; text-align: center; padding: 3rem 1.5rem 4rem; }
    .hero-content { animation: none; }
    .hero-image-wrap { order: -1; animation: none; }
    .hero-image-frame { width: 380px; margin: 0 auto; }
    .hero-img { height: 440px; }
    .hero-subtitle { margin-left: auto; margin-right: auto; }
    .hero-actions, .hero-tags { justify-content: center; }
    .hero-social-proof { margin: 0 auto; }
}
@media (max-width: 768px) {
    .hero-image-frame { width: 300px; }
    .hero-img { height: 360px; }
}
@media (max-width: 480px) {
    .hero-grid { padding: 2rem 1rem 3rem; }
    .hero-image-frame { width: 240px; }
    .hero-img { height: 290px; }
    .hero-tags { gap: .4rem; }
    .hero-tag { font-size: .74rem; }
    .hero-social-proof { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; width: 100%; }
    .hero-social-proof .proof-divider { display: none; }
}

/* Counters */
@media (max-width: 480px) {
    .counter-item { padding: 1rem .5rem; }
    .counter-label { font-size: .74rem; }
}

/* About preview */
@media (max-width: 1024px) {
    .about-preview-image { max-width: 520px; margin: 0 auto; }
    .about-preview-image img { height: 460px; }
}
@media (max-width: 768px) {
    .about-preview-image img { height: 380px; }
    .about-preview-image .exp-badge { right: 12px; bottom: 12px; }
}
@media (max-width: 480px) { .about-preview-image img { height: 320px; } }

/* Both Learners preview box */
@media (max-width: 480px) {
    .bl-preview-box { padding: 1.75rem 1.25rem; }
}

/* Intro video: the player (css/intro-video.css) handles its own portrait
   layout on phones. Stack the subscribe bar below it on small screens. */
@media (max-width: 480px) {
    .bl-yt-bar { flex-direction: column; align-items: stretch !important; text-align: center; }
}

/* YouTube latest videos */
@media (max-width: 1024px) { .yt-videos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 640px)  { .yt-videos-grid { grid-template-columns: 1fr !important; } }


/* ─────────────────────────────────────────────────────────────────────
   8. BLOG LISTING PAGE
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
    body .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
    body .bl-main-layout { grid-template-columns: 1fr; }
    body .bl-sidebar { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    body .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    body .bl-featured-post { grid-template-columns: 1fr; min-height: 0; }
    body .bl-featured-img { min-height: 0; aspect-ratio: 16 / 9; }
    body .bl-featured-content { padding: 1.5rem; }
}
@media (max-width: 640px) {
    body .bl-sidebar { grid-template-columns: 1fr; }
    body .bl-grid { grid-template-columns: 1fr; }
    /* Category filters scroll sideways instead of wrapping into many rows */
    body .bl-cat-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .4rem; scrollbar-width: thin; }
    body .bl-cat-tab { flex-shrink: 0; white-space: nowrap; }
}


/* ─────────────────────────────────────────────────────────────────────
   9. SINGLE BLOG POST
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) { body .bl-post-hero { aspect-ratio: 16 / 9; } }
@media (max-width: 768px) {
    body .bl-next-card { grid-template-columns: 1fr; }
    body .bl-next-card .nc-img { min-height: 0; aspect-ratio: 16 / 9; }
    body .bl-next-card .nc-body { padding: 1.25rem; }
    body .bl-byline { flex-direction: column; align-items: flex-start; }
    body .bl-post-content .entry-content,
    body .bl-post-content .entry-content p { font-size: 1rem; line-height: 1.8; }
    body .bl-post-content .entry-content h2 { font-size: 1.4rem; }
}
@media (max-width: 480px) {
    body .bl-share .sh-label { width: 100%; }
    body .bl-share a, body .bl-share button { padding: 6px 11px; }
    body .bl-author-card { padding: 1.25rem; }
}


/* ─────────────────────────────────────────────────────────────────────
   10. ABOUT PAGE
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .about-intro-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .about-photo { position: static; max-width: 420px; margin: 0 auto; }
}
@media (max-width: 480px) {
    .about-photo-frame .photo-badge { right: 8px; bottom: 8px; }
}


/* ─────────────────────────────────────────────────────────────────────
   11. SERVICES & SERVICE PAGES
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .service-page-hero { padding: calc(var(--header-height) + 2rem) 0 4.5rem; }
    .service-page-hero::after { height: 40px; }
    .service-card { padding: 1.75rem 1.4rem; }
    .service-section { padding: 3.5rem 0; }
    .faq-item.open .faq-answer { max-height: 600px; }
}


/* ─────────────────────────────────────────────────────────────────────
   12. RESUME PAGE
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .resume-body { grid-template-columns: 1fr; }
    .resume-left { border-right: none; border-bottom: 1px solid var(--color-border); }
}
@media (max-width: 768px) {
    .resume-header { padding: 2rem 1.5rem 1.5rem; }
    .resume-left, .resume-right { padding: 1.75rem 1.5rem; }
    .resume-download { padding: 1.5rem; }
    .resume-contact-pills { justify-content: center; }
}
@media (max-width: 560px) {
    .resume-exp-header { flex-direction: column; gap: .4rem; }
    .resume-name { font-size: 1.7rem; }
    .resume-photo { width: 104px; height: 104px; }
}


/* ─────────────────────────────────────────────────────────────────────
   13. CONTACT PAGE
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .form-row { grid-template-columns: 1fr; }
    .radio-group { flex-direction: column; gap: .5rem; }
}


/* ─────────────────────────────────────────────────────────────────────
   14. FOOTER
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .footer-main { padding: 3.5rem 0 2rem; gap: 2.25rem; }
    .footer-legal-links { justify-content: center; gap: 1rem; }
}
@media (max-width: 480px) {
    .newsletter-form { flex-direction: row; }
    .newsletter-input { min-width: 0; }
}


/* ─────────────────────────────────────────────────────────────────────
   15. LARGE SCREENS
   ───────────────────────────────────────────────────────────────────── */
@media (min-width: 1600px) {
    :root { --container-max: 1280px; }
    body { font-size: 1.04rem; }
}