/* =========================================================
   CODERN
   Global Responsive System
   File: css/responsive.css
   ========================================================= */


/* =========================================================
   1. LARGE DESKTOP
   1440px+
   ========================================================= */

@media (min-width: 1440px) {

  :root {
    --container-max: 1320px;
  }

  .container {
    width: min(
      calc(100% - 64px),
      var(--container-max)
    );
  }

  .section {
    padding-top: 120px;
    padding-bottom: 120px;
  }

}


/* =========================================================
   2. DESKTOP / LAPTOP
   1200px — 1439px
   ========================================================= */

@media (max-width: 1439px) {

  .container {
    width: min(
      calc(100% - 56px),
      1280px
    );
  }

  .section {
    padding-top: 100px;
    padding-bottom: 100px;
  }

}


/* =========================================================
   3. SMALL LAPTOP
   <= 1199px
   ========================================================= */

@media (max-width: 1199px) {

  :root {
    --space-section: 88px;
  }


  /* Container */

  .container {
    width: calc(100% - 48px);
  }


  /* Sections */

  .section {
    padding-top: 88px;
    padding-bottom: 88px;
  }


  /* Headings */

  h1 {
    font-size: clamp(
      2.8rem,
      6vw,
      4.5rem
    );
  }

  h2 {
    font-size: clamp(
      2.1rem,
      4vw,
      3rem
    );
  }


  /* Generic grids */

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


  /* Portfolio */

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


  /* Services */

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


  /* Pricing */

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

  .pricing-card:last-child {
    grid-column: 1 / -1;
    max-width: 600px;
    width: 100%;
    margin-inline: auto;
  }

}


/* =========================================================
   4. TABLET
   <= 1024px
   ========================================================= */

