/* ===========================================================
   TazamonTech – Responsive Enhancements (tablet/desktop only)
   Mobile-first: this file adds layout/typography upgrades
   without changing mobile behavior.
   -----------------------------------------------------------
   Breakpoints:
   - 768px:   tablets / small landscape
   - 1024px:  laptops
   - 1280px+: large desktops
   - 1440px+: wide screens / iMacs
   =========================================================== */


/* ========== ≥768px (tablet) ========== */
@media (min-width: 768px) {

  /* Global rhythm & readable line lengths */
  .section { padding: 56px 40px 0; }
  .spacer { height: 84px; }

  /* Type scale bumps */
  .section-title      { font-size: 1.75rem; letter-spacing: .02em; }
  .section-sub-title  { font-size: 1.15rem; }
  .hero-catch-text    { font-size: 1rem; }

  /* --- Hero: split into two columns (text ← | image →) --- */
  .section:first-of-type {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    column-gap: 40px;
    align-items: center;
  }
  .section:first-of-type .section-title,
  .section:first-of-type .section-sub-title,
  .section:first-of-type .hero-catch-text,
  .section:first-of-type .call-to-action,
  .section:first-of-type .scroll-button-area {
    grid-column: 1; /* text column */
  }
  .section:first-of-type .code-image {
    grid-column: 2;              /* image column */
    grid-row: 1 / span 4;        /* sit alongside the text stack */
    justify-self: end;
    width: 440px; max-width: 100%;
  }
  .section .call-to-action {
    max-width: 320px;
  }
  .scroll-button-area { text-align: left; margin-top: 40px; }

  /* --- Services: flow cards into 2 columns (no HTML changes) --- */
/* Tablet+ turn Services into a grid even if wrappers are nested */
@media (min-width: 1024px){
  /* Make the section a grid */
  #services-section{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
  /* Headings span full width */
  #services-section .section-title,
  #services-section .section-sub-title { grid-column: 1 / -1; }

  /* Flatten ALL our-services-container wrappers (even nested ones) */
  #services-section .our-services-container{ display: contents; }

  /* Cards behave as grid items */
  #services-section .service-card{
    height: 100%;
    break-inside: avoid; /* safety for any future multi-col layouts */
  }
}

/* Optional: give cards a consistent minimum height so the row aligns nicely */
@media (min-width: 1024px){
  #services-section .service-card{ min-height: 220px; }
}

  /* --- How we work: grid 2-up --- */
  .how-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .how-card { min-height: 120px; }

  /* --- Tech stacks & Our work: bigger cards, comfy gaps --- */
  .tech-stacks { gap: 20px; }
  .tech-stacks img { width: 300px; }

  .scroll-left { gap: 20px; }
  .our-work img { width: 300px; }

  /* --- Contact form: 2 columns; textarea + button full row --- */
  #contact-us-section .contact-form-container {
    max-width: 900px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
  }
  #contact-us-section .contact-form-container br { display: none; } /* remove mobile line breaks */
  #contact-us-section .contact-form-container .text-area { grid-column: 1 / -1; }
  #contact-us-section .contact-form-container .sendBtn {
    grid-column: 1 / -1;
    width: auto; justify-self: start; padding-inline: 24px;
  }

  /* --- Footer: roomier container --- */
  .footer-wrap { max-width: 1100px; padding: 48px 40px 56px; }
  .footer-logo { width: 200px; }
  .footer-tagline { font-size: 20px; }
  .footer-item span { font-size: 14px; }
}


/* ========== ≥1024px (laptop) ========== */
@media (min-width: 1024px) {

  /* Larger breathing room */
  .section { padding: 72px 64px 0; }
  .spacer  { height: 96px; }

  /* Type scale step */
  .section-title     { font-size: 2rem; }
  .section-sub-title { font-size: 1.2rem; }
  .hero-catch-text   { font-size: 1.05rem; }

  /* Hero image a bit larger */
  .section:first-of-type { grid-template-columns: 1.2fr 1fr; }
  .section:first-of-type .code-image { width: 520px; }

  /* Services: 3-up layout (still without HTML changes) */
  #services-section .our-services-container {
    width: calc(33.333% - 14px);  /* 3-up */
    margin-right: 21px;
  }
  #services-section .our-services-container:nth-child(3n) {
    margin-right: 0;
  }

  /* How we work: denser grid if space allows */
  .how-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Bigger showcase cards */
  .tech-stacks img { width: 320px; }
  .our-work img    { width: 320px; }

  /* Footer: make contacts more compact */
  .footer-wrap { max-width: 1200px; }
  .footer-item span { font-size: 15px; }
}


