/* iPortfolio responsive enhancements
   Scales layout and typography across all breakpoints without breaking existing styles.
   Breakpoints: 1200, 992, 768, 576, 400
*/

/* 1) Global elements */
img, video, canvas, svg, iframe {
  max-width: 100%;
  height: auto;
}

.container,
.container-fluid {
  width: 100%;
}

/* Avoid horizontal scrollbars due to wide children */
.section,
section {
  overflow-x: clip;
}

/* 2) Utilities */
/* Display helpers */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }

@media (max-width: 992px) {
  .d-none-md { display: none !important; }
  .d-block-md { display: block !important; }
  .d-flex-md { display: flex !important; }
}

@media (max-width: 768px) {
  .d-none-sm { display: none !important; }
  .d-block-sm { display: block !important; }
  .d-flex-sm { display: flex !important; }
}

@media (max-width: 576px) {
  .d-none-xs { display: none !important; }
  .d-block-xs { display: block !important; }
  .d-flex-xs { display: flex !important; }
}

/* Text truncation utility */
.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 3) Header tweaks */
@media (max-width: 768px) {
  .top-header-content {
    gap: 8px;
  }
  .top-header .top-logo h1 {
    max-width: 60vw;
  }
}

@media (max-width: 576px) {
  .top-header .top-logo h1 {
    font-size: 18px;
  }
}

@media (max-width: 400px) {
  /* Hide social icons on extra-small screens to preserve space */
  .header-social-links { display: none !important; }
  .top-header .top-logo h1 { max-width: 80vw; }
}

/* 4) Hero scaling */
@media (max-width: 992px) {
  .hero h2 { font-size: 48px; }
  .hero p { font-size: 22px; }
}

@media (max-width: 768px) {
  .hero { padding: 60px 0; }
  .hero h2 { font-size: 32px; }
  .hero p { font-size: 18px; }
}

@media (max-width: 576px) {
  .hero { padding: 50px 0; }
  .hero .social-links a { margin-right: 14px; font-size: 20px; }
}

/* 5) Section paddings */
@media (max-width: 992px) {
  section, .section { padding: 56px 0; }
}
@media (max-width: 768px) {
  section, .section { padding: 48px 0; }
  .section-title { padding-bottom: 40px; }
  .section-title h2 { font-size: 26px; padding-bottom: 16px; }
}
@media (max-width: 576px) {
  section, .section { padding: 40px 0; }
  .section-title h2 { font-size: 24px; }
}

/* 6) About section */
@media (max-width: 992px) {
  .about .content h2 { font-size: 22px; }
}
@media (max-width: 768px) {
  .about .content ul li { align-items: flex-start; }
}

/* 7) Stats section (reduce excessive padding on small screens) */
@media (max-width: 1200px) {
  .stats .stats-item { padding: 64px; }
}
@media (max-width: 992px) {
  .stats .stats-item { padding: 48px; }
  .stats .stats-item .purecounter { font-size: 40px; line-height: 36px; }
}
@media (max-width: 768px) {
  .stats .stats-item { padding: 32px; }
  .stats .stats-item i { font-size: 36px; }
  .stats .stats-item .purecounter { font-size: 34px; line-height: 32px; }
}
@media (max-width: 576px) {
  .stats .stats-item { padding: 24px; }
}

/* 8) Services grid refinements */
@media (max-width: 992px) {
  .services .services-container { gap: 24px; }
}
@media (max-width: 768px) {
  .services .services-container { grid-template-columns: 1fr; gap: 20px; }
  .services .services-item { padding: 24px; }
}
@media (max-width: 576px) {
  .services .services-item { padding: 20px; }
}

/* 9) Portfolio list refinements */
.homepage-portfolio-post .post-featured-image img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 768px) {
  .homepage-portfolio-post { margin-bottom: 1.25rem; }
}

/* 10) Contact section spacing */
@media (max-width: 576px) {
  .contact .info-wrap { padding: 20px; }
  .contact .php-email-form { padding: 20px; }
}

/* 11) Footer social links sizing already responsive, add smallest breakpoint */
@media (max-width: 400px) {
  .footer-social-links { gap: 0.4rem; }
  .footer-social-links .social-link { width: 30px; height: 30px; font-size: 0.95rem; }
}

/* 12) Stats responsive fixes — allow wrapping on tablets/phones and scale contents */
@media (max-width: 992px) {
  .stats .stats-container {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    gap: clamp(12px, 2vw, 20px) !important;
  }
  .stats .stats-container > .stat-item {
    flex: 1 1 calc(50% - 10px) !important;
    min-width: calc(50% - 10px) !important;
  }
  .stats .stats-container > .stat-item .stats-item {
    white-space: normal !important;
    padding: 20px 12px !important;
  }
}

@media (max-width: 576px) {
  .stats .stats-container {
    gap: 12px !important;
  }
  .stats .stats-container > .stat-item {
    flex: 1 1 100% !important;
    min-width: 100% !important;
  }
  .stats .stats-container .stats-item i {
    font-size: 28px !important;
  }
  .stats .stats-container .stats-item .purecounter {
    font-size: 32px !important;
  }
  .stats .stats-container .stats-item p {
    font-size: 13px !important;
  }
}