/* ==========================================================================
   EDZIO GLOBAL — COUNTRY PAGES RESPONSIVE LAYER
   Range covered: 300px  ->  2560px
   Applies to (root only):
     uk.php, australia.php, france.php, germany.php, ireland.php, uae.php

   Linked LAST on the page (just before footer.php), so ordinary rules already
   beat the page's own <style> blocks and the shared courses carousel
   component. !important appears only where the markup carries a style=""
   attribute.

   FAQ blocks are named per country (uk-faq-*, aus-faq-*, ger-faq-*, ire-faq-*,
   fra-unique-faq-*, uae-unique-faq-*), so they are matched with substring
   selectors instead of being listed one by one.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBAL GUARDS
   -------------------------------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

img:not(#hero-video),
video:not(#hero-video),
iframe {
    max-width: 100%;
}

h1, h2, h3, h4, p, li, td, th {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* The hero video is absolutely positioned; keep it inside the hero box */
.hero {
    position: relative;
    overflow: hidden;
}


/* --------------------------------------------------------------------------
   2. FLUID CORE — container, section rhythm, headings
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    padding-left: clamp(14px, 3.2vw, 40px);
    padding-right: clamp(14px, 3.2vw, 40px);
}

section {
    padding-top: clamp(36px, 6vw, 60px);
    padding-bottom: clamp(36px, 6vw, 60px);
}

h2 {
    font-size: clamp(1.45rem, 5vw, 3.2rem);
}

h3 {
    font-size: clamp(1.05rem, 3.2vw, 1.4rem);
}

.hero-content h1 {
    font-size: clamp(1.65rem, 7vw, 5.5rem);
}

.hero-content p {
    font-size: clamp(0.85rem, 3vw, 1.4rem);
}


/* --------------------------------------------------------------------------
   3. SECTION-LEVEL FIXES
   -------------------------------------------------------------------------- */

/* Sticky in-page section nav. The site header is position:fixed and animates
   between a tall state (~135px, at the top of the page) and a short state
   (~97px, once scrolled), so no hard-coded offset is right in both — the
   stock 75px/89px values left the links buried under the header. The inline
   script next to the nav element pins it to the header's real bottom edge;
   this is only the no-JS fallback. */
.main-nav {
    top: 97px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.main-nav::-webkit-scrollbar {
    display: none;
}

.nav-link {
    padding: 0 clamp(10px, 2.2vw, 20px);
    font-size: clamp(0.62rem, 1.8vw, 0.75rem);
}

/* Split intro blocks */
.split-layout {
    gap: clamp(24px, 4vw, 60px);
}

.image-box img {
    height: clamp(200px, 42vw, 500px);
}

/* Scholarships */
.scholarship-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: clamp(16px, 2.4vw, 30px);
}

.scholarship-item {
    padding: clamp(20px, 3.2vw, 35px);
}

.scholarship-item h4 {
    font-size: clamp(1.05rem, 3vw, 1.4rem);
}

.scholarship-item ul {
    font-size: clamp(0.82rem, 2.3vw, 0.95rem);
}

/* Trends grid (UAE and friends) */
.trends-grid,
[class*="trends-grid"] {
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: clamp(16px, 2.2vw, 25px);
}

.trend-card,
[class*="trend-card"] {
    padding: clamp(20px, 3vw, 30px);
}

