/* ==========================================================================
   responsive.css - Intelligent Multi-Breakpoint Responsive System
   Khaled Ibrahim - Junior Backend .NET Developer Portfolio
   Breakpoints: 1440px+, 1024px, 768px, 425px, 375px, 320px
   ========================================================================== */

/* 1. Large Screens & Ultrawide (1440px - 1920px) */
@media screen and (min-width: 1440px) {
  :root {
    --container-max: 1320px;
  }
  .hero-title {
    font-size: 4.25rem;
  }
  .hero-card-frame {
    max-width: 460px;
  }
}

/* 2. Laptops & Small Desktops (<= 1200px) */
@media screen and (max-width: 1200px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-grid {
    gap: 36px;
  }
}

/* 3. Tablets & Horizontal Screens (<= 1024px) */
@media screen and (max-width: 1024px) {
  :root {
    --header-height: 68px;
  }

  /* Desktop Nav Switch to Mobile Menu */
  .desktop-nav {
    display: none;
  }
  .mobile-menu-btn {
    display: flex;
  }

  /* Hero Section */
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
    text-align: left;
  }
  .hero-content {
    align-items: flex-start;
  }
  .hero-visual {
    order: -1;
    max-width: 380px;
    margin: 0 auto;
  }

  /* Skills & Certificates */
  .skills-grid {
    grid-template-columns: 1fr;
  }
  .certificates-grid {
    grid-template-columns: 1fr;
  }

  /* About Section Highlights */
  .about-highlights-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Contact Section */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Modal Columns */
  .modal-columns {
    grid-template-columns: 1fr;
  }

  /* Disable custom cursor on tablets */
  .cursor-dot,
  .cursor-ring {
    display: none !important;
  }
}

