/* ============================================
   Responsive Breakpoints & Layout Adjustments
   ============================================ */

/* Large desktops */
@media (min-width: 1440px) {
  :root { --container-max: 1280px; --content-max: 1100px; }
}

/* Desktops */
@media (max-width: 1280px) {
  :root { --container-max: 1100px; --content-max: 980px; }
}

/* Tablets landscape */
@media (max-width: 1024px) {
  /* Fluid type only below desktop to preserve desktop look */
  body { font-size: var(--fs-body); line-height: 1.7; }
  h1, .title { font-size: var(--fs-h1); line-height: 1.2; }
  h2, .project-title { font-size: var(--fs-h2); line-height: 1.3; }
  h3 { font-size: var(--fs-h3); line-height: 1.35; }
  :root { --container-max: 960px; --content-max: 860px; }

  /* Blog grid: from 2 to 2/1 columns as needed */
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* Respect inline max-widths but center containers */
  #home-summary { max-width: var(--container-max) !important; margin-left: auto !important; margin-right: auto !important; }
}

/* Tablets portrait */
@media (max-width: 900px) {
  :root { --container-max: 820px; --content-max: 760px; }

  /* Collapse blog layout into single column when space is tight */
  .blog-container { display: block; }
  .blog-posts, .blog-sidebar { width: 100%; }
  .blog-sidebar { margin-top: var(--gutter); }

  /* Center post media on tablets */
  .post-content figure { margin-left: auto; margin-right: auto; text-align: center; }
  .post-content picture, .post-content img { display: block; margin-left: auto; margin-right: auto; float: none; }
  .post-content figcaption { text-align: center; color: var(--text-secondary); margin-top: .35rem; }
}

/* Large phones / small tablets */
@media (max-width: 768px) {
  :root { --container-max: 680px; --content-max: 640px; }

  /* Stack blog posts as a single column */
  .post-grid { grid-template-columns: 1fr !important; }

  /* Tighten paddings */
  .card { padding: 0.9rem !important; }
  #home-summary .card { padding: 1rem !important; }

  /* Further prevent horizontal scroll on tablets */
  .post-content { max-width: min(96vw, var(--content-max)); margin-left: auto; margin-right: auto; }
  .post-content img, .post-content iframe, .post-content video { max-width: 100%; height: auto; display: block; margin-left: auto; margin-right: auto; float: none; }
  .post-content figcaption { text-align: center; color: var(--text-secondary); margin-top: .35rem; }
}

/* Phones */
@media (max-width: 600px) {
  :root {
    --gutter: clamp(10px, 3.5vw, 18px);
    --fs-body: clamp(0.95rem, 0.4rem + 1.4vw, 1.05rem);
    --container-max: 100vw; /* ensure containers fit viewport */
    --content-max: 94vw;    /* keep readable margins on phones */
  }

  /* Prevent overflow of long titles and chips */
  .chip, .post-title a { word-break: break-word; }
  .project-title { font-size: clamp(1.1rem, 3.5vw, 1.4rem); }

  /* Hero adjustments */
  .section__text { text-align: left; }
  .section__text__p2 { line-height: 1.7; }

  /* Ensure about and blog content never overflow */
  .about-wide .post-content,
  .post-content { max-width: var(--content-max); margin-left: auto; margin-right: auto; overflow-wrap: anywhere; }

  /* Responsive media inside posts */
  .post-content figure { margin: .5rem auto; text-align: center; }
  .post-content img, .post-content video, .post-content iframe { max-width: 100%; height: auto; display: block; margin: 0.5rem auto; float: none; }
  .post-content figcaption { text-align: center; color: var(--text-secondary); margin-top: .35rem; }
  .post-content table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; }
  .post-content pre { max-width: 100%; overflow-x: auto; }
}

/* Very small phones */
@media (max-width: 400px) {
  :root { --gutter: 10px; }
  .btn { padding: 0.55rem 0.9rem; }
}
/* Media Queries for Responsive Design */

/* Large Desktop */
@media screen and (min-width: 1400px) {
    .section-container {
        max-width: 1400px;
    }
    
    .experience-details-container {
        max-width: 1400px;
    }
    
    .title {
        font-size: 3.5rem;
    }
    
    .section__text__p2 {
        font-size: 2rem;
    }
}

