/* ===================================
   Tablet Styles (768px - 1024px)
   =================================== */

@media screen and (max-width: 1024px) {
    /* Side padding only; the shorthand would clear the hero's own top padding */
    .container {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    .hero-title {
        font-size: 3rem;
    }

    .hero-title,
    .hero-tagline {
        text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
    }

    .hero-subtitle {
        font-size: 1.5rem;
    }

    .about-content {
        grid-template-columns: 1fr 1.5fr;
        gap: var(--spacing-md);
    }

    .contact-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

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

/* ===================================
   Mobile Styles (max-width: 768px)
   =================================== */

@media screen and (max-width: 768px) {
    /* Typography */
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    h3 {
        font-size: 1.375rem;
    }

    .section-title {
        font-size: 2.5rem;
        margin-bottom: var(--spacing-lg);
    }

    /* Navigation */
    .navbar .container {
        flex-wrap: wrap;
        position: relative;
    }

    .mobile-menu-toggle {
        display: flex;
        z-index: 1001;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        left: -100%;
        width: 80%;
        height: 100vh;
        background-color: var(--surface);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--spacing-md);
        transition: left 0.3s ease, background-color 0.3s ease;
        box-shadow: var(--shadow-sm);
        z-index: 999;
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-link {
        font-size: 1.25rem;
    }

    /* Override white navbar styles for mobile menu */
    .nav-menu .nav-link {
        color: var(--color-text-primary) !important;
    }

    .nav-menu .nav-link:hover {
        color: var(--primary-purple) !important;
    }

    .nav-menu .theme-toggle,
    .nav-menu .lang-toggle {
        background-color: transparent !important;
        border-color: var(--text-primary) !important;
        color: var(--text-primary) !important;
    }

    .nav-menu .theme-toggle:hover,
    .nav-menu .lang-toggle:hover {
        background-color: var(--text-primary) !important;
        color: var(--bg-primary) !important;
    }

    /* Hero Section - photo becomes a full-bleed background so the
       headline and CTA sit above the fold */
    .hero {
        min-height: 100vh;
        min-height: 100svh;
        align-items: stretch;
    }

    /* The full-bleed photo below carries its own scrim */
    .hero::after {
        display: none;
    }

    .hero-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: var(--spacing-md);
        min-height: 100vh;
        min-height: 100svh;
        padding-top: 90px;
        padding-bottom: var(--spacing-lg);
        text-align: center;
    }

    .hero-image {
        position: absolute;
        inset: 0;
        z-index: 0;
        display: block;
        width: 100%;
        height: 100%;
        margin: 0;
        pointer-events: none;
    }

    .hero-image img,
    .hero-image video {
        width: 100%;
        height: 100%;
        max-width: none;
        border-radius: 0;
        object-fit: cover;
        object-position: center 22%;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .hero-image::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
            180deg,
            rgba(26, 4, 6, 0.55) 0%,
            rgba(101, 16, 20, 0.62) 42%,
            rgba(26, 4, 6, 0.92) 100%
        );
    }

    .hero-content {
        display: block;
        position: relative;
        z-index: 1;
        max-width: 100%;
    }

    .hero-title {
        font-size: 2.25rem;
        text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
    }

    .hero-tagline {
        margin-top: var(--spacing-md);
        font-size: 1.05rem;
        text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
    }

    .hero-floating-cta {
        font-size: 0.95rem;
        padding: 0.875rem 1.75rem;
    }

    .hero-subtitle {
        font-size: 1.25rem;
    }

    .hero-description {
        font-size: 1rem;
    }

    .cta-button {
        padding: 0.875rem 2rem;
        font-size: 1rem;
    }

    .about-text p {
        font-size: 1rem;
    }

    /* 1% Section */
    .top-percent-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .top-percent-left {
        padding-right: 0;
        text-align: center;
    }

    .top-percent-number {
        font-size: clamp(5rem, 15vw, 8rem);
    }

    .top-percent-message {
        font-size: 1rem;
    }

    /* Profiles Section */
    .profiles-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    .profiles-title {
        font-size: 2.5rem;
        margin-bottom: var(--spacing-lg);
        padding: 0 var(--spacing-sm);
    }

    .profile-name {
        font-size: 1.75rem;
    }

    .profiles-closing {
        justify-content: flex-start;
        margin-top: var(--spacing-lg);
    }

    .profiles-closing-text {
        text-align: left;
        max-width: 100%;
        font-size: 1.125rem;
    }

    /* Services Section */
    .services-grid {
        grid-template-columns: 1fr;
    }

    .approach {
        padding-left: var(--spacing-sm);
    }

    .approach p {
        font-size: 1rem;
    }

    .footer-cta-inner {
        min-height: 400px;
        padding: var(--spacing-lg) var(--spacing-md);
    }

    .footer-cta h2 {
        font-size: clamp(2rem, 6vw, 2.75rem);
    }

    .footer-cta p {
        font-size: 1rem;
    }

    /* Contact Section */
    .contact {
        padding: var(--spacing-md) 0 var(--spacing-lg);
    }

    /* The desktop display size is a full-width statement; on one column it
       just costs three lines before anything actionable. */
    .contact-main-title {
        font-size: clamp(1.75rem, 7vw, 2.25rem);
        line-height: 1.15;
    }

    .contact-lede {
        font-size: 1rem;
        max-width: none;
        margin-bottom: var(--spacing-sm);
    }

    /* Both languages flatten the two columns into one stack, so the section
       reads as a single clean sequence: offer the call, then the form, with
       nothing competing in between. Only the order differs per language,
       because the two pages carry the same promises in different elements. */
    .contact-layout {
        display: flex;
        flex-direction: column;
        /* Overrides the desktop flex-start, which would shrink each item to
           its text width and leave the divider rule half-drawn. */
        align-items: stretch;
        gap: var(--spacing-sm);
    }

    .contact-left,
    .contact-personal-info,
    .contact-right {
        display: contents;
    }

    .contact-left {
        padding-right: 0;
        position: static;
    }

    /* Equal weight with the booking card: the form is a real second path, not
       a footnote under it. In one narrow column the flanking rules collapse to
       stubs, so the break becomes a single hairline with the label under it. */
    .contact-divider {
        display: block;
        margin-top: var(--spacing-sm);
        padding-top: var(--spacing-md);
        border-top: 1px solid var(--border-color);
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .contact-divider::before,
    .contact-divider::after {
        content: none;
    }

    /* --- English order --- */

    /* "Reaching out is the hardest part." is a second display heading directly
       under the first, which is what made the stack feel busy. The main title
       and lede already carry the section on mobile. */
    html[lang='en'] .contact-personal-title {
        display: none;
    }

    html[lang='en'] .booking-card {
        order: 1;
    }

    /* Read at the moment it matters — right under the booking CTA. */
    html[lang='en'] .contact-personal-info .contact-assurance {
        order: 2;
    }

    html[lang='en'] .contact-divider {
        order: 3;
    }

    /* "A sentence is enough to start" is about writing a message, so on mobile
       it sits with the form instead of at the top of the section. */
    html[lang='en'] .contact-personal-info p {
        order: 4;
        font-size: 0.95rem;
        color: var(--text-secondary);
    }

    html[lang='en'] .contact-form {
        order: 5;
        margin-top: 0;
    }

    /* --- Greek order --- */

    /* Greek has no lede under the title, so the title carries the gap the
       English lede's bottom margin would otherwise provide. */
    html[lang='el'] .contact-main-title {
        margin-bottom: var(--spacing-sm);
    }

    /* Second display heading under the main title, same problem as the English
       one. The card below already makes the case for booking. */
    html[lang='el'] .contact-section-title {
        display: none;
    }

    /* The closing line of the Greek form already promises confidentiality and
       a reply within one working day, in the place it is actually read. */
    html[lang='el'] .contact-personal-info .contact-assurance {
        display: none;
    }

    html[lang='el'] .booking-card {
        order: 1;
    }

    /* Greek carries the "no assistants, I read every message" promise in this
       heading rather than in .contact-assurance, so it plays the part the
       English assurance line plays: one quiet line under the CTA. The hard
       line breaks are tuned for the desktop column and only fray here. */
    html[lang='el'] .contact-personal-title {
        order: 2;
        margin: 0;
        font-size: 0.95rem;
        font-weight: 400;
        line-height: 1.6;
        color: var(--text-secondary);
    }

    html[lang='el'] .contact-personal-title br {
        display: none;
    }

    html[lang='el'] .contact-divider {
        order: 3;
    }

    html[lang='el'] .contact-personal-info p {
        order: 4;
        font-size: 0.95rem;
        color: var(--text-secondary);
    }

    html[lang='el'] .contact-form {
        order: 5;
        margin-top: 0;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .booking-cta,
    .submit-button {
        width: 100%;
        text-align: center;
    }

    .choice-pill span {
        padding: 0.7rem 1rem;
    }

    /* Footer */
    .footer-top-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .footer-links-section {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-name h2 {
        font-size: clamp(3rem, 10vw, 7rem);
    }

    .footer-cta-buttons {
        flex-direction: column;
    }

    .footer-btn {
        width: 100%;
        text-align: center;
    }

    /* Spacing Adjustments */
    section {
        padding: var(--spacing-lg) 0;
    }

    :root {
        --spacing-xl: 4rem;
        --spacing-lg: 3rem;
    }
}

/* ===================================
   Small Mobile Styles (max-width: 480px)
   =================================== */

@media screen and (max-width: 480px) {
    .container {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }

    .hero-container {
        padding-top: 80px;
    }

    .hero-title {
        font-size: 1.875rem;
    }

    .hero-tagline {
        font-size: 0.975rem;
        margin-top: var(--spacing-sm);
    }

    .hero-subtitle {
        font-size: 1.125rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .service-card {
        padding-top: var(--spacing-sm);
    }

    .contact-form-wrapper {
        padding: var(--spacing-sm);
    }

    /* Contact Section */
    .contact-main-title {
        font-size: 1.75rem;
    }

    .booking-card {
        padding: var(--spacing-sm);
        border-radius: 8px;
    }

    .booking-card-text {
        font-size: 0.9rem;
    }

    /* Three small print lines around the submit button read as noise at this
       width; keep them legible but quiet. */
    .form-reassurance,
    .consent-label {
        font-size: 0.8rem;
    }

    .cta-button {
        padding: 0.75rem 1.5rem;
        font-size: 0.95rem;
    }

    .nav-menu {
        width: 100%;
    }

    .footer-links-section {
        grid-template-columns: 1fr;
    }

    .footer-name h2 {
        font-size: clamp(2.5rem, 8vw, 5rem);
    }

    .footer-cta-section h3 {
        font-size: 1.25rem;
    }

    .footer-bottom-content {
        flex-direction: column;
        text-align: center;
    }

    .footer-cta-inner {
        min-height: 300px;
        padding: var(--spacing-md);
    }

    .footer-cta h2 {
        font-size: clamp(1.75rem, 5vw, 2.25rem);
    }

    .footer-cta .cta-button {
        padding: 0.875rem 2rem;
        font-size: 0.95rem;
    }

    :root {
        --spacing-xl: 3rem;
        --spacing-lg: 2rem;
    }
}

/* ===================================
   Mobile Menu Animation
   =================================== */

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(7px, 7px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

/* Overlay for mobile menu */
.nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 998;
}

.nav-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ===================================
   Accessibility & Focus States
   =================================== */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus states for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--primary-purple);
    outline-offset: 2px;
}

/* ===================================
   Print Styles
   =================================== */

@media print {
    .navbar,
    .mobile-menu-toggle,
    .lang-toggle,
    .cta-button,
    .contact-form-wrapper,
    .footer {
        display: none;
    }

    body {
        color: #000;
        background: #fff;
    }

    section {
        page-break-inside: avoid;
        break-inside: avoid;
    }
}