/*
 * ====================================================
 *  SAIRA NOOR THEME — RESPONSIVE CSS
 *  Comprehensive mobile-first fixes
 *  Breakpoints: 480px | 640px | 768px | 1024px | 1280px
 * ====================================================
 */

/* ============================================================
   IDENTIFIED ISSUES FIXED IN THIS FILE:
   1.  Hero title too large on small phones (clamp floor too big)
   2.  Hero min-height + scroll indicator overflow on short screens
   3.  Hero body text max-width:600px clips on narrow screens
   4.  btn-group wraps badly — buttons too wide on mobile
   5.  Card padding 40px — too much on phones
   6.  project-card.featured inner grid — doesn't collapse on tablet
   7.  Stats grid (3-col inline) on About — no breakpoint
   8.  Footer flex layout — logo + links overflow side-by-side on mobile
   9.  Header nav z-index behind hero on some browsers
   10. Section padding still too large at 640px
   11. .card-number font-size too large on phone
   12. contact-block wraps ugly — items need flex-direction column on mobile
   13. sn-cta-text font-size 1.1rem too big on tiny screens
   14. About photo placeholder aspect-ratio 4/5 = very tall on mobile
   15. inline grid styles in templates (3-col stats etc) — need override
   16. service-block number+title layout cramped
   17. portfolio-card-header height fixed 180px — wastes space on mobile
   18. differentiator-item gap too wide on mobile
   19. section-heading line breaks look odd at 480px
   20. tools-cat-title line extends too wide on mobile
   ============================================================ */


/* ============================================================
   1. GLOBAL VARIABLES — SMALLER SPACING ON MOBILE
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --section-pad-y: 64px;
    --radius-lg: 18px;
  }
}

@media (max-width: 480px) {
  :root {
    --section-pad-y: 48px;
    --radius-lg: 14px;
  }
}


/* ============================================================
   2. HTML / BODY — PREVENT HORIZONTAL OVERFLOW
   ============================================================ */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

* {
  min-width: 0; /* fix grid/flex children overflow */
}


/* ============================================================
   3. HEADER
   ============================================================ */

/* Ensure nav z-index is above everything */
#sn-header {
  z-index: 9999;
}

@media (max-width: 768px) {
  #sn-header {
    padding: 0 20px;
    height: 64px;
  }

  #sn-header.scrolled {
    height: 56px;
  }

  /* Mobile nav panel — sits below header */
  #sn-nav {
    top: 64px;
    z-index: 9998;
  }

  .sn-logo {
    font-size: 1.35rem;
  }
}

@media (max-width: 480px) {
  #sn-header {
    padding: 0 16px;
    height: 60px;
  }

  #sn-nav {
    top: 60px;
  }
}


/* ============================================================
   4. HERO SECTION
   ============================================================ */

/* Adjust min-height so hero doesn't feel cramped on mobile */
@media (max-width: 768px) {
  .sn-hero {
    min-height: 100svh; /* use svh for modern browsers */
    min-height: 100vh;  /* fallback */
    padding-top: 64px;
    padding-bottom: 80px; /* breathing room above scroll indicator */
    align-items: flex-start;
    padding-left: 0;
    padding-right: 0;
  }

  .sn-hero-content {
    padding: 48px 24px 0;
  }

  /* Hero title — clamp floor is 3.5rem which is fine, but tighten on phones */
  .sn-hero-title {
    font-size: clamp(2.8rem, 12vw, 5rem);
    letter-spacing: -0.025em;
    margin-bottom: 12px;
  }

  .sn-hero-subtitle {
    font-size: clamp(1.1rem, 4.5vw, 1.5rem);
    margin-bottom: 24px;
    line-height: 1.4;
  }

  .sn-hero-body {
    font-size: 1rem;
    max-width: 100%;
    margin-bottom: 32px;
    line-height: 1.75;
  }

  .sn-hero-eyebrow {
    margin-bottom: 20px;
    font-size: 0.7rem;
  }

  .sn-hero-tag {
    margin-bottom: 20px;
    font-size: 0.75rem;
    white-space: normal;
    text-align: left;
  }

  /* Scroll indicator — hide on short screens to prevent overlap */
  .sn-hero-scroll {
    display: none;
  }
}

@media (max-width: 480px) {
  .sn-hero-title {
    font-size: clamp(2.4rem, 13vw, 4rem);
  }

  .sn-hero-content {
    padding: 40px 16px 0;
  }
}


/* ============================================================
   5. BUTTONS — Full-width on small screens
   ============================================================ */

@media (max-width: 640px) {
  /* btn-group stacks vertically */
  .btn-group {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    width: 100%;
  }

  .btn {
    width: 100%;
    justify-content: center;
    padding: 14px 24px;
  }

  .btn-lg {
    padding: 16px 24px;
    font-size: 0.9rem;
  }

  /* Nav CTA in header stays normal size */
  .sn-nav .nav-cta {
    width: auto;
  }
}


/* ============================================================
   6. SECTION HEADINGS — Prevent overflow at narrow widths
   ============================================================ */

@media (max-width: 768px) {
  .section-heading {
    font-size: clamp(1.6rem, 6vw, 2.5rem);
    word-break: break-word;
    hyphens: auto;
  }

  .section-subtext {
    font-size: 0.95rem;
    max-width: 100%;
  }

  .sn-cta-title {
    font-size: clamp(1.8rem, 6vw, 2.8rem);
    word-break: break-word;
  }

  .sn-cta-text {
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  .section-heading {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }

  .section-label {
    font-size: 0.7rem;
  }
}


/* ============================================================
   7. FRAMEWORK CARDS — Reduce padding on mobile
   ============================================================ */

@media (max-width: 768px) {
  .card {
    padding: 28px 24px;
  }

  .card-number {
    font-size: 2.5rem;
    margin-bottom: 12px;
  }
}

@media (max-width: 480px) {
  .card {
    padding: 24px 20px;
  }

  .card-number {
    font-size: 2rem;
  }
}


/* ============================================================
   8. SELECTED WORK — project cards
   ============================================================ */

/* Featured card — inner 2-col grid collapses on tablet too */
@media (max-width: 1024px) {
  .project-card.featured {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .project-card {
    padding: 32px 24px;
  }

  .project-arrow {
    top: 24px;
    right: 24px;
    width: 34px;
    height: 34px;
    font-size: 0.875rem;
  }

  .project-title {
    font-size: clamp(1.2rem, 4.5vw, 1.6rem);
    padding-right: 40px; /* room for arrow */
  }
}

@media (max-width: 480px) {
  .project-card {
    padding: 24px 18px;
  }

  .project-card.featured {
    padding: 24px 18px;
  }

  .project-title {
    font-size: clamp(1.1rem, 5vw, 1.4rem);
  }

  .project-desc {
    font-size: 0.875rem;
  }
}


/* ============================================================
   9. TOOLS SECTION
   ============================================================ */

@media (max-width: 640px) {
  .tools-cat-title {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
  }

  /* Remove the extending line on very narrow screens */
  .tools-cat-title::after {
    display: none;
  }

  .tool-pill {
    padding: 8px 14px;
    font-size: 0.8rem;
  }

  .tools-list {
    gap: 8px;
  }
}


/* ============================================================
   10. CTA SECTION
   ============================================================ */

@media (max-width: 640px) {
  .sn-cta-inner {
    padding: 0 20px;
  }

  /* Contact block items — stack vertically on mobile */
  .contact-block {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .contact-item {
    font-size: 0.85rem;
  }
}


/* ============================================================
   11. FOOTER
   ============================================================ */

@media (max-width: 768px) {
  #sn-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 36px 24px;
  }

  .footer-links {
    gap: 16px;
  }

  .footer-copy {
    text-align: left;
  }
}

@media (max-width: 480px) {
  #sn-footer {
    padding: 32px 16px;
  }

  .footer-links {
    flex-direction: column;
    gap: 12px;
  }

  .footer-links a {
    font-size: 0.9rem;
  }
}


/* ============================================================
   12. SERVICES PAGE
   ============================================================ */

@media (max-width: 768px) {
  .service-block {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 32px 0;
  }

  /* Show num inline with title on mobile */
  .service-num {
    font-size: 0.8rem;
    display: inline-block;
    margin-bottom: 4px;
  }

  .service-tagline {
    font-size: 0.95rem;
  }

  .service-list {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .service-list li {
    font-size: 0.875rem;
  }
}

@media (max-width: 480px) {
  .service-block {
    padding: 24px 0;
  }
}


/* ============================================================
   13. ABOUT PAGE
   ============================================================ */

/* Photo placeholder — don't use 4/5 ratio on mobile, too tall */
@media (max-width: 640px) {
  .about-photo-placeholder,
  .about-photo {
    aspect-ratio: 3/2;
  }
}

/* Stats row (inline 3-col grid in template) */
@media (max-width: 480px) {
  /* Target the inline stats grid in about template */
  .about-stats-inline {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}

/* Differentiator items */
@media (max-width: 640px) {
  .differentiator-item {
    gap: 16px;
    padding: 20px 0;
  }

  .diff-num {
    width: 28px;
    font-size: 0.8rem;
  }

  .diff-content h4 {
    font-size: 1.05rem;
  }

  .diff-content p {
    font-size: 0.875rem;
  }
}


/* ============================================================
   14. PORTFOLIO PAGE
   ============================================================ */

@media (max-width: 640px) {
  .portfolio-card-header {
    height: 130px;
  }

  .portfolio-card-body {
    padding: 20px;
  }

  .portfolio-card-title {
    font-size: 1.1rem;
  }
}


/* ============================================================
   15. CONTACT PAGE
   ============================================================ */

@media (max-width: 640px) {
  .sn-form {
    padding: 28px 20px;
    border-radius: var(--radius-md);
  }

  .contact-info-item {
    gap: 14px;
    padding: 18px 0;
  }

  .contact-info-icon {
    width: 38px;
    height: 38px;
    font-size: 0.9rem;
    flex-shrink: 0;
  }

  .contact-info-value {
    font-size: 0.875rem;
    word-break: break-word;
  }
}

@media (max-width: 480px) {
  .sn-form {
    padding: 24px 16px;
  }

  .form-input,
  .form-select,
  .form-textarea {
    font-size: 1rem; /* prevent iOS zoom on focus */
    padding: 12px 14px;
  }
}


/* ============================================================
   16. INLINE TEMPLATE STYLES — Override for mobile
       (Stats grid, featured card inner boxes, etc.)
   ============================================================ */

/* About page — 3-col stats below story text */
@media (max-width: 480px) {
  /* Forces 3-col inline grid to stack 2-col */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

/* Home featured project — inner stat boxes */
@media (max-width: 768px) {
  /* The two info boxes inside featured project card */
  .project-card.featured > div:last-of-type {
    display: none; /* hide decorative stat boxes on mobile to save space */
  }
}

/* All inline styles with max-width that would break on mobile */
@media (max-width: 768px) {
  [style*="max-width:780px"],
  [style*="max-width: 780px"],
  [style*="max-width:720px"],
  [style*="max-width: 720px"],
  [style*="max-width:640px"],
  [style*="max-width: 640px"],
  [style*="max-width:520px"],
  [style*="max-width: 520px"] {
    max-width: 100% !important;
  }
}


/* ============================================================
   17. INLINE TEXT STYLES IN TEMPLATES
   ============================================================ */

/* Section headings with inline em color */
@media (max-width: 480px) {
  h1 em, h2 em, h3 em {
    display: inline;
    font-style: italic;
  }

  /* Prevent heading line-break forced by <br> from being too aggressive */
  .sn-hero-title br,
  .section-heading br,
  .sn-cta-title br {
    display: none;
  }

  .sn-hero-title {
    word-break: break-word;
  }
}


/* ============================================================
   18. BADGE / TAG WRAPPING
   ============================================================ */

@media (max-width: 480px) {
  .project-tag,
  .sn-hero-tag,
  .sn-hero-eyebrow {
    flex-wrap: wrap;
    white-space: normal;
  }

  /* Availability badge in contact */
  [style*="display:inline-flex"][style*="border-radius:100px"],
  [style*="display: inline-flex"][style*="border-radius: 100px"] {
    flex-wrap: wrap;
    text-align: left;
  }
}


/* ============================================================
   19. TOUCH TARGETS — Minimum 44×44px for all interactive
   ============================================================ */

@media (max-width: 768px) {
  a, button, input[type="submit"], .btn {
    min-height: 44px;
  }

  .sn-nav a {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sn-hamburger {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    align-items: center;
  }
}


/* ============================================================
   20. REDUCE MOTION — Accessibility
   ============================================================ */

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

  .animate-fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ============================================================
   21. IMAGE SAFETY
   ============================================================ */

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Prevent SVG from overflowing */
svg {
  max-width: 100%;
  overflow: visible;
}


/* ============================================================
   22. TABLET — 768px to 1024px SPECIFIC FIXES
   ============================================================ */

@media (min-width: 769px) and (max-width: 1024px) {
  /* Container gets more breathing room */
  .container {
    padding: 0 40px;
  }

  /* Hero title slightly smaller on tablet landscape */
  .sn-hero-title {
    font-size: clamp(3.2rem, 7vw, 6rem);
  }

  /* 2-col work grid is fine, but reduce card padding */
  .card {
    padding: 32px 28px;
  }

  .project-card {
    padding: 36px 28px;
  }
}


/* ============================================================
   23. LARGE SCREENS — 1280px+
   ============================================================ */

@media (min-width: 1280px) {
  /* Ensure containers don't stretch too wide */
  .container {
    max-width: 1280px;
  }

  /* Larger hero on big screens */
  .sn-hero-title {
    font-size: clamp(5rem, 7.5vw, 9rem);
  }
}


/* ============================================================
   24. PRINT
   ============================================================ */

@media print {
  #sn-header,
  #sn-footer,
  .sn-hero-scroll,
  .btn-group,
  .sn-cta {
    display: none !important;
  }

  body {
    background: white !important;
    color: black !important;
    font-size: 12pt;
  }

  .sn-hero {
    min-height: auto;
    padding: 20pt 0;
  }

  .section-heading,
  .sn-hero-title {
    color: black !important;
  }

  a {
    color: black !important;
    text-decoration: underline;
  }

  .card,
  .project-card,
  .portfolio-card {
    border: 1px solid #ccc !important;
    background: white !important;
    break-inside: avoid;
  }
}


/* ============================================================
   25. ABOUT PAGE — STATS GRID (specific class)
   ============================================================ */

.about-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 640px) {
  .about-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

@media (max-width: 360px) {
  .about-stats-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Availability badge wrapping */
.availability-badge {
  display: inline-flex;
  flex-wrap: wrap;
  word-break: break-word;
}

/* ============================================================
   26. HOME PAGE — Featured project stat boxes hide on mobile
   ============================================================ */
@media (max-width: 640px) {
  /* Hide the two decorative stat boxes inside the featured card */
  .project-card.featured > div:nth-child(2) {
    display: none;
  }
}

/* ============================================================
   27. CONTACT PAGE — email word-break
   ============================================================ */
.contact-info-value,
.contact-info-value a {
  word-break: break-all;
  overflow-wrap: break-word;
}

@media (max-width: 480px) {
  /* Stack contact info items better on tiny screens */
  .contact-info-item {
    flex-direction: row;
    align-items: flex-start;
  }

  .contact-info-icon {
    margin-top: 2px;
  }
}

/* ============================================================
   28. SAFE AREA INSETS — notched phones
   ============================================================ */
@supports (padding: max(0px)) {
  .sn-hero {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }

  #sn-footer {
    padding-bottom: max(48px, env(safe-area-inset-bottom));
    padding-left: max(clamp(20px, 5vw, 80px), env(safe-area-inset-left));
    padding-right: max(clamp(20px, 5vw, 80px), env(safe-area-inset-right));
  }

  #sn-header {
    padding-left: max(clamp(20px, 5vw, 60px), env(safe-area-inset-left));
    padding-right: max(clamp(20px, 5vw, 60px), env(safe-area-inset-right));
  }
}