@media (max-width: 1024px) {

  :root {
    --space-section: 80px;
  }


  /* -------------------------------------------------------
     GLOBAL
  ------------------------------------------------------- */

  html {
    scroll-padding-top: 80px;
  }

  body {
    overflow-x: hidden;
  }


  .container {
    width: calc(100% - 40px);
  }


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


  /* -------------------------------------------------------
     TYPOGRAPHY
  ------------------------------------------------------- */

  h1 {
    font-size: clamp(
      2.6rem,
      7vw,
      4rem
    );
  }

  h2 {
    font-size: clamp(
      2rem,
      5vw,
      2.8rem
    );
  }

  h3 {
    font-size: 1.35rem;
  }


  /* -------------------------------------------------------
     HERO
  ------------------------------------------------------- */

  .hero {
    min-height: auto;
    padding-top: 140px;
    padding-bottom: 90px;
  }

  .hero-container {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .hero-content {
    max-width: 760px;
    margin-inline: auto;
    text-align: center;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-highlights {
    justify-content: center;
  }

  .hero-stats {
    justify-content: center;
  }

  .hero-visual {
    max-width: 680px;
    width: 100%;
    margin-inline: auto;
  }


  /* -------------------------------------------------------
     SERVICES
  ------------------------------------------------------- */

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


  /* -------------------------------------------------------
     PORTFOLIO
  ------------------------------------------------------- */

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


  /* -------------------------------------------------------
     PROCESS
  ------------------------------------------------------- */

  .process-timeline {
    padding-inline: 20px;
  }

  .process-line {
    left: 32px;
  }

  .process-item {
    grid-template-columns: 64px 1fr;
    gap: 24px;
  }

  .process-item:nth-child(even) {
    direction: ltr;
  }

  .process-node {
    grid-column: 1;
    grid-row: 1;
  }

  .process-content {
    grid-column: 2;
    text-align: left;
  }


  /* -------------------------------------------------------
     PRICING
  ------------------------------------------------------- */

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


  /* -------------------------------------------------------
     ABOUT
  ------------------------------------------------------- */

  .about-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .about-image-wrapper {
    max-width: 620px;
    margin-inline: auto;
  }

  .about-content {
    max-width: 760px;
  }


  /* -------------------------------------------------------
     CONTACT
  ------------------------------------------------------- */

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .contact-info {
    max-width: 760px;
  }

  .contact-form {
    width: 100%;
  }


  /* -------------------------------------------------------
     FOOTER
  ------------------------------------------------------- */

  .footer-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    gap: 40px;
  }

}


/* =========================================================
   5. TABLET / LARGE MOBILE
   <= 768px
   ========================================================= */

@media (max-width: 768px) {

  :root {
    --space-section: 72px;
  }


  /* -------------------------------------------------------
     GLOBAL
  ------------------------------------------------------- */

  .container {
    width: calc(100% - 32px);
  }

  .section {
    padding-top: 72px;
    padding-bottom: 72px;
  }


  /* -------------------------------------------------------
     TYPOGRAPHY
  ------------------------------------------------------- */

  h1 {
    font-size: clamp(
      2.3rem,
      9vw,
      3.4rem
    );

    line-height: 1.05;
  }

  h2 {
    font-size: clamp(
      1.9rem,
      7vw,
      2.5rem
    );
  }

  h3 {
    font-size: 1.25rem;
  }


  /* -------------------------------------------------------
     HERO
  ------------------------------------------------------- */

  .hero {
    padding-top: 120px;
    padding-bottom: 72px;
  }

  .hero-container {
    gap: 44px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions > * {
    width: 100%;
  }

  .hero-highlights {
    flex-direction: column;
    gap: 12px;
  }

  .hero-stats {
    display: grid;
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
    width: 100%;
  }


  /* -------------------------------------------------------
     SERVICES
  ------------------------------------------------------- */

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

  .service-card {
    width: 100%;
  }


  /* -------------------------------------------------------
     PORTFOLIO
  ------------------------------------------------------- */

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

  .portfolio-filters {
    overflow-x: auto;
    justify-content: flex-start;
    flex-wrap: nowrap;
    padding-bottom: 8px;
    scrollbar-width: none;
  }

  .portfolio-filters::-webkit-scrollbar {
    display: none;
  }

  .portfolio-filter {
    flex: 0 0 auto;
    white-space: nowrap;
  }


  /* -------------------------------------------------------
     PROCESS
  ------------------------------------------------------- */

  .process-timeline {
    padding-inline: 0;
  }

  .process-line {
    left: 24px;
  }

  .process-item {
    grid-template-columns: 48px 1fr;
    gap: 18px;
  }

  .process-node {
    width: 48px;
    height: 48px;
  }


  /* -------------------------------------------------------
     PRICING
  ------------------------------------------------------- */

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

  .pricing-card:last-child {
    grid-column: auto;
    max-width: none;
  }


  /* -------------------------------------------------------
     ABOUT
  ------------------------------------------------------- */

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

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


  /* -------------------------------------------------------
     CONTACT FORM
  ------------------------------------------------------- */

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

  .contact-form-header {
    align-items: flex-start;
  }

  .contact-submit-button {
    width: 100%;
  }


  /* -------------------------------------------------------
     FOOTER
  ------------------------------------------------------- */

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }


  /* -------------------------------------------------------
     SCROLL TOP
  ------------------------------------------------------- */

  .scroll-to-top {
    right: 20px;
    bottom: 20px;
  }


  /* -------------------------------------------------------
     CUSTOM CURSOR
  ------------------------------------------------------- */

  html.codern-custom-cursor {
    cursor: auto;
  }

  .codern-cursor-ring,
  .codern-cursor-dot {
    display: none;
  }

}


/* =========================================================
   6. MOBILE
   <= 640px
   ========================================================= */

@media (max-width: 640px) {

  :root {
    --space-section: 64px;
  }


  /* -------------------------------------------------------
     GLOBAL
  ------------------------------------------------------- */

  .container {
    width: calc(100% - 28px);
  }

  .section {
    padding-top: 64px;
    padding-bottom: 64px;
  }


  /* -------------------------------------------------------
     TYPOGRAPHY
  ------------------------------------------------------- */

  body {
    font-size: 0.95rem;
  }

  h1 {
    font-size: clamp(
      2.1rem,
      11vw,
      3rem
    );
  }

  h2 {
    font-size: clamp(
      1.8rem,
      9vw,
      2.35rem
    );
  }


  /* -------------------------------------------------------
     HERO
  ------------------------------------------------------- */

  .hero {
    padding-top: 108px;
    padding-bottom: 64px;
  }

  .hero-badge {
    font-size: 0.72rem;
  }

  .hero-highlights {
    align-items: center;
  }

  .hero-stats {
    gap: 8px;
  }

  .hero-stat {
    padding: 14px 8px;
  }

  .hero-stat-number {
    font-size: 1.5rem;
  }

  .hero-stat-label {
    font-size: 0.68rem;
  }


  /* -------------------------------------------------------
     SECTION HEADERS
  ------------------------------------------------------- */

  .section-header {
    margin-bottom: 36px;
  }

  .section-description {
    font-size: 0.95rem;
  }


  /* -------------------------------------------------------
     CARDS
  ------------------------------------------------------- */

  .service-card,
  .portfolio-card,
  .pricing-card,
  .glass-card {
    border-radius: 18px;
  }


  /* -------------------------------------------------------
     ABOUT
  ------------------------------------------------------- */

  .about-stats,
  .about-achievements {
    grid-template-columns: 1fr;
  }


  /* -------------------------------------------------------
     CONTACT
  ------------------------------------------------------- */

  .contact-form-header {
    gap: 12px;
  }

  .contact-form-number {
    flex: 0 0 auto;
  }

  .contact-form-message {
    padding: 16px;
  }

  .message-meta {
    flex-wrap: wrap;
    gap: 8px;
  }


  /* -------------------------------------------------------
     MODAL
  ------------------------------------------------------- */

  .codern-modal-content {
    width: calc(100% - 24px);
    max-height: calc(100vh - 24px);
    border-radius: 18px;
  }

  .codern-modal-body {
    padding: 20px;
  }


  /* -------------------------------------------------------
     TOAST
  ------------------------------------------------------- */

  .codern-toast-container {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
  }

  .codern-toast {
    width: 100%;
  }


  /* -------------------------------------------------------
     SCROLL TOP
  ------------------------------------------------------- */

  .scroll-to-top {
    width: 44px;
    height: 44px;
    right: 16px;
    bottom: 16px;
  }

}


/* =========================================================
   7. SMALL MOBILE
   <= 480px
   ========================================================= */

@media (max-width: 480px) {

  :root {
    --space-section: 56px;
  }


  .container {
    width: calc(100% - 24px);
  }

  .section {
    padding-top: 56px;
    padding-bottom: 56px;
  }


  /* -------------------------------------------------------
     HERO
  ------------------------------------------------------- */

  .hero {
    padding-top: 100px;
    padding-bottom: 56px;
  }

  .hero-title {
    letter-spacing: -0.035em;
  }

  .hero-stats {
    grid-template-columns: 1fr;
    max-width: 260px;
    margin-inline: auto;
  }

  .hero-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }


  /* -------------------------------------------------------
     BUTTONS
  ------------------------------------------------------- */

  .btn,
  button,
  .button {
    min-height: 46px;
  }


  /* -------------------------------------------------------
     FORMS
  ------------------------------------------------------- */

  .contact-form {
    padding: 18px;
  }

  .contact-form-header {
    flex-direction: column;
  }

  .form-field input,
  .form-field select,
  .form-field textarea {
    font-size: 16px;
  }


  /* -------------------------------------------------------
     PROCESS
  ------------------------------------------------------- */

  .process-line {
    left: 20px;
  }

  .process-item {
    grid-template-columns: 40px 1fr;
    gap: 14px;
  }

  .process-node {
    width: 40px;
    height: 40px;
  }


  /* -------------------------------------------------------
     FOOTER
  ------------------------------------------------------- */

  .footer-cta {
    padding: 24px 18px;
  }

}


/* =========================================================
   8. EXTRA SMALL DEVICES
   <= 360px
   ========================================================= */

@media (max-width: 360px) {

  .container {
    width: calc(100% - 20px);
  }

  .section {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.7rem;
  }

  .hero-actions {
    gap: 10px;
  }

  .contact-form {
    padding: 14px;
  }

}


/* =========================================================
   9. LANDSCAPE MOBILE
   ========================================================= */

@media (
  max-width: 768px
) and (
  orientation: landscape
) {

  .hero {
    min-height: auto;
    padding-top: 100px;
    padding-bottom: 60px;
  }

}


/* =========================================================
   10. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

}


/* =========================================================
   11. PRINT
   ========================================================= */

@media print {

  .site-header,
  .scroll-to-top,
  .codern-cursor-ring,
  .codern-cursor-dot,
  #particle-background,
  #site-loader,
  .codern-toast-container {
    display: none !important;
  }

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

  .section {
    padding-top: 30px;
    padding-bottom: 30px;
    break-inside: avoid;
  }

}