/* 4. Small Tablets & Large Phones (<= 768px) */
@media screen and (max-width: 768px) {
  .section {
    padding-top: 70px;
    padding-bottom: 70px;
  }

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

  .section-title {
    font-size: 2rem;
  }

  .hero-title {
    font-size: 2.5rem;
  }

  .hero-tagline {
    font-size: 1rem;
  }

  .hero-bio {
    font-size: 0.938rem;
  }

  .hero-ctas {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .hero-ctas .btn {
    width: 100%;
  }

  /* About Card */
  .about-card {
    padding: 24px;
  }
  .about-paragraphs {
    font-size: 0.969rem;
  }
  .about-highlights-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .stat-number {
    font-size: 1.5rem;
  }

  /* Education */
  .education-card {
    padding: 24px;
  }
  .education-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .education-period-badge {
    align-self: flex-start;
  }

  /* Projects */
  .projects-grid {
    grid-template-columns: 1fr;
  }
  .projects-filters {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
  }
  .filter-btn {
    white-space: nowrap;
  }

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

  /* Experience Timeline */
  .experience-timeline {
    padding-left: 26px;
  }
  .experience-timeline::before {
    left: 8px;
  }
  .timeline-marker {
    left: -26px;
    width: 20px;
    height: 20px;
    top: 20px;
  }
  .timeline-marker-inner {
    width: 6px;
    height: 6px;
  }
  .timeline-card {
    padding: 22px;
  }
  .timeline-role {
    font-size: 1.125rem;
  }

  /* Testimonial Card */
  .testimonial-card {
    padding: 28px 20px;
  }
  .testimonial-quote {
    font-size: 0.969rem;
  }

  /* Contact Section */
  .contact-info-card,
  .contact-cta-panel {
    padding: 26px 20px;
  }
  .contact-item-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .contact-item-row .btn-copy-info {
    align-self: flex-end;
  }
  .contact-social-buttons {
    flex-direction: column;
  }
  .contact-social-buttons .btn {
    width: 100%;
  }

  /* Modal */
  .modal-window {
    padding: 22px;
    max-height: 94vh;
  }
  .modal-media-wrap {
    height: 180px;
  }
  .modal-heading {
    font-size: 1.375rem;
  }
  .modal-footer-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .modal-footer-actions .btn {
    width: 100%;
  }

  /* Footer */
  .footer-top-grid {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-nav-links {
    flex-wrap: wrap;
  }
  .footer-bottom-bar {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  .back-to-top-btn {
    bottom: 20px;
    right: 20px;
    width: 38px;
    height: 38px;
  }
}

/* 5. Standard Mobile Phones (<= 425px) */
@media screen and (max-width: 425px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero-title {
    font-size: 2.15rem;
  }

  .hero-meta {
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  .hero-meta-item {
    width: 100%;
  }

  .about-highlights-grid {
    grid-template-columns: 1fr;
  }

  .about-header-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .education-title-wrap {
    flex-direction: column;
    align-items: flex-start;
  }

  .project-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .project-actions .btn {
    width: 100%;
  }

  .slider-controls {
    gap: 12px;
  }
}

/* 6. Small Mobile Phones (<= 375px & 320px) */
@media screen and (max-width: 375px) {
  .hero-title {
    font-size: 1.85rem;
  }
  .hero-role {
    font-size: 1rem;
  }
  .section-title {
    font-size: 1.75rem;
  }
  .modal-window {
    padding: 16px;
  }
  .timeline-card {
    padding: 16px;
  }
  .skill-category-card {
    padding: 20px 16px;
  }
}

/* 7. Extra Small Mobile Phones (<= 320px) */
@media screen and (max-width: 320px) {
  :root {
    --header-height: 62px;
  }
  .nav-logo-name {
    font-size: 0.95rem;
  }
  .nav-logo-status {
    display: none;
  }
  .hero-title {
    font-size: 1.65rem;
  }
  .hero-status-badge {
    font-size: 0.75rem;
    padding: 4px 10px;
  }
  .btn {
    font-size: 0.844rem;
    padding: 10px 16px;
  }
}

/* 8. Cross-device hardening
   These rules keep every grid/flex child shrinkable, account for safe-area
   insets, and avoid fixed viewport heights that can clip content on mobile. */
html {
  overflow-x: hidden;
}

body,
main,
section,
.container,
.nav-container,
.hero-grid,
.contact-grid,
.skills-grid,
.services-grid,
.projects-grid,
.certificates-grid {
  min-width: 0;
}

#bg-canvas {
  width: 100%;
  height: 100%;
}

.container {
  padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
}

.hero-section {
  min-height: 100svh;
  min-height: 100dvh;
}

.hero-content,
.hero-visual,
.about-card,
.education-card,
.skill-category-card,
.timeline-card,
.service-card,
.project-card,
.cert-card,
.contact-info-card,
.contact-cta-panel,
.modal-window {
  min-width: 0;
}

.education-title-wrap,
.education-title-wrap > div,
.timeline-header > div,
.cert-header,
.contact-item-left,
.contact-label-group,
.project-body,
.modal-body-content {
  min-width: 0;
}

.education-degree,
.education-institution,
.timeline-role,
.cert-title,
.cert-issuer,
.project-title,
.contact-val-link,
.modal-heading,
.modal-subheading {
  overflow-wrap: anywhere;
}

.nav-logo,
.nav-actions,
.hero-meta,
.hero-ctas,
.project-actions,
.contact-social-buttons,
.modal-footer-actions {
  min-width: 0;
}

.nav-logo-name {
  overflow-wrap: anywhere;
}

.contact-val-link {
  word-break: break-word;
}

.modal-overlay {
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

.modal-window {
  max-height: min(90dvh, 900px);
  overscroll-behavior: contain;
}

@media screen and (max-width: 1024px) {
  .site-header {
    padding-top: env(safe-area-inset-top);
    height: calc(var(--header-height) + env(safe-area-inset-top));
  }

  .mobile-nav-drawer {
    height: 100dvh;
  }

  .mobile-nav-content {
    top: calc(var(--header-height) + env(safe-area-inset-top));
    height: calc(100dvh - var(--header-height) - env(safe-area-inset-top));
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }

  .hero-section {
    padding-top: calc(var(--header-height) + env(safe-area-inset-top) + 32px);
  }

  .education-details {
    flex-wrap: wrap;
  }
}

@media screen and (max-width: 768px) {
  .section {
    padding-block: clamp(56px, 9vw, 70px);
  }

  .section-header {
    margin-bottom: clamp(30px, 7vw, 40px);
  }

  .about-card,
  .education-card,
  .skill-category-card,
  .timeline-card,
  .service-card,
  .cert-card,
  .contact-info-card,
  .contact-cta-panel,
  .testimonial-card {
    padding: clamp(20px, 5vw, 30px);
  }

  .skill-card-top,
  .cert-header,
  .timeline-header,
  .snapshot-card-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .skill-cat-title {
    max-width: calc(100% - 52px);
  }

  .certificate-preview {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: contain;
  }

  .projects-filters {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-inline: 2px;
    margin-inline: -2px;
  }

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

  .filter-btn {
    flex: 0 0 auto;
  }

  .contact-item-left {
    align-items: flex-start;
  }

  .contact-item-row .btn-copy-info {
    flex-shrink: 0;
  }

  .slider-controls,
  .footer-bottom-bar {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

@media screen and (max-width: 600px) {
  .nav-logo {
    gap: 8px;
    min-width: 0;
  }

  .nav-logo-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
  }

  .nav-logo-name {
    font-size: 1rem;
  }

  .nav-actions {
    gap: 8px;
  }

  .theme-toggle-btn,
  .mobile-menu-btn,
  .slider-btn {
    width: 44px;
    height: 44px;
  }

  .hero-grid {
    gap: 34px;
  }

  .hero-visual {
    width: min(100%, 340px);
  }

  .hero-floating-badge {
    max-width: calc(100% - 20px);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .education-details,
  .contact-item-row,
  .modal-footer-actions {
    align-items: stretch;
  }

  .education-details {
    flex-direction: column;
    gap: 12px;
  }

  .graduation-project-badge {
    white-space: normal;
    width: 100%;
  }

  .contact-item-row {
    flex-direction: column;
  }

  .contact-item-row .btn-copy-info {
    align-self: flex-start;
  }

  .modal-media-wrap {
    height: auto;
    aspect-ratio: 16 / 10;
  }

  .modal-close-btn {
    top: 12px;
    right: 12px;
  }
}

@media screen and (max-width: 375px) {
  .container {
    padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right));
  }

  .hero-status-badge,
  .section-tag {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .hero-role {
    align-items: flex-start;
    overflow-wrap: anywhere;
  }

  .hero-meta-item {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .tech-pill {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-card-frame:hover,
  .about-stat-box:hover,
  .capability-domain:hover,
  .snapshot-card:hover,
  .education-card:hover,
  .skill-category-card:hover,
  .timeline-card:hover,
  .service-card:hover,
  .project-card:hover,
  .cert-card:hover {
    transform: none;
  }
}