/* ============================================
   STYRA DESIGNS - RESPONSIVE STYLESHEET
   Mobile-first, all breakpoints supported
   ============================================ */

/* ---------- 1920px and up ---------- */
@media screen and (min-width: 1921px) {
    .container {
        max-width: 1600px;
    }

    .hero__title {
        font-size: 5.5rem;
    }
}

/* ---------- 1920px ---------- */
@media screen and (max-width: 1920px) {
    .services__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ---------- 1600px ---------- */
@media screen and (max-width: 1600px) {
    .container {
        max-width: 1360px;
    }

    .section {
        padding: var(--spacing-4xl) 0;
    }
}

/* ---------- 1440px ---------- */
@media screen and (max-width: 1440px) {
    .container {
        max-width: 1280px;
    }

    .hero__title {
        font-size: clamp(2.5rem, 5vw, 4.5rem);
    }

    .services__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .team__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .values__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .achievements__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ---------- 1366px ---------- */
@media screen and (max-width: 1366px) {
    .container {
        max-width: 1200px;
    }

    .stats__grid {
        grid-template-columns: repeat(5, 1fr);
        gap: var(--grid-gap-sm);
    }

    .footer__grid {
        grid-template-columns: 2fr 1fr 1fr;
        gap: var(--spacing-3xl);
    }

    .brands__grid {
        grid-template-columns: repeat(3, 1fr);
    }

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

/* ---------- 1280px ---------- */
@media screen and (max-width: 1280px) {
    .container {
        max-width: 1120px;
        padding: 0 1.5rem;
    }

    .why-choose__grid {
        gap: var(--spacing-3xl);
    }

    .why-choose__image img {
        height: 500px;
    }

    .service-card__image {
        height: 250px;
    }

    .project-card {
        height: 350px;
    }

    .project-card--tall {
        height: 450px;
    }

    .team-card__image {
        height: 300px;
    }

    .about-story__image img {
        height: 500px;
    }
}

/* ---------- 1200px ---------- */
@media screen and (max-width: 1200px) {
    .container {
        max-width: 1024px;
    }

    .services__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }

    .service-card__image {
        height: 300px;
    }

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

    .project-card--wide {
        grid-column: span 1;
    }

    .project-card--tall {
        height: 400px;
    }

    .instagram__grid {
        grid-template-columns: repeat(3, 1fr);
    }

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

    .contact-form__grid {
        grid-template-columns: 1fr;
    }

    .contact-form__info {
        position: static;
    }

    .process__step h3 {
        font-size: var(--font-size-md);
    }
}

/* ---------- 1024px ---------- */
@media screen and (max-width: 1024px) {
    .container {
        max-width: 960px;
    }

    .hero__title {
        font-size: clamp(2.5rem, 6vw, 4rem);
    }

    .hero__subtitle {
        font-size: var(--font-size-md);
    }

    .why-choose__grid {
        grid-template-columns: 1fr;
    }

    .why-choose__image {
        max-width: 700px;
        margin: 0 auto;
    }

    .why-choose__image img {
        height: 450px;
    }

    .about-story__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-3xl);
    }

    .about-story__image {
        max-width: 700px;
    }

    .mission-vision__grid {
        grid-template-columns: 1fr;
    }

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

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

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

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

    .service-detail {
        grid-template-columns: 1fr;
        gap: var(--spacing-3xl);
    }

    .service-detail:nth-child(even) .service-detail__image {
        order: 0;
    }

    .service-detail__image img {
        height: 350px;
    }

    .pricing-card {
        padding: var(--spacing-2xl);
    }
}

/* ---------- 992px ---------- */
@media screen and (max-width: 992px) {
    .navbar__menu {
        display: none;
    }

    .navbar__cta .btn {
        display: none;
    }

    .navbar__toggle {
        display: flex;
    }

    .stats__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-3xl);
    }

    .process__timeline::before {
        left: 20px;
    }

    .process__step {
        width: 100%;
        left: 0 !important;
        text-align: left !important;
        padding-left: 60px !important;
        padding-right: 0 !important;
    }

    .process__step-dot {
        left: 10px !important;
        right: auto !important;
    }

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