/* Salary / cost tables: keep the horizontal scroll but hint it on mobile */
.job-table-wrapper {
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

.job-table th {
    padding: clamp(10px, 1.6vw, 16px) clamp(12px, 1.8vw, 20px);
    font-size: clamp(0.8rem, 1.9vw, 1.05rem);
}

.job-table td {
    padding: clamp(9px, 1.4vw, 14px) clamp(12px, 1.8vw, 20px);
    font-size: clamp(0.78rem, 1.8vw, 0.95rem);
    vertical-align: top;
}

.job-section-title {
    color: var(--gold) !important;
    font-size: clamp(1.15rem, 3vw, 1.4rem);
    font-weight: 800 !important;
    margin: 30px 0 15px !important;
    display: block !important;
    letter-spacing: 0.5px;
}

.job-section-title::before {
    display: none !important;
}

/* Course slider */
.course-tab {
    padding: clamp(0.9rem, 2.4vw, 1.5rem);
    gap: clamp(0.9rem, 2vw, 1.5rem);
}

.stats-grid {
    gap: clamp(6px, 1.2vw, 10px);
}

.stat-value {
    font-size: clamp(0.75rem, 2vw, 0.85rem);
}

/* Quote band */
.quote-section {
    padding: clamp(56px, 9vw, 120px) 0;
}

/* Parallax is unreliable on touch devices and causes jumps on small screens */
@media (max-width: 992px), (hover: none) {
    .scholarships-section,
    .quote-section {
        background-attachment: scroll;
    }
}


/* --------------------------------------------------------------------------
   4. FAQ BLOCKS (all country variants)
   -------------------------------------------------------------------------- */
[class*="faq-wrapper"] {
    padding-left: clamp(14px, 3vw, 20px);
    padding-right: clamp(14px, 3vw, 20px);
    padding-top: clamp(48px, 8vw, 100px);
    padding-bottom: clamp(48px, 8vw, 100px);
}

[class*="faq-container"],
[class*="-unique-container"] {
    width: 100%;
}

[class*="faq-main-title"],
[class*="-unique-main-title"],
.fra-unique-title {
    font-size: clamp(1.35rem, 5vw, 2.5rem) !important;
}

[class*="faq-header"],
[class*="-unique-section-header"] {
    margin-bottom: clamp(28px, 5vw, 60px);
}

[class*="faq-trigger"],
[class*="faq-question"] {
    padding: clamp(14px, 3vw, 24px);
    font-size: clamp(0.85rem, 2.5vw, 1.1rem);
    gap: 12px;
    min-height: 48px;
}

[class*="faq-inner"],
[class*="-unique-answer-inner"] {
    padding-left: clamp(14px, 3vw, 24px);
    padding-right: clamp(14px, 3vw, 24px);
    padding-bottom: clamp(14px, 3vw, 24px);
    font-size: clamp(0.82rem, 2.3vw, 1rem);
}

/* The answers animate with max-height; small screens need much more room
   because the same text wraps over many more lines. */
@media (max-width: 768px) {
    [class*="faq-item"].uk-active [class*="faq-content"],
    [class*="faq-item"].uae-active [class*="faq-content"],
    [class*="faq-item"].is-active [class*="faq-answer"],
    [class*="faq-item"].active [class*="faq-answer"],
    [class*="faq-item"].active [class*="faq-content"] {
        max-height: 900px;
    }
}


/* --------------------------------------------------------------------------
   5. INLINE-STYLED COPY BLOCKS
   -------------------------------------------------------------------------- */
[id^="why-"] .container > div[style*="max-width"],
#why-uk .container > div,
#why-us .container > div {
    font-size: clamp(0.85rem, 2.5vw, 1.1rem) !important;
    line-height: 1.75 !important;
}

section p[style*="1.1rem"] {
    font-size: clamp(0.85rem, 2.5vw, 1.1rem) !important;
}

.quote-section blockquote {
    font-size: clamp(1.05rem, 4.4vw, 2.8rem) !important;
    margin-bottom: clamp(20px, 4vw, 40px) !important;
}

.quote-section p {
    font-size: clamp(0.72rem, 2.2vw, 1rem) !important;
    letter-spacing: clamp(2px, 1vw, 6px) !important;
}

/* Nested bullet lists inside the cost table */
.job-table ul {
    padding-left: 15px;
    margin: 0;
}


/* --------------------------------------------------------------------------
   6. COURSES FLIP-CARD CAROUSEL
   Card size is driven by --card-width / --card-height on :root.
   -------------------------------------------------------------------------- */
/* The flip cards hold a 5-item course list on the front and a 5-item
   university list plus a CTA on the back. Below 768px the stock card is far
   too short for that content, so the box grows and the type shrinks. */
@media (min-width: 481px) and (max-width: 768px) {
    :root {
        --card-height: 380px;
    }

    .card-back h3 {
        font-size: 1.15rem !important;
        margin-bottom: 0.6rem !important;
        padding-bottom: 0.6rem !important;
    }

    .card-back .uni-list {
        font-size: 0.78rem !important;
        gap: 6px !important;
        line-height: 1.3 !important;
    }

    .card-back > div:last-child {
        margin-top: 12px !important;
        padding: 9px !important;
        font-size: 0.65rem !important;
    }
}

