/* ==========================================================================
   responsive.css — Mobile-First Breakpoints
   
   Approach: Base styles target mobile (<768px).
   Media queries progressively enhance for tablet and desktop.
   
   Breakpoints:
   - Base: Mobile (< 768px)
   - @media (min-width: 768px): Tablet
   - @media (min-width: 1024px): Desktop
   
   Requirements: 15.1, 15.2, 15.3, 15.4, 15.5, 15.6, 15.7
   ========================================================================== */

/* --------------------------------------------------------------------------
   Mobile Base Styles (< 768px)
   -------------------------------------------------------------------------- */

/* --- Typography: minimum sizes for mobile readability (Req 15.4) --- */
body {
  font-size: max(16px, var(--text-base));
}

h1 {
  font-size: max(24px, clamp(1.75rem, 6vw, 3rem));
}

h2 {
  font-size: max(24px, clamp(1.5rem, 5vw, 2.5rem));
}

h3 {
  font-size: max(24px, clamp(1.25rem, 4vw, 2rem));
}

h4,
h5,
h6 {
  font-size: max(24px, 1.125rem);
}

/* --- Prevent horizontal overflow (Req 15.3) --- */
html,
body {
  overflow-x: hidden;
  max-width: 100vw;
}

*,
*::before,
*::after {
  max-width: 100%;
}

img,
video,
iframe,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

pre,
code {
  overflow-x: auto;
  word-break: break-word;
}

/* --- Single column layouts (Req 15.7) --- */
.grid,
.grid-2,
.grid-3,
.grid-4,
.services__grid,
.skills__list,
.process__steps,
.process__timeline,
.footer__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-content);
}

/* --- Touch targets: minimum 44x44px (Req 15.6) --- */
a,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
select,
.btn,
.btn-primary,
.btn-secondary,
.nav__link,
.hamburger {
  min-height: 44px;
  min-width: 44px;
}

button,
.btn,
.btn-primary,
.btn-secondary,
input[type="submit"],
input[type="button"] {
  padding: 12px 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- Disable parallax, cursor glow, magnetic effects (Req 15.2) --- */
.cursor-glow,
.hero__glow {
  display: none !important;
}

.floating-shape,
.hero__shape {
  animation: none !important;
  transform: none !important;
}

[data-parallax] {
  transform: none !important;
}

.magnetic-btn,
.btn-magnetic {
  transform: none !important;
}

/* --- Reduce multi-step animations to single fade-in (Req 15.2) --- */
[data-aos] {
  opacity: 1 !important;
  transform: none !important;
  transition: opacity var(--duration-normal) var(--easing-smooth) !important;
}

.stagger-item,
[data-stagger] {
  animation-delay: 0ms !important;
  transition-delay: 0ms !important;
}

.text-reveal,
.reveal-stagger {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* --- Mobile navigation: show hamburger (Req 15.1) --- */
.nav__links,
.nav__desktop,
.navbar__nav {
  display: none;
}

.hamburger,
.nav__hamburger,
.navbar__hamburger {
  display: flex;
}

/* --- Section spacing for mobile --- */
section {
  padding-block: var(--space-section);
  padding-inline: var(--space-content);
}

/* --- Hero section mobile adjustments --- */
.hero {
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: 80px;
}

.hero__content {
  text-align: center;
}

.hero__cta {
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
}

/* --- Details section stacked on mobile --- */
.details__layout {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.details__headline-wrap {
  padding-top: 0;
}

.details__headline {
  font-size: max(2rem, clamp(2rem, 6vw, 2.5rem));
  text-align: center;
}

.details__points-wrap {
  padding-left: 1.5rem;
}

/* --- Skills block stacked vertically (Req 15.7) --- */
.skills__list,
.skills__grid {
  flex-direction: column;
  align-items: stretch;
}

.skills__item {
  text-align: center;
  padding: 1rem;
}

/* --- Service cards single column (Req 15.7) --- */
.services__grid {
  grid-template-columns: 1fr;
}

.service-card {
  /* Show all content on mobile, no hover dependency */
  opacity: 1;
}

.service-card__details,
.service-card__description {
  opacity: 1;
  visibility: visible;
  max-height: none;
}

/* --- Process steps stacked --- */
.process__steps,
.process__timeline {
  flex-direction: column;
}

.process__connector,
.process__line {
  display: none;
}

/* Hide horizontal connector on mobile; switch to vertical */
.process__timeline::before {
  display: none;
}

.process__step::before {
  left: 0;
  transform: none;
}

.process__step::after {
  display: none;
}

/* --- Contact form full-width --- */
.contact__form,
.form {
  width: 100%;
}

.form__row {
  flex-direction: column;
}

/* --- Footer stacked layout --- */
.footer__content {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
}


/* --------------------------------------------------------------------------
   Tablet Breakpoint (>= 768px) — Two-column adaptations (Req 15.5)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {

  /* --- Typography scales up for tablet --- */
  h1 {
    font-size: clamp(2rem, 5vw + 0.5rem, 3.5rem);
  }

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

  h3 {
    font-size: var(--text-xl);
  }

  /* --- Two-column grid layouts (Req 15.5) --- */
  .grid-2,
  .services__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-content);
  }

  .skills__list,
  .skills__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-content);
  }

  .process__steps,
  .process__timeline {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-content);
  }

  /* Show connector on tablet (simplified) */
  .process__timeline::before {
    display: block;
  }

  .process__step::before {
    left: 50%;
    transform: translateX(-50%);
  }

  .process__step::after {
    display: block;
  }

  /* --- Hero CTA side-by-side on tablet --- */
  .hero__cta {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
  }

  /* --- Footer two-column --- */
  .footer__content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    text-align: left;
  }

  /* --- Form fields in rows where appropriate --- */
  .form__row {
    flex-direction: row;
    gap: var(--space-content);
  }

  .form__row > * {
    flex: 1;
  }

  /* --- Section padding increases --- */
  section {
    padding-inline: calc(var(--space-content) * 1.5);
  }

  /* --- Details section: two-column on tablet --- */
  .details__layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 3rem;
  }

  .details__headline {
    font-size: clamp(2rem, 4vw, 2.75rem);
    text-align: left;
  }

  .details__headline-wrap {
    padding-top: 2rem;
  }

  /* --- Hamburger still visible on tablet (below 1024px) --- */
  .nav__links,
  .nav__desktop,
  .navbar__nav {
    display: none;
  }

  .hamburger,
  .nav__hamburger,
  .navbar__hamburger {
    display: flex;
  }
}