/* ========== ≥1280px (desktop) ========== */
@media (min-width: 1280px) {

  /* Wide container spacing */
  .section { padding: 88px 80px 0; }
  .spacer  { height: 110px; }

  /* Slight type bump */
  .section-title     { font-size: 2.2rem; }
  .section-sub-title { font-size: 1.25rem; }

  /* Hero: larger image, tighten grid gap */
  .section:first-of-type { column-gap: 56px; }
  .section:first-of-type .code-image { width: 600px; }

  /* Services: comfortable 3-up with bigger cards */
  #services-section .our-services-container { width: calc(33.333% - 18px); margin-right: 27px; }
  #services-section .our-services-container:nth-child(3n) { margin-right: 0; }
  .service-card { padding: 22px; }

  /* How we work: 4-up if you like symmetry on big screens */
  .how-items { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Galleries: scale up a touch */
  .tech-stacks img { width: 340px; }
  .our-work img    { width: 340px; }

  /* Footer: more balance */
  .footer-wrap { max-width: 1280px; }
}


/* ========== ≥1440px (wide) ========== */
@media (min-width: 1440px) {

  /* Lux spacing on ultra-wide */
  .section { padding: 96px 96px 0; }
  .spacer  { height: 120px; }

  .section-title     { font-size: 2.4rem; }
  .section-sub-title { font-size: 1.3rem; }

  .section:first-of-type .code-image { width: 660px; }

  /* Showcase bigger visuals without breaking scroll */
  .tech-stacks img { width: 360px; }
  .our-work img    { width: 360px; }

  .footer-wrap { max-width: 1360px; }
}



/* Equal-height tech stack cards on wider screens */
@media (min-width: 768px){
  :root { --stack-h: 360px; }               /* tablet default */
  #tech-stack-section .tech-stacks { align-items: center; }
  #tech-stack-section .tech-stacks img{
    height: var(--stack-h);
    width: auto !important;                 /* override inline width=229px */
    flex: 0 0 auto;
    object-fit: contain;                    /* keeps aspect, safe for SVGs */
    border-radius: 12px;
  }
}

@media (min-width: 1024px){
  :root { --stack-h: 400px; }               /* laptop */
}

@media (min-width: 1280px){
  :root { --stack-h: 440px; }               /* desktop */
}

@media (min-width: 1440px){
  :root { --stack-h: 480px; }               /* wide */
}


/* =========================
   Contact form – tablet+
   ========================= */
@media (min-width: 768px){
  #contact-us-section .contact-form-container{
    /* centered card */
    max-width: 980px;
    margin-inline: auto;

    /* grid layout */
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "desc   desc"
      "name   email"
      "phone  phone"
      "message message"
      "submit submit";
    gap: 16px 24px;

    padding: 24px;
    border-radius: 12px;
  }

  /* remove the mobile line breaks */
  #contact-us-section .contact-form-container > br{ display: none; }

  /* description line at top */
  #contact-us-section .contact-form-container > p{
    grid-area: desc;
    margin: 0 0 4px 0;
    color: #cfe6f5;
    font-size: 0.95rem;
  }

  /* place fields via nth-of-type (keeps your HTML intact) */
  #contact-us-section .contact-form-container .input:nth-of-type(1){ grid-area: name;  }
  #contact-us-section .contact-form-container .input:nth-of-type(2){ grid-area: email; }
  #contact-us-section .contact-form-container .input:nth-of-type(3){ grid-area: phone; }
  #contact-us-section .contact-form-container .text-area{ grid-area: message; }

  /* submit button aligned right */
  #contact-us-section .contact-form-container .sendBtn{
    grid-area: submit;
    width: auto;
    padding-inline: 28px;
    justify-self: end;
  }

  /* labels + controls rhythm */
  #contact-us-section .contact-form-container .input p,
  #contact-us-section .contact-form-container .text-area p{
    margin: 0 0 6px 0;
    color: #cfe6f5;
    font-weight: 600;
  }

  #contact-us-section .contact-form-container input,
  #contact-us-section .contact-form-container textarea{
    height: 44px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #00AFD6;
    background: #071036;
    color: #fff;
  }
  #contact-us-section .contact-form-container textarea{
    min-height: 160px; height: auto; resize: vertical;
  }

  /* focus states */
  #contact-us-section .contact-form-container input:focus,
  #contact-us-section .contact-form-container textarea:focus{
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,175,214,.25);
    border-color: #3dd2ee;
  }
}

/* laptop+ a bit roomier */
@media (min-width: 1024px){
  #contact-us-section .contact-form-container{
    gap: 18px 28px;
    padding: 28px;
  }
  #contact-us-section .contact-form-container textarea{ min-height: 200px; }
}

/* iOS: stop zooming on input focus */
@supports (-webkit-touch-callout: none) { /* targets iOS browsers */
  input, select, textarea, button {
    font-size: 16px !important;
  }
  /* keep heights tidy */
  input, select { height: 44px; line-height: 1.2; }
  textarea { line-height: 1.35; }
}