/* =====================================================
   RESPONSIVE.CSS
   Breakpoints: Desktop(>1240) Laptop(1024-1240) Tablet(768-1024)
   Mobile(481-768) Large Mobile(<480)
   ===================================================== */

/* ---------- Laptop ---------- */
@media (max-width: 1240px) {
  :root { --section-padding: 100px; }
  .container { padding: 0 26px; }
  .hero-terminal { left: -20px; width: 260px; }
  .footer-grid { grid-template-columns: 1.2fr 0.8fr 0.8fr 1fr; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  :root { --section-padding: 84px; }

  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(320px, 80vw);
    height: 100vh;
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    padding: 110px 30px;
    box-shadow: -10px 0 40px rgba(15,23,42,0.12);
    transition: right 0.4s cubic-bezier(.2,.8,.2,1);
    z-index: 1050;
  }
  .nav-links.mobile-open { right: 0; }
  .nav-links a { width: 100%; padding: 14px 16px; }
  .hamburger { display: flex; }

  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; max-width: 420px; margin: 0 auto 50px; }
  .hero-content { text-align: left; }
  .hero-stats { grid-template-columns: repeat(4, 1fr); }

  .about-grid { grid-template-columns: 1fr; }
  .about-photo-wrap { max-width: 420px; margin: 0 auto 60px; }

  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .courses-grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .cert-grid { grid-template-columns: repeat(2, 1fr); }
  .skills-grid-cols { grid-template-columns: 1fr; }
  .counters-grid { grid-template-columns: repeat(3, 1fr); gap: 34px; }

  .timeline::before { left: 20px; }
  .timeline-item { grid-template-columns: 40px 1fr; }
  .timeline-item .tl-card { grid-column: 2 !important; text-align: left !important; }
  .timeline-item .tl-year, .timeline-item .tl-company { text-align: left !important; }
  .timeline-dot { grid-column: 1; }

  .contact-grid { grid-template-columns: 1fr; }
  .gallery-masonry { column-count: 2; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .site-header { padding: 14px 0; }
  .hero { padding-top: 120px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-badge { top: -16px; right: -10px; padding: 10px 14px; }
  .hero-terminal { position: static; width: 100%; margin-top: 20px; }

  .services-grid, .courses-grid, .portfolio-grid, .cert-grid { grid-template-columns: 1fr; }
  .mission-vision { grid-template-columns: 1fr; }
  .counters-grid { grid-template-columns: repeat(2, 1fr); }

  .form-row { grid-template-columns: 1fr; }
  .contact-info-card, .contact-form-card { padding: 30px 24px; }

  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }

  .cta-banner { padding: 44px 26px; margin: 0 20px; }
  .gallery-masonry { column-count: 1; }
}

/* ---------- Large Mobile ---------- */
@media (max-width: 480px) {
  .container { padding: 0 18px; }
  :root { --section-padding: 64px; }

  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .section-head { margin-bottom: 44px; }
  .logo span.logo-text { display: inline; }

  .about-exp-card { position: static; margin-top: 20px; display: inline-block; }
  .cta-banner h2 { font-size: 1.5rem; }
  .testimonial-card { padding: 28px 20px; }
  .counters-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .counter-item .counter-num { font-size: 2rem; }
}

/* Prevent horizontal scroll globally */
html, body { max-width: 100%; overflow-x: hidden; }


/* MERGED FROM SECONDARY */
/* ====================================================================
   RESPONSIVE.CSS — Mobile & Tablet Adjustments
   ====================================================================
   This file makes the website look good on smaller screens
   (tablets and phones). It does NOT contain any new colors or
   fonts — it just re-arranges spacing, sizes, and layout for
   smaller screen widths.

   HOW THIS WORKS:
   A "media query" like this:
       @media (max-width: 992px) { ... }
   means: "only apply these styles when the screen is 992 pixels
   wide or smaller." So each block below only affects certain
   screen sizes.

   This file must be linked AFTER style.css in your HTML <head>,
   so its rules can override the desktop rules when needed.
   (Both gallery.html and album pages already do this correctly.)

   >>> EDIT HERE labels below tell you what each block controls.
   ==================================================================== */


/* ====================================================================
   TABLET SCREENS (992px and smaller)
   >>> EDIT HERE: Adjust the album grid from 3 columns to 2 columns,
   and slightly reduce hero text size.
   ==================================================================== */
@media (max-width: 992px) {

    .albums-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 album cards per row instead of 3 */
        gap: 30px;
    }

    .gallery-hero h1 {
        font-size: 34px;
    }

    .navbar {
        padding: 16px 24px;
    }

    /* Album page: 3 photos per row instead of 4 */
    .photo-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* ====================================================================
   MOBILE SCREENS (700px and smaller)
   >>> EDIT HERE: This is where the hamburger menu turns on, the
   album grid becomes a single column, and spacing shrinks so
   everything fits comfortably on a phone screen.
   ==================================================================== */
@media (max-width: 700px) {

    /* ---- Navigation: switch to hamburger menu ---- */

    /* Hide the normal horizontal menu by default on mobile */
    .nav-links {
        display: none;                 /* hidden until the hamburger button is clicked */
        flex-direction: column;        /* stack links vertically */
        position: absolute;
        top: 100%;                     /* appears right below the navbar */
        left: 0;
        width: 100%;
        background-color: var(--color-white);
        box-shadow: 0 12px 20px rgba(10, 37, 64, 0.08);
        padding: 10px 24px 20px;
        gap: 0;
    }

    /* When JavaScript adds the "show" class (after clicking the button),
       the menu becomes visible */
    .nav-links.show {
        display: flex;
    }

    .nav-links li {
        border-bottom: 1px solid var(--color-border);
    }

    .nav-links li:last-child {
        border-bottom: none;
    }

    .nav-links a {
        display: block;
        padding: 14px 4px;
    }

    /* Show the hamburger icon button on mobile */
    .menu-toggle {
        display: block;
    }

    /* ---- Hero section spacing ---- */
    .gallery-hero {
        padding: 60px 20px 40px;
    }

    .gallery-hero h1 {
        font-size: 27px;
    }

    .hero-subtext {
        font-size: 15px;
    }

    /* ---- Album grid: single column on phones ---- */
    .albums-section {
        padding: 20px 20px 70px;
    }

    .albums-grid {
        grid-template-columns: 1fr;   /* one album card per row */
        gap: 26px;
    }

    .album-info {
        padding: 18px 18px 22px;
    }

    /* ---- Album page: photo grid becomes 2 columns on phones ---- */
    .photo-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .photo-grid-section {
        padding: 20px 20px 70px;
    }

    .album-page-header h1 {
        font-size: 24px;
    }

    /* ---- Lightbox: smaller, closer arrow buttons on phones ---- */
    .lightbox-prev,
    .lightbox-next {
        width: 42px;
        height: 42px;
        font-size: 20px;
    }

    .lightbox-prev {
        left: 8px;
    }

    .lightbox-next {
        right: 8px;
    }

    .lightbox-close {
        top: 14px;
        right: 18px;
        font-size: 26px;
    }

    .lightbox-image {
        max-width: 94%;
        max-height: 78vh;
    }
}


/* ====================================================================
   VERY SMALL PHONES (400px and smaller)
   >>> EDIT HERE: Minor tweaks for the smallest screens, like
   older or smaller phones.
   ==================================================================== */
@media (max-width: 400px) {

    .logo {
        font-size: 19px;
    }

    .gallery-hero h1 {
        font-size: 24px;
    }

    .view-album-btn {
        width: 100%;
        justify-content: center;
    }
}