@media (max-width: 480px) {
    :root {
        --card-height: 315px;
    }

    .category-name {
        font-size: 0.8rem !important;
        margin-bottom: 0.4rem !important;
        line-height: 1.25 !important;
    }

    .service-img {
        height: 88px;
        margin-bottom: 0.6rem;
    }

    .courses-list {
        gap: 5px !important;
    }

    .courses-list div {
        font-size: 0.68rem !important;
        line-height: 1.25 !important;
    }

    .card-back h3 {
        font-size: 0.95rem !important;
        margin-bottom: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .card-back .uni-list {
        font-size: 0.68rem !important;
        gap: 5px !important;
        line-height: 1.25 !important;
    }

    .card-back > div:last-child {
        margin-top: 10px !important;
        padding: 8px !important;
        font-size: 0.62rem !important;
    }
}

@media (max-width: 360px) {
    :root {
        --card-width: 166px;
        --card-height: 330px;
        --gap: 1rem;
    }

    .nav-arrow {
        width: 34px;
        height: 34px;
        font-size: 0.9rem;
    }

    #courses-arrow-left {
        left: 8px;
    }

    #courses-arrow-right {
        right: 8px;
    }

    .service-img {
        height: 84px;
    }

    .card-title {
        font-size: 0.95rem;
    }

    .card-front,
    .card-back {
        padding: 0.7rem;
    }
}

@media (min-width: 1920px) {
    :root {
        --card-width: 400px;
        --card-height: 570px;
        --gap: 2.5rem;
    }

    .service-img {
        height: 290px;
    }
}

@media (min-width: 2400px) {
    :root {
        --card-width: 440px;
        --card-height: 620px;
    }

    .service-img {
        height: 320px;
    }
}


/* --------------------------------------------------------------------------
   7. TABLETS AND BELOW — <= 992px
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
    .hero {
        height: auto;
        min-height: 78vh;
        padding: 110px 20px 70px;
    }

    .split-layout,
    .split-layout.reverse {
        gap: 28px;
    }

    .image-box img {
        height: clamp(200px, 46vw, 350px);
    }
}


/* --------------------------------------------------------------------------
   8. PHONES — <= 768px
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .hero {
        min-height: 70vh;
        padding: 100px 18px 60px;
    }

    .slider-header {
        align-items: stretch;
    }

    .slider-img-box {
        width: 100%;
        height: clamp(140px, 42vw, 200px);
    }

    .pagination-container {
        gap: 6px;
    }

    .page-node {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .scholarship-item ul li {
        gap: 8px;
    }
}


/* --------------------------------------------------------------------------
   9. SMALL PHONES — <= 480px, down to the 300px floor
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .hero {
        min-height: 64vh;
        padding: 96px 14px 52px;
    }

    .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .job-table {
        min-width: 460px;
    }

    .job-table th,
    .job-table td {
        padding: 9px 10px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nav-btn-circle {
        width: 34px;
        height: 34px;
    }

    #why-uk .container > div ul,
    [id^="why-"] .container > div ul {
        margin-left: 14px !important;
        padding-left: 4px;
    }
}

@media (max-width: 360px) {
    .hero {
        padding: 92px 12px 46px;
    }

    .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .job-table {
        min-width: 380px;
    }

    .scholarship-item {
        padding: 16px 14px;
    }

    .course-tab {
        padding: 12px;
    }
}


/* --------------------------------------------------------------------------
   10. LARGE SCREENS — 1600px / 1920px / 2560px
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
    .container {
        max-width: 1440px;
    }

    section {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .image-box img {
        height: 560px;
    }

    [class*="faq-container"],
    [class*="-unique-container"] {
        max-width: 1080px;
    }

    .faq-container {
        max-width: 1080px;
    }
}

@media (min-width: 1920px) {
    .container {
        max-width: 1680px;
    }

    section {
        padding-top: 96px;
        padding-bottom: 96px;
    }

    .image-box img {
        height: 620px;
    }

    .scholarship-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
    }

    [class*="faq-container"],
    [class*="-unique-container"],
    .faq-container {
        max-width: 1200px;
    }

    .slider-img-box {
        width: 260px;
        height: 170px;
    }
}

@media (min-width: 2400px) {
    .container {
        max-width: 1920px;
    }

    .image-box img {
        height: 700px;
    }

    [class*="faq-container"],
    [class*="-unique-container"],
    .faq-container {
        max-width: 1360px;
    }
}


/* --------------------------------------------------------------------------
   11. ACCESSIBILITY
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .scroll-container,
    .slider-wrapper {
        transition: none !important;
    }

    .scholarships-section,
    .quote-section {
        background-attachment: scroll;
    }
}