/* Mobile / tablet responsiveness for the Zeeshan Ahmad site.
   The pages carry their design as inline styles (from the prototypes), so these
   rules target elements by a distinctive slice of their inline `style` and use
   !important to win over the (non-important) inline declarations. Keeps the HTML
   untouched. Desktop is unchanged — everything here lives inside media queries. */

/* ============================ TABLET & BELOW ============================ */
@media (max-width: 860px) {

  /* --- Nav: let the floating bar wrap; hide the @handle + divider --- */
  header { padding: 10px 12px 0 !important; }
  header > div {
    height: auto !important;
    flex-wrap: wrap !important;
    gap: 10px 14px !important;
    padding: 12px 16px !important;
  }
  header > div > div:first-child > span { display: none !important; } /* divider + @handle */
  header nav {
    order: 3 !important;
    width: 100% !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 2px !important;
  }

  /* --- Comfortable side padding on the main wrappers --- */
  [style*="max-width:1200px"],
  [style*="max-width:1120px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* --- Two-column layouts collapse to one --- */
  [style*="grid-template-columns:1.32fr"],
  [style*="grid-template-columns:1.22fr"],
  [style*="grid-template-columns:1.06fr"],
  [style*="grid-template-columns:1.05fr .95fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1fr auto"],
  [style*="grid-template-columns:auto 1fr"],
  [style*="grid-template-columns:minmax(0,1fr) 520px"] {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  /* --- Video / 3-up card grids collapse to one --- */
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* --- 4-up stat/proof strips go to two --- */
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* --- Footer columns stack --- */
  [style*="grid-template-columns:1.5fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

  /* --- Right-aligned media (portraits, letter card, photo cluster) centers --- */
  [style*="justify-self:end"] { justify-self: center !important; }

  /* --- Cap + centre the homepage hero portrait --- */
  [style*="grid-template-columns:1.32fr"] > div:last-child {
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }

  /* --- Homepage "about me" photo cluster: scale to fit, reclaim empty space --- */
  [style*="gap:24px;width:520px"] { width: auto !important; }
  [style*="width:520px;height:660px"] {
    transform: scale(0.8) !important;
    transform-origin: top left !important;
    margin-bottom: -132px !important;   /* 660 * (1 - .8) */
  }

  /* --- Trim oversized card padding --- */
  [style*="padding:60px 60px"] { padding: 34px 22px !important; }
  [style*="padding:54px 50px"] { padding: 34px 24px !important; }
  [style*="padding:48px 52px"] { padding: 30px 22px !important; }
  [style*="padding:46px 50px"] { padding: 30px 22px !important; }
  [style*="padding:40px 44px"] { padding: 26px 22px !important; }
}

/* ============================ PHONE ============================ */
@media (max-width: 560px) {

  /* Single-column stats & proof on phones */
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
  /* Stat items: drop the vertical divider rules when stacked */
  [style*="border-left:1px solid rgba(243,242,236,.12)"] { border-left: 0 !important; }

  /* Photo cluster scales smaller on phones */
  [style*="width:520px;height:660px"] {
    transform: scale(0.6) !important;
    margin-bottom: -264px !important;   /* 660 * (1 - .6) */
  }

  /* Slightly tighter page gutters */
  [style*="max-width:1200px"],
  [style*="max-width:1120px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Keep the newsletter closing card form from crowding */
  [style*="grid-template-columns:1fr auto"] { gap: 24px !important; }
}