/* ---------- 820px ---------- */
@media screen and (max-width: 820px) {
    .instagram__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .hero__title {
        font-size: clamp(2.5rem, 7vw, 3.5rem);
    }

    .brands-strip {
        padding: var(--spacing-xl) 0;
    }

    .about-timeline__item {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .about-timeline__year {
        min-width: auto;
    }
}

/* ---------- 768px ---------- */
@media screen and (max-width: 768px) {
    .container {
        padding: 0 var(--container-padding-mobile);
    }

    .section {
        padding: var(--spacing-3xl) 0;
    }

    .section__header {
        margin-bottom: var(--spacing-3xl);
    }

    .section-title {
        font-size: clamp(1.8rem, 5vw, 2.5rem);
    }

    .hero {
        min-height: 90vh;
    }

    .hero__actions .btn {
        width: 100%;
        max-width: 300px;
    }

    .hero__scroll {
    position: static;
    transform: none;
    margin-top: var(--spacing-xl);
    }

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

    .services__grid {
        grid-template-columns: 1fr 1fr;
    }

    .team__grid {
        grid-template-columns: 1fr 1fr;
    }

    .pricing__grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }

    .service-detail__gallery {
        grid-template-columns: repeat(3, 1fr);
    }

    .form__grid {
        grid-template-columns: 1fr;
    }

    .form__group--full {
        grid-column: span 1;
    }

    .back-to-top {
        bottom: var(--spacing-lg);
        left: var(--spacing-lg);
    }

    .floating-actions {
        bottom: var(--spacing-lg);
        right: var(--spacing-lg);
    }

    .floating-btn {
        width: 48px;
        height: 48px;
        font-size: var(--font-size-lg);
    }

    .stats {
        padding: var(--spacing-3xl) 0;
    }

    .cta-banner {
        padding: var(--spacing-4xl) 0;
    }

    .cta-banner__actions .btn {
        width: 100%;
        max-width: 300px;
    }

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

/* ---------- 576px ---------- */
@media screen and (max-width: 576px) {
    .services__grid {
        grid-template-columns: 1fr;
    }

    .projects__gallery {
        grid-template-columns: 1fr;
    }

    .project-card,
    .project-card--tall {
        height: 350px;
    }

    .team__grid {
        grid-template-columns: 1fr;
    }

    .values__grid {
        grid-template-columns: 1fr;
    }

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

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

    .contact-cards__grid {
        grid-template-columns: 1fr;
    }

    .brands__grid {
        grid-template-columns: 1fr;
    }

    .footer__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-2xl);
    }

    .footer__bottom {
        flex-direction: column;
        text-align: center;
    }

    .footer__bottom-links {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .service-detail__image img {
        height: 300px;
    }

    .why-choose__image img {
        height: 400px;
    }

    .about-story__image img {
        height: 400px;
    }

    .form {
        padding: var(--spacing-xl);
    }

    .contact-form__info {
        padding: var(--spacing-xl);
    }

    .btn--lg {
        padding: 1rem 2rem;
    }

    .btn {
        padding: 0.875rem 2rem;
        font-size: var(--font-size-xs);
    }

    .hero__title .text-accent {
        display: block;
    }
}

/* ---------- 480px ---------- */
@media screen and (max-width: 480px) {
    .stats__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--grid-gap-sm);
    }

    .stat {
        padding: var(--spacing-md);
    }

    .stat__number {
        font-size: 2rem;
    }

    .stat__label {
        font-size: var(--font-size-xs);
    }

    .section-label {
        font-size: var(--font-size-xs);
    }

    .hero {
        min-height: 100vh;
    }

    .hero__label {
        font-size: var(--font-size-xs);
    }

    .hero__label::before,
    .hero__label::after {
        width: 20px;
    }

    .hero__title {
        font-size: clamp(2rem, 8vw, 2.8rem);
    }

    .hero__subtitle {
        font-size: var(--font-size-sm);
        line-height: var(--line-height-normal);
    }

    .feature-card {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .feature-card__icon {
        width: 50px;
        height: 50px;
        min-width: 50px;
        font-size: var(--font-size-lg);
    }

    .service-card__image {
        height: 250px;
    }

    .instagram__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-sm);
    }

    .achievement-card {
        padding: var(--spacing-lg);
    }

    .achievement-card__number {
        font-size: var(--font-size-3xl);
    }

    .page-hero {
        min-height: 50vh;
        padding-top: var(--spacing-5xl);
    }

    .page-hero__title {
        font-size: 2.5rem;
    }

    .form__grid {
        gap: var(--spacing-md);
    }

    .form__group {
        gap: var(--spacing-xs);
    }

    .form__input,
    .form__select,
    .form__textarea {
        padding: 0.8rem var(--spacing-md);
        font-size: var(--font-size-sm);
    }

    .testimonial-slide {
        padding: var(--spacing-xl) var(--spacing-md);
    }

    .testimonial-slide__text {
        font-size: var(--font-size-md);
    }

    .pricing-card {
        padding: var(--spacing-xl);
    }

    .pricing-card__price {
        font-size: var(--font-size-3xl);
    }
}

