/* ==========================================================================
   RESPONSIVE BREAKPOINTS (css/responsive.css)
   Tested across: 1920px, 1440px, 1366px, 1024px, 768px, 430px, 414px, 390px, 375px, 360px, 320px
   ========================================================================== */

/* Global Mobile-Safe Overflow & Grid/Flex Shrink Protection */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.hero-grid > *,
.about-grid > *,
.stats-grid > *,
.services-grid > *,
.resume-grid > *,
.skills-layout > *,
.portfolio-grid > *,
.blog-grid > *,
.contact-grid > *,
.footer-top > *,
.info-grid > *,
.form-row-two > * {
  min-width: 0;
  max-width: 100%;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
li,
a,
span,
strong,
blockquote,
.info-value,
.contact-detail-value,
.timeline-desc,
.timeline-role,
.timeline-org,
.portfolio-title,
.portfolio-excerpt,
.blog-title,
.blog-title-link,
.blog-excerpt,
.knowledge-text span,
.knowledge-text strong {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* --------------------------------------------------------------------------
   1. LARGE DESKTOPS (1440px - 1920px+)
   -------------------------------------------------------------------------- */
@media screen and (min-width: 1440px) {
  :root {
    --container-max: 1260px;
  }

  .hero-grid {
    grid-template-columns: 430px minmax(0, 1fr);
    gap: 80px;
  }
}

/* --------------------------------------------------------------------------
   2. LAPTOPS & SMALL DESKTOPS (Max-width: 1199px / 1024px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1199px) {
  .hero-grid {
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 40px;
  }

  .services-grid,
  .portfolio-grid,
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nav-list {
    gap: 16px;
  }
}

/* --------------------------------------------------------------------------
   3. TABLETS & COMPACT LAPTOPS (Max-width: 991px / 768px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  :root {
    --header-height: 68px;
  }

  .section-padding {
    padding: 72px 0;
  }

  /* Mobile Hamburger Menu Activation */
  .mobile-menu-toggle {
    display: inline-flex;
  }

  .header-cta {
    display: none;
  }

  .main-nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    background-color: var(--bg-surface);
    border-bottom: 1px solid var(--border-strong);
    box-shadow: var(--shadow-card);
    padding: 20px 24px 28px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity var(--duration-normal) var(--ease-out),
                transform var(--duration-normal) var(--ease-out),
                visibility var(--duration-normal);
  }

  .main-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .nav-link {
    display: block;
    padding: 12px 14px;
    font-size: 0.95rem;
    border-radius: var(--radius-sm);
  }

  .nav-link::after {
    display: none;
  }

  .nav-link:hover,
  .nav-link.active {
    background-color: var(--primary-soft);
    color: var(--primary-color);
  }

  /* Single-Column Stack for Hero, About, Resume, Skills, Contact */
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .hero-profile-col {
    max-width: 360px;
    margin: 0 auto;
    width: 100%;
  }

  .hero-content-col {
    text-align: center;
    width: 100%;
  }

  .hero-typing-wrapper {
    justify-content: center;
    text-align: center;
  }

  .hero-description {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-cta-group {
    justify-content: center;
  }

  .hero-social-bar {
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
  }

  .about-grid,
  .resume-grid,
  .skills-layout,
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .footer-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px;
  }

  .footer-brand-col {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   4. MOBILE PHONES (Max-width: 767px — iPhone / Android 430px, 414px, 390px, 375px, 360px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .container {
    padding: 0 16px;
  }

  .section-padding {
    padding: 54px 0;
  }

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

  /* Prevent Long Buttons From Clipping Off Screen */
  .btn {
    white-space: normal;
    text-align: center;
    line-height: 1.35;
    padding: 12px 18px;
    max-width: 100%;
    flex-shrink: 1;
  }

  .header-inner {
    gap: 10px;
  }

  .brand-logo {
    font-size: 1.05rem;
  }

  .header-actions {
    gap: 8px;
  }

  .header-actions .btn-sm {
    padding: 6px 12px;
    font-size: 0.8rem;
    min-height: 36px;
  }

  /* Hero Mobile Typography & Spacing */
  .hero-section {
    padding-top: 24px;
    padding-bottom: 48px;
    min-height: auto;
  }

  .profile-card {
    padding: 16px;
  }

  .availability-status {
    flex-wrap: wrap;
    justify-content: center;
    font-size: 0.8rem;
    line-height: 1.4;
  }

  .hero-kicker {
    font-size: 0.78rem;
    line-height: 1.45;
    word-break: break-word;
  }

  .hero-title {
    font-size: clamp(1.75rem, 7vw, 2.25rem);
    line-height: 1.2;
  }

  .hero-typing-wrapper {
    font-size: 1.05rem;
    min-height: 3.2rem;
    line-height: 1.4;
    justify-content: center;
  }

  .hero-description {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 24px;
  }

  .hero-cta-group {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 12px;
  }

  .hero-cta-group .btn {
    width: 100%;
  }

  .hero-social-bar {
    flex-direction: column;
    gap: 10px;
  }

  .social-links {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* About & Personal Info Grid */
  .about-subtitle {
    font-size: 1.15rem;
  }

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

  .about-actions .btn {
    width: 100%;
  }

  .services-grid,
  .portfolio-grid,
  .blog-grid,
  .form-row-two {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .info-grid {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px 16px;
    gap: 14px;
  }

  .info-item:nth-last-child(2) {
    border-bottom: 1px solid var(--border-hairline);
    padding-bottom: 14px;
  }

  /* Stats Grid */
  .stats-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .stat-card {
    padding: 14px 16px;
  }

  /* Services, Resume & Timeline */
  .service-card {
    padding: 22px 18px;
  }

  .timeline {
    padding-left: 20px;
  }

  .timeline-marker {
    left: -28px;
  }

  .timeline-item {
    padding: 20px 16px;
  }

  .timeline-role {
    font-size: 1.05rem;
  }

  /* Skills Section */
  .skills-panel {
    padding: 22px 16px;
  }

  .skill-header {
    align-items: flex-start;
    gap: 12px;
    font-size: 0.88rem;
  }

  .skill-name {
    flex: 1;
    min-width: 0;
    line-height: 1.35;
  }

  .skill-percent {
    flex-shrink: 0;
  }

  /* Portfolio Filters & Cards */
  .portfolio-filters {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding: 6px;
    scrollbar-width: none;
  }

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

  .portfolio-body,
  .blog-body {
    padding: 18px 16px;
  }

  /* Testimonials */
  .testimonial-carousel {
    padding: 24px 16px;
  }

  .testimonial-quote {
    font-size: 0.96rem;
    line-height: 1.6;
  }

  .testimonial-author {
    flex-wrap: wrap;
    gap: 12px;
  }

  /* Contact Section */
  .contact-info-panel,
  .contact-form-panel {
    padding: 22px 16px;
  }

  .contact-detail-content {
    min-width: 0;
    flex: 1;
  }

  .contact-detail-value {
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* Footer */
  .footer-top {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    justify-content: center;
  }

  .footer-legal-links {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Modals & Admin Bar */
  .modal-backdrop {
    padding: 12px;
  }

  .modal-container {
    padding: 22px 16px;
    max-height: 92vh;
  }

  .modal-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .modal-actions .btn {
    width: 100%;
  }

  .cms-admin-bar {
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 10px 12px;
  }
}

/* --------------------------------------------------------------------------
   5. SMALL MOBILE SCREENS (Max-width: 380px / 320px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 380px) {
  .container {
    padding: 0 14px;
  }

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

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