/* ============================================
   FazilatPro — Responsive Layout (Phase 4)
   File: style.responsive.css
   ============================================ */

/* --------------------------------------------
   1) MOBILE HEADER (<= 480px)
   Logo left + 3-column nav grid, no sideways scroll
   -------------------------------------------- */
@media (max-width: 480px){
  /* HEADER WRAPPER */
  .fp .site-header{
    padding: 10px 14px;
    box-sizing: border-box;
    max-width: 100%;
  }

  .fp .site-header .nav-shell{
    display: flex;
    flex-direction: row;          /* logo + nav in one row */
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    max-width: 100%;
    box-sizing: border-box;
  }

  .fp .site-header .logo{
    flex: 0 0 auto;
  }

  .fp .site-header .logo img{
    width: 70px;                  /* adjust if you want bigger/smaller */
    height: auto;
    max-width: 100%;
  }

  /* NAV: 3 items first row, 2 second row, but never overflow */
  .fp .site-header .main-nav{
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row;
    justify-content: stretch;
    column-gap: 5px;
    row-gap: 2px;
    font-size: 0.8rem;
    margin-top: 4px;
    max-width: 100%;
    box-sizing: border-box;
  }

   .fp .site-header .main-nav a{
    display: block;               /* override desktop inline-block */
    justify-self: stretch;
    text-align: center;
    white-space: normal;
    width: 100%;
    padding: 8px 10px;            /* small, even pill padding */
    box-sizing: border-box;
  }

}


/* --------------------------------------------
   2) GLOBAL: NO SIDEWAYS SCROLL, CLAMP CONTAINERS
   (<= 1024px)
   -------------------------------------------- */

/* base safety */
.fp{
  overflow-x: hidden;
}

/* hard lock on small screens */
@media (max-width: 1024px){
  html,
  body,
  .fp{
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }
}

/* clamp containers so nothing is wider than screen */
@media (max-width: 1024px){
  .fp .container{
    width: 100%;
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }
}


/* --------------------------------------------
   3) TABLET HEADER TUNING (641px – 1024px)
   Slightly more breathing room + logo size
   -------------------------------------------- */
@media (min-width: 641px) and (max-width: 1024px){
  .fp .site-header{
    padding: 14px 24px;
  }

  .fp .site-header .logo img{
    width: 75px;          /* tablet logo size */
    height: auto;
  }
}


/* --------------------------------------------
   4) FOOTER – TABLET & MOBILE (<= 1024px)
   Centered copy + links, stacked layout
   -------------------------------------------- */
@media (max-width: 1024px){
  .fp footer{
    margin-top: 8px;
    padding: 0 16px;
    text-align: center !important;
  }

  /* main footer row */
  .fp footer .container,
  .fp footer .footer-inner{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
  }

  /* copy line */
  .fp footer p,
  .fp footer .footer-copy{
    margin: 0;
    text-align: center !important;
    width: 100%;
  }

  /* links row */
  .fp footer .footer-links,
  .fp footer .container > div:last-child{
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center !important;
    align-items: center;
    gap: 4px;
    padding-left: 0 !important;
    width: 100%;
    text-align: center !important;
  }

  .fp footer a{
    display: inline-block;
    margin: 2px 3px;
  }

  /* hide any separator dots on small screens */
  .fp footer span[aria-hidden]{
    display: none;
  }
}




/* --------------------------------------------
   6) HOME HERO IMAGE – FULL FRAME (<= 1024px)
   Stop cropping, but only for the HOME hero
   -------------------------------------------- */
@media (max-width: 1024px){
  /* image column can grow naturally */
  .fp #home.hero .grid > div:last-child{
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

    /* full building visible, no cropping, kill 4:3 box */
  .fp #home.hero img.hero-img{
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;

    /* 🔑 remove desktop 4:3 aspect box */
    aspect-ratio: auto !important;

    object-fit: contain !important;
    margin: 0 auto;
  }

}