/* ---------- 390px ---------- */
@media screen and (max-width: 390px) {
    .container {
        padding: 0 1rem;
    }

    .hero__actions {
        flex-direction: column;
        align-items: center;
    }

    .hero__actions .btn {
        max-width: 100%;
    }

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

    .section-subtitle {
        font-size: var(--font-size-sm);
    }

    .stats__grid {
        grid-template-columns: 1fr;
    }

    .project-card,
    .project-card--tall {
        height: 300px;
    }

    .why-choose__image img {
        height: 350px;
    }

    .about-story__image img {
        height: 350px;
    }

    .service-detail__image img {
        height: 250px;
    }

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

    .achievements__grid {
        grid-template-columns: 1fr;
    }

    .brands-strip__item {
        font-size: var(--font-size-lg);
    }

    .nav-logo-text {
        font-size: var(--font-size-lg);
    }

    .navbar__logo img {
        height: 40px;
    }

    .navbar.scrolled .navbar__logo img {
        height: 36px;
    }

    .mobile-menu__link {
        font-size: var(--font-size-2xl);
    }
}

/* ---------- 375px ---------- */
@media screen and (max-width: 375px) {
    .hero__title {
        font-size: 2.2rem;
    }

    .section-label {
        letter-spacing: var(--letter-spacing-wide);
    }

    .btn {
        padding: 0.75rem 1.75rem;
    }

    .footer__brand-text {
        font-size: var(--font-size-lg);
    }

    .back-to-top {
        width: 42px;
        height: 42px;
        font-size: var(--font-size-sm);
        bottom: var(--spacing-md);
        left: var(--spacing-md);
    }

    .floating-actions {
        bottom: var(--spacing-md);
        right: var(--spacing-md);
        gap: var(--spacing-sm);
    }

    .floating-btn {
        width: 44px;
        height: 44px;
        font-size: var(--font-size-md);
    }
}

/* ---------- 360px ---------- */
@media screen and (max-width: 360px) {
    .container {
        padding: 0 0.875rem;
    }

    .hero__label {
        gap: var(--spacing-sm);
    }

    .hero__label::before,
    .hero__label::after {
        width: 15px;
    }

    .feature-card {
        padding: var(--spacing-md);
    }

    .service-card__content {
        padding: var(--spacing-md);
    }

    .team-card__info {
        padding: var(--spacing-md);
    }

    .achievement-card {
        padding: var(--spacing-md);
    }

    .cta-banner__title {
        font-size: 1.8rem;
    }

    .footer {
        padding-top: var(--spacing-3xl);
    }

    .stats {
        padding: var(--spacing-2xl) 0;
    }
}

/* ---------- 320px ---------- */
@media screen and (max-width: 320px) {
    .hero__title {
        font-size: 2rem;
    }

    .hero__subtitle {
        font-size: var(--font-size-xs);
    }

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

    .mobile-menu__link {
        font-size: var(--font-size-xl);
    }

    .project-card__meta {
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .pricing-card__feature {
        font-size: var(--font-size-xs);
    }

    .instagram__grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Print Styles ---------- */
@media print {
    .preloader,
    .navbar,
    .mobile-menu,
    .floating-actions,
    .back-to-top,
    .scroll-progress,
    .hero__scroll,
    .cta-banner,
    .footer__bottom-links {
        display: none !important;
    }

    .section {
        padding: 2rem 0;
    }

    a {
        color: var(--color-primary) !important;
        text-decoration: underline;
    }

    .hero,
    .page-hero {
        min-height: 50vh;
        color: var(--color-primary);
        background: var(--color-white);
    }

    .hero__title,
    .page-hero__title {
        color: var(--color-primary);
    }

    .hero__subtitle,
    .page-hero__breadcrumb {
        color: var(--color-text);
    }
}