/* Desktop */
@media screen and (max-width: 1200px) {
    /* Keep desktop navigation visible; disable hamburger */
    #desktop-nav { display: flex; }
    #hamburger-nav { display: none; }
    
    #profile {
        flex-direction: column;
        gap: 3rem;
        height: auto;
        padding: 2rem 0;
    }
    
    .section__pic-container {
        width: 300px;
        height: 300px;
        margin: 0 auto;
        border-radius: 50%; /* ensure perfect circle on tablet */
    }
    
    .section-container {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }
    
    .about-containers {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .article-container {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .article-container article {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }
    
    .arrow {
        display: none;
    }
    
    .contact-info-upper-container {
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem;
    }
}

/* Tablet */
@media screen and (max-width: 900px) {
    .title {
        font-size: 2.5rem;
    }
    .hero-title { font-size: 2.2rem; }
    .hero-sub { font-size: 1.25rem; }
    
    .section__text__p2 {
        font-size: 1.5rem;
    }
    
    .section__text__p1 {
        font-size: 1.3rem;
    }
    
    .nav-links {
        font-size: 1.3rem;
        gap: 1.5rem;
    }
    
    .logo {
        font-size: 1.8rem;
    }
    
    .btn-container {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    
    .btn {
        width: 10rem;
    }
    
    .details-container {
        padding: 1rem;
    }
    
    .details-container h3 {
        font-size: 1.3rem;
    }
    
    .details-container p {
        font-size: 1rem;
    }
    
    .about-pic {
        width: 250px;
        height: 250px;
    }
    
    .text-container {
        font-size: 1rem;
        padding: 0 1rem;
    }
    
    .experience-sub-title {
        font-size: 1.5rem;
    }
    
    .article-container article h3 {
        font-size: 1.1rem;
    }
    
    .article-container article p {
        font-size: 0.9rem;
    }
    
    .project-title {
        font-size: 1.3rem;
    }
    
    .project-details-container article h3 {
        font-size: 1.2rem;
    }
    
    .project-details-container article p {
        font-size: 0.95rem;
    }
}

/* Mobile Large */
@media screen and (max-width: 600px) {
    /* Keep nav visible on small screens; use desktop nav and smaller height */
    #desktop-nav { transform: none !important; }
    #hamburger-nav { display: none; }
    nav {
        height: 56px;
        padding: 0 1rem;
    }
    
    #profile { height: auto; margin-top: 56px; padding: 2rem 1rem; }
    
    .section__pic-container {
        width: 200px;
        height: 200px;
        border-radius: 50%; /* ensure perfect circle on mobile */
    }
    
    .title { font-size: 2rem; }
    .hero-title { font-size: 1.9rem; }
    /* Keep mobile hero subtext slightly smaller, centered, and narrower for readability */
    .hero-sub { font-size: 1.1rem; text-align: center; max-width: 92vw; }
    
    .section__text__p2 {
        font-size: 1.3rem;
    }
    
    .section__text__p1 {
        font-size: 1.2rem;
    }
    
    .logo {
        font-size: 1.5rem;
    }
    
    .hamburger-icon {
        width: 25px;
        height: 20px;
    }
    
    .menu-links {
        right: -10px;
    }
    
    .menu-links a {
        font-size: 1.3rem;
        padding: 8px;
    }
    
    .btn {
        width: 8rem;
        padding: 0.8rem;
        font-size: 0.9rem;
    }
    
    #about,
    #experience,
    #projects,
    #contact {
        padding: 3rem 1rem;
    }
    
    .about-containers {
        flex-direction: column;
        gap: 1rem;
    }
    
    .details-container {
        padding: 1rem;
        margin: 0.5rem 0;
    }
    
    .details-container h3 {
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
    }
    
    .details-container p {
        font-size: 0.9rem;
    }
    
    .about-pic {
        width: 200px;
        height: 200px;
    }
    
    .text-container {
        font-size: 0.95rem;
        padding: 0;
        text-align: left;
    }
    
    .experience-sub-title {
        font-size: 1.3rem;
        margin-bottom: 1rem;
    }
    
    .article-container {
        gap: 1rem;
    }
    
    .article-container article {
        padding: 1rem;
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
    
    .article-container article h3 {
        font-size: 1rem;
        margin-bottom: 0.3rem;
    }
    
    .article-container article p {
        font-size: 0.85rem;
        line-height: 1.3;
    }
    
    .project-title {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }
    
    .project-details-container {
        padding: 1rem;
    }
    
    .project-details-container article {
        padding: 1rem;
    }
    
    .project-details-container article h3 {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }
    
    .project-details-container article p {
        font-size: 0.9rem;
        margin-bottom: 0.8rem;
    }
    
    .project-details-container article a {
        font-size: 0.9rem;
    }
    
    #contact {
        height: auto;
        padding: 3rem 1rem;
    }
    
    .contact-info-upper-container {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
        margin: 1rem auto;
    }
    
    .contact-info-container {
        margin: 0.5rem 0;
        gap: 0.3rem;
    }
    
    .contact-info-container p {
        font-size: 1rem;
    }
    
    .contact-icon {
        height: 1.5rem;
    }
    
    .email-icon {
        height: 2rem;
    }
    
    footer {
        height: auto;
        padding: 2rem 1rem;
        gap: 1rem;
    }
    
    footer nav {
        height: auto;
    }
    
    footer p {
        font-size: 0.9rem;
    }
    
    .theme-toggle {
        width: 40px;
        height: 40px;
        top: 15px;
        right: 15px;
    }
    
    .theme-toggle img {
        width: 20px;
        height: 20px;
    }
    /* About page mobile refinements */
    /* Tighten About header spacing */
    .about-wide .post-content header { margin-bottom: 0.5rem !important; }
    .about-wide .post-content h1.title { margin-bottom: 0.5rem !important; }
    .about-wide .post-content p { font-size: 0.98rem; line-height: 1.7; }
    .about-wide .post-content .btn-container { margin-top: 0.75rem; }

    /* Single column for certifications and social grids */
    #certifications .card,
    #social-networks .card { display: grid; grid-template-columns: 1fr !important; gap: 0.75rem !important; }
    #certifications .interactive-row,
    #social-networks .interactive-row { padding: 0.6rem !important; }

    /* Reduce nested list indent for work experience */
    #my-journey ul ul { margin: 0.4rem 0 0 1.2rem !important; padding-left: 1rem !important; }
    #my-journey .chip { padding: 6px 10px; font-size: 0.82rem; }

    /* Breadcrumb spacing on About */
    .breadcrumb-wrapper { margin-top: calc(var(--nav-height) + 4px) !important; }
}

/* Mobile Small */
@media screen and (max-width: 400px) {
    .title {
        font-size: 1.8rem;
    }
    .hero-title { font-size: 1.7rem; }
    .hero-sub { font-size: 1.1rem; }
    
    .section__text__p2 {
        font-size: 1.2rem;
    }
    
    .section__text__p1 {
        font-size: 1.1rem;
    }
    
    .logo {
        font-size: 1.3rem;
    }
    
    .section__pic-container {
        width: 200px;
        height: 200px;
        border-radius: 50%;
    }
    
    .about-pic {
        width: 180px;
        height: 180px;
    }
    
    .btn {
        width: 7rem;
        padding: 0.7rem;
        font-size: 0.85rem;
    }
    
    .details-container {
        padding: 0.8rem;
    }
    
    .details-container h3 {
        font-size: 1.1rem;
    }
    
    .details-container p {
        font-size: 0.85rem;
    }
    
    .text-container {
        font-size: 0.9rem;
    }
    
    .experience-sub-title {
        font-size: 1.2rem;
    }
    
    .article-container article h3 {
        font-size: 0.95rem;
    }
    
    .article-container article p {
        font-size: 0.8rem;
    }
    
    .project-title {
        font-size: 1.1rem;
    }
    
    .project-details-container article h3 {
        font-size: 1rem;
    }
    
    .project-details-container article p {
        font-size: 0.85rem;
    }
    
    .project-details-container article a {
        font-size: 0.85rem;
    }
    
    .contact-info-container p {
        font-size: 0.9rem;
    }
    
    .contact-icon {
        height: 1.3rem;
    }
    
    .email-icon {
        height: 1.8rem;
    }
}

/* Landscape Orientation */
@media screen and (max-height: 500px) and (orientation: landscape) {
    nav {
        height: 12vh;
    }
    
    #profile {
        height: auto;
        margin-top: 12vh;
        padding: 1rem 0;
        flex-direction: row;
        gap: 2rem;
    }
    
    .section__pic-container {
        width: 200px;
        height: 200px;
        border-radius: 50%;
    }
    
    .title {
        font-size: 2rem;
    }
    
    .section__text__p2 {
        font-size: 1.2rem;
    }
    
    #about,
    #experience,
    #projects,
    #contact {
        padding: 2rem 1rem;
    }
    
    .about-containers {
        flex-direction: row;
        gap: 1rem;
    }
    
    .details-container {
        padding: 0.8rem;
    }
    
    .details-container h3 {
        font-size: 1rem;
        margin-bottom: 0.3rem;
    }
    
    .details-container p {
        font-size: 0.8rem;
    }
    
    .about-pic {
        width: 150px;
        height: 150px;
    }
    
    .text-container {
        font-size: 0.9rem;
    }
    
    .article-container {
        flex-direction: row;
        gap: 1rem;
    }
    
    .article-container article {
        padding: 0.8rem;
        width: auto;
        flex: 1;
    }
    
    .article-container article h3 {
        font-size: 0.9rem;
    }
    
    .article-container article p {
        font-size: 0.75rem;
    }
    
    #contact {
        height: auto;
        padding: 2rem 1rem;
    }
    
    .contact-info-upper-container {
        flex-direction: row;
        gap: 1rem;
        padding: 1rem;
    }
    
    footer {
        height: auto;
        padding: 1rem;
    }
}

/* High DPI Displays */
@media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .section__pic-container img,
    .about-pic {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Blog-specific responsive styles */
@media screen and (max-width: 1200px) {
    .post-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .post-toc {
        position: relative;
        top: 0;
        order: -1;
    }
    
    .blog-container {
        display: block;
    }
    
    .blog-sidebar {
        margin-top: 2rem;
        width: 100%;
    }
}

/* Tablet optimizations */
@media screen and (max-width: 900px) {
    /* Blog post grid adjustments */
    .post-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
    
    .blog-post {
        padding: 0.8rem !important;
    }
    
    .post-title a {
        font-size: 1.05rem;
        line-height: 1.4;
    }
    
    .post-excerpt {
        font-size: 0.95rem;
        line-height: 1.5;
    }
    
    .post-meta {
        flex-wrap: wrap;
        gap: 6px !important;
    }
    
    .post-meta .chip {
        padding: 4px 8px;
        font-size: 0.8rem;
    }
    
    .post-tags {
        flex-wrap: wrap;
        gap: 4px;
    }
    
    .post-tags .tag {
        padding: 3px 6px;
        font-size: 0.75rem;
    }
    
    /* Blog content adjustments */
    .post-content {
        padding: 1rem;
        font-size: 1rem;
        line-height: 1.7;
    }
    
    .post-content h1,
    .post-content h2,
    .post-content h3 {
        font-size: 1.3rem;
        margin-top: 1.5rem;
        margin-bottom: 0.8rem;
    }
    
    .post-content p {
        margin-bottom: 1rem;
    }
    
    .post-content ul,
    .post-content ol {
        padding-left: 1.5rem;
    }
    
    .post-content blockquote {
        padding: 0.8rem 1rem;
        margin: 1rem 0;
    }
    
    .post-content pre {
        padding: 0.8rem;
        font-size: 0.9rem;
    }
    
    /* Category descriptions */
    .category-description {
        font-size: 0.95rem;
        line-height: 1.6;
    }
    
    .category-title {
        font-size: 1.4rem;
    }
}

/* Mobile Large (Android, iPhone Plus) */
@media screen and (max-width: 600px) {
    /* Blog layout adjustments */
    .blog-container {
        padding: 0 1rem;
    }
    
    .blog-category {
        padding: 0.8rem !important;
        margin-bottom: 1.5rem;
    }
    
    .category-title {
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
    }
    
    .category-description {
        font-size: 0.9rem;
        line-height: 1.5;
        margin-bottom: 0.5rem;
    }
    
    /* Blog post cards */
    .blog-post {
        padding: 0.7rem !important;
        margin-bottom: 1rem;
    }
    
    .post-title a {
        font-size: 1rem;
        line-height: 1.3;
        display: block;
    }
    
    .post-excerpt {
        font-size: 0.9rem;
        line-height: 1.4;
        display: -webkit-box;
        line-clamp: 3;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .post-meta {
        gap: 4px !important;
        margin-bottom: 0.4rem !important;
    }
    
    .post-meta .chip {
        padding: 3px 6px;
        font-size: 0.75rem;
    }
    
    .post-tags {
        gap: 3px;
    }
    
    .post-tags .tag {
        padding: 2px 5px;
        font-size: 0.7rem;
    }
    
    /* Blog content mobile optimizations */
    .post-content {
        padding: 0.8rem;
        font-size: 0.95rem;
        line-height: 1.6;
    }
    
    .post-content h1,
    .post-content h2,
    .post-content h3 {
        font-size: 1.2rem;
        margin-top: 1.2rem;
        margin-bottom: 0.6rem;
    }
    
    .post-content p {
        margin-bottom: 0.8rem;
    }
    
    .post-content ul,
    .post-content ol {
        padding-left: 1.2rem;
        margin-bottom: 0.8rem;
    }
    
    .post-content li {
        margin-bottom: 0.3rem;
    }
    
    .post-content blockquote {
        padding: 0.6rem 0.8rem;
        margin: 0.8rem 0;
        font-size: 0.9rem;
    }
    
    .post-content pre {
        padding: 0.6rem;
        font-size: 0.8rem;
        overflow-x: auto;
    }
    
    .post-content code {
        font-size: 0.8rem;
        padding: 0.1rem 0.3rem;
    }
    
    /* Sidebar adjustments */
    .blog-sidebar {
        margin-top: 1.5rem;
    }
    
    .tag-cloud {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    
    .tag-cloud .tag {
        padding: 4px 8px;
        font-size: 0.8rem;
    }
}

/* Mobile Small (iPhone SE, small Android) */
@media screen and (max-width: 400px) {
    .blog-container {
        padding: 0 0.8rem;
    }
    
    .blog-category {
        padding: 0.6rem !important;
    }
    
    .category-title {
        font-size: 1.1rem;
    }
    
    .category-description {
        font-size: 0.85rem;
    }
    
    .blog-post {
        padding: 0.6rem !important;
    }
    
    .post-title a {
        font-size: 0.95rem;
    }
    
    .post-excerpt {
        font-size: 0.85rem;
        line-clamp: 2;
        -webkit-line-clamp: 2;
    }
    
    .post-meta .chip {
        padding: 2px 5px;
        font-size: 0.7rem;
    }
    
    .post-tags .tag {
        padding: 2px 4px;
        font-size: 0.65rem;
    }
    
    .post-content {
        padding: 0.6rem;
        font-size: 0.9rem;
    }
    
    .post-content h1,
    .post-content h2,
    .post-content h3 {
        font-size: 1.1rem;
    }
    
    .post-content pre {
        font-size: 0.75rem;
        padding: 0.5rem;
    }
    
    .tag-cloud .tag {
        padding: 3px 6px;
        font-size: 0.75rem;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .blog-post {
        transition: transform 0.2s ease;
    }
    
    .blog-post:active {
        transform: scale(0.98);
    }
    
    .interactive-row:active {
        transform: scale(0.99);
    }
    
    /* Larger touch targets */
    .post-title a,
    .chip,
    .tag {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    /* Better scrolling */
    .post-content {
        -webkit-overflow-scrolling: touch;
    }
    
    .post-content pre {
        -webkit-overflow-scrolling: touch;
    }
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    .post-content {
        -webkit-text-size-adjust: 100%;
    }
    
    .blog-post {
        -webkit-tap-highlight-color: transparent;
    }
    
    .post-content pre {
        -webkit-overflow-scrolling: touch;
    }
}

/* Android Chrome specific optimizations */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .post-content {
        text-rendering: optimizeLegibility;
    }
    
    .blog-post {
        will-change: transform;
    }
}

/* Print Styles */
@media print {
    nav,
    .btn-container,
    .arrow,
    .theme-toggle,
    footer {
        display: none;
    }
    
    body {
        background: var(--bg-primary);
        color: var(--text-primary);
    }
    
    .section__pic-container,
    .about-pic {
        border: 2px solid var(--border-color);
    }
    
    .details-container,
    .article-container article,
    .project-details-container {
        border: 1px solid var(--border-color);
        box-shadow: none;
    }
    
    .title {
        color: var(--text-primary);
    }
    
    .section__text__p1,
    .section__text__p2 {
        color: var(--text-secondary);
    }
    
    /* Print blog optimizations */
    .post-content {
        font-size: 12pt;
        line-height: 1.5;
    }
    
    .post-content h1,
    .post-content h2,
    .post-content h3 {
        page-break-after: avoid;
    }
    
    .post-content p {
        orphans: 3;
        widows: 3;
    }
    
    .blog-post {
        page-break-inside: avoid;
    }
}