/* --------------------------------------------------------------------------
   Desktop Breakpoint (>= 1024px) — Full multi-column layouts
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {

  /* --- Typography at full design token sizes --- */
  h1 {
    font-size: var(--text-hero);
  }

  h2 {
    font-size: var(--text-2xl);
  }

  h3 {
    font-size: var(--text-xl);
  }

  /* --- Desktop navigation: show links, hide hamburger --- */
  .nav__links,
  .nav__desktop,
  .navbar__nav {
    display: flex;
    align-items: center;
    gap: 2rem;
  }

  .hamburger,
  .nav__hamburger,
  .navbar__hamburger {
    display: none;
  }

  /* --- Multi-column layouts (3+ columns) --- */
  .grid-3,
  .services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-content);
  }

  .grid-4,
  .skills__list,
  .skills__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-content);
  }

  .process__steps,
  .process__timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-content);
  }

  .process__connector,
  .process__line {
    display: block;
  }

  .process__timeline::before {
    display: block;
  }

  /* --- Re-enable parallax, cursor glow, magnetic effects --- */
  .cursor-glow,
  .hero__glow {
    display: block !important;
  }

  .floating-shape,
  .hero__shape {
    animation: revert !important;
    transform: revert !important;
  }

  [data-parallax] {
    transform: revert !important;
  }

  .magnetic-btn,
  .btn-magnetic {
    transform: revert !important;
  }

  /* --- Re-enable multi-step animations --- */
  [data-aos] {
    opacity: revert !important;
    transform: revert !important;
    transition: revert !important;
  }

  .stagger-item,
  [data-stagger] {
    animation-delay: revert !important;
    transition-delay: revert !important;
  }

  .text-reveal,
  .reveal-stagger {
    animation: revert !important;
    opacity: revert !important;
    transform: revert !important;
  }

  /* --- Hero layout: centered text on desktop --- */
  .hero__content {
    text-align: center;
  }

  .hero__cta {
    justify-content: center;
  }

  /* --- Footer full row on desktop --- */
  .footer__content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }

  /* --- Touch targets can relax minimum on desktop (pointer: fine) --- */
  @media (pointer: fine) {
    a,
    button,
    .nav__link {
      min-height: auto;
      min-width: auto;
    }
  }

  /* --- Details section asymmetric layout --- */
  .details__content {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: calc(var(--space-content) * 2);
    align-items: center;
  }

  /* --- About section with wider reading column --- */
  .about__content {
    max-width: 720px;
  }

  /* --- Container max-width enforcement --- */
  .container {
    max-width: var(--max-width);
    margin-inline: auto;
  }
}


/* --------------------------------------------------------------------------
   Large Desktop (>= 1440px) — Optional comfort enhancements
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
  .container {
    max-width: calc(var(--max-width) + 4rem);
  }

  section {
    padding-inline: calc(var(--space-content) * 2);
  }
}