/* Sitewide mobile layout fixes */
html {
  overflow-x: hidden;
  background: #0a0a0a;
}

body {
  overflow-x: clip;
  max-width: 100%;
}

img,
video,
svg {
  max-width: 100%;
}

@media (max-width: 768px) {
  /* Page headers */
  .page-header {
    padding: 7rem 1.25rem 2.5rem;
  }

  .page-header h1 {
    font-size: 1.85rem;
    letter-spacing: 3px;
    line-height: 1.3;
  }

  .page-header h1 i {
    display: block;
    margin-right: 0;
    margin-bottom: 0.75rem;
  }

  .page-header p {
    font-size: 0.95rem;
    letter-spacing: 1px;
    line-height: 1.55;
  }

  /* Section titles (About, Home, Portfolio) */
  .section-title {
    font-size: 1.65rem;
    letter-spacing: 2px;
    line-height: 1.35;
    margin-bottom: 2.5rem;
    padding: 0 0.5rem;
  }

  .section-title i {
    display: block;
    margin-right: 0;
    margin-bottom: 0.65rem;
  }

  /* Grids — prevent minmax overflow */
  .mission-vision,
  .features-grid,
  .team-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
  }

  .mission-vision {
    margin-bottom: 3rem;
  }

  .about-section,
  .blog-section,
  .portfolio-section,
  .team-section,
  .section {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .about-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .team-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .mission-card {
    padding: 2rem 1.25rem;
  }

  .mission-card h2 {
    font-size: 1.35rem;
    letter-spacing: 2px;
    line-height: 1.35;
  }

  /* Contact page */
  .contact-container {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
    margin: 2.5rem auto 3rem;
    padding: 0 1.25rem;
    width: 100%;
    max-width: 100%;
  }

  .contact-info,
  .contact-form {
    padding: 1.75rem 1.25rem;
    min-width: 0;
    width: 100%;
  }

  .contact-info h2,
  .contact-form h2 {
    font-size: 1.45rem;
    letter-spacing: 2px;
    line-height: 1.35;
    margin-bottom: 1.5rem;
  }

  .contact-info h2 i,
  .contact-form h2 i {
    display: block;
    margin-right: 0;
    margin-bottom: 0.5rem;
  }

  .info-item {
    padding: 1rem;
    gap: 1rem;
    margin-bottom: 1.25rem;
  }

  .info-item i {
    font-size: 1.25rem;
    flex-shrink: 0;
  }

  .info-item div h3 {
    font-size: 1rem;
    letter-spacing: 1px;
  }

  .info-item div p {
    font-size: 0.95rem;
    line-height: 1.6;
    word-break: break-word;
  }

  /* Blog listing */
  .blog-post-content {
    padding: 1.75rem 1.25rem;
  }

  .blog-post-meta {
    flex-wrap: wrap;
    gap: 0.65rem 1.25rem;
    margin-bottom: 1.25rem;
  }

  .blog-post-meta span {
    white-space: nowrap;
    font-size: 0.82rem;
  }

  .blog-post h2 {
    font-size: 1.35rem;
    letter-spacing: 2px;
    line-height: 1.35;
  }

  .blog-post h2 i {
    display: block;
    margin-right: 0;
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
  }

  /* Blog posts */
  .post-header {
    padding: 7rem 1.25rem 2rem;
  }

  .post-meta,
  .blog-post-meta {
    flex-wrap: wrap;
    gap: 0.65rem 1.25rem;
    margin-bottom: 1.5rem;
  }

  .post-meta span,
  .blog-post-meta span {
    white-space: nowrap;
    font-size: 0.82rem;
  }

  .post-header h1 {
    font-size: 1.65rem !important;
    letter-spacing: 2px;
    line-height: 1.35;
  }

  .featured-image {
    height: 220px;
    margin-bottom: 2rem;
  }

  .post-content {
    padding: 0 1.25rem 4rem;
  }

  .post-content p {
    font-size: 1rem;
    line-height: 1.75;
  }

  .post-content h2 {
    font-size: 1.35rem;
    letter-spacing: 2px;
    line-height: 1.35;
    margin: 2rem 0 1rem;
  }

  .post-content h2 i {
    display: block;
    margin-right: 0;
    margin-bottom: 0.5rem;
  }

  /* Legal pages */
  body:has(> .container) {
    padding: 5.5rem 0 2rem;
  }

  body > .container,
  .container {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
    padding: 1.75rem 1.25rem;
    max-width: none;
    width: auto;
  }

  .container h1 {
    font-size: 1.65rem;
    letter-spacing: 2px;
    line-height: 1.35;
  }

  .container h2 {
    font-size: 1.2rem;
    line-height: 1.35;
  }

  .container ul {
    margin-left: 1.25rem;
  }

  /* Footer */
  footer {
    padding: 3rem 1.25rem;
  }

  .footer-content {
    gap: 2rem;
    grid-template-columns: 1fr !important;
  }

  /* Hero on home */
  .hero h1 {
    font-size: 2rem;
    letter-spacing: 3px;
  }

  .hero p {
    font-size: 0.95rem;
    padding: 0 1rem;
  }

  /* Models page header */
  .models-header {
    padding: 7rem 1.25rem 2.5rem !important;
  }

  .models-header h1 {
    font-size: 1.85rem !important;
    letter-spacing: 3px !important;
  }
}