/* WHY PAGE — match HOME behaviour on tablet/mobile
   - Text first, image second
   - No image cropping (full picture visible)
*/
@media (max-width: 1024px){
  /* stack like Home: text -> image */
  .fp.why-page .hero .grid.grid-2{
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  /* text block stays on top */
  .fp.why-page .hero .hero-copy{
    order: 1;
    width: 100%;
  }

  /* image card below, full width */
  .fp.why-page .hero .hero-card{
    order: 2;
    width: 100%;
    margin: 0 auto;
    max-width: 780px;
    aspect-ratio: auto;   /* remove 16:10 lock on small screens */
    max-height: none;
  }

  /* full image, no crop */
  .fp.why-page .hero .hero-card .hero-img{
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;  /* show entire image */
  }
}

/* ABOUT PAGE — match HOME & WHY on tablet/mobile
   - Text first, image second
   - Full image visible, no cropping
*/
@media (max-width: 1024px){

  /* Stack the hero like Home/Why: text -> image */
  .fp.about-page .hero .grid.grid-2{
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  /* text block stays on top */
  .fp.about-page .hero .hero-copy{
    order: 1;
    width: 100%;
  }

    /* hero image: full width, no crop, kill 4:3 box */
  .fp.about-page .hero .hero-img{
    display: block;
    order: 2;                          /* image below text */
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;

    /* 🔑 this removes the forced 4:3 box from desktop CSS */
    aspect-ratio: auto !important;

    object-fit: contain !important;    /* show full picture */
    margin: 0 auto;
  }
  
    .fp.about-page .hero .hero-copy{
    order: 1;
    width: 100%;
  }


}

/* SERVICES PAGE — keep image on top, text below (original layout) */
@media (max-width: 1024px){

  .fp.services-page .svc-hero .grid.grid-2{
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  /* image stays FIRST → order = 1 */
  .fp.services-page .svc-hero .svc-media{
    order: 1;
    width: 100%;
    margin: 0 auto;
  }

  /* text stays SECOND → order = 2 */
  .fp.services-page .svc-hero .hero-copy{
    order: 2;
    width: 100%;
  }

  /* image should NOT stretch or break */
  .fp.services-page .svc-hero .svc-img{
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    aspect-ratio: auto !important;
    max-width: 100%;
    max-height: none !important;
    transform: none !important;
  }
}


/* MOBILE — fix active nav pill so background fully wraps the text */
@media (max-width: 480px){
  /* HEADER WRAPPER */
  .fp .site-header{
    padding: 10px 14px;
    box-sizing: border-box;
    max-width: 100%;
  }

  .fp .site-header .nav-shell{
    display: flex;
    flex-direction: row;          /* logo + nav in one row */
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    max-width: 100%;
    box-sizing: border-box;
  }

  .fp .site-header .logo{
    flex: 0 0 auto;
  }

  .fp .site-header .logo img{
    width: 70px;
    height: auto;
    max-width: 100%;
  }

  /* NAV GRID — 3 items first row, 2 second row, even spacing */
  .fp .site-header .main-nav{
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row;
    justify-content: stretch;
    justify-items: center;        /* center each cell */
    column-gap: 5px;
    row-gap: 2px;
    font-size: 0.8rem;
    margin-top: 4px;
    max-width: 100%;
    box-sizing: border-box;
  }

  .fp .site-header .main-nav a{
    display: block;
    justify-self: center;
    text-align: center;
    white-space: normal;
    width: auto;
    padding: 8px 10px;
    margin: 0;                    /* ❗ no extra margin = no weird gap */
    box-sizing: border-box;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;   /* kill blue tap block */
  }

      /* ACTIVE link = tighter pill on mobile */
  .fp .site-header .main-nav a.active{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* tighter pill so it hugs the text more */
    padding: 4px 12px;        /* was 6px 14px */
    border-radius: 999px;

    background: #f7eed9;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);

    line-height: 1.1;
    transform: none;
  }

  .fp .site-header .main-nav a:focus,
  .fp .site-header .main-nav a:active{
    outline: none;
    box-shadow: none;
    background: none;
  }

  .fp .site-header .main-nav a.active:focus,
  .fp .site-header .main-nav a.active:active{
    background: #f7eed9;
    box-shadow: 0 8px 18px rgba(0,0,0,0.10);
  }

}


/* CONTACT PAGE — match other heroes on tablet/mobile
   - Text first, image second
   - No inner white padding / gutters
*/
@media (max-width: 1024px){

  /* Stack like other pages: text -> image */
  .fp.contact-page .contact-hero .grid.grid-2{
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  /* first child = text block */
  .fp.contact-page .contact-hero .grid.grid-2 > div:first-child{
    order: 1;
    width: 100%;
  }

  /* hero-card = image wrapper, below text */
  .fp.contact-page .contact-hero .grid.grid-2 > .hero-card{
    order: 2;
    width: 100%;
    margin: 0 auto;

    /* 🔑 remove desktop box sizing that causes gutters */
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;

    border-radius: 28px;
    overflow: hidden;   /* keep rounded corners, clip image */
  }

  /* hero image: full width, no crop, no frame */
  .fp.contact-page .contact-hero .hero-card .hero-img,
  .fp.contact-page .contact-hero .hero-card img{
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    border-radius: 0;   /* card handles the rounding */
    margin: 0;
  }
}