/* ==================================================================== *
 *  responsive.css — breakpoint fixes layered over the compiled Tailwind
 *
 *  Plain CSS, loaded AFTER output.css by app/includes/header.php (public)
 *  and admin/includes/header.php (admin). It exists because this project
 *  has no Tailwind build step available, so new utilities cannot be
 *  compiled — the same reason the pages carry scoped <style> blocks.
 *
 *  Every rule here answers a defect seen at a specific viewport width:
 *  overflow, overlap, a cramped column, an unbalanced grid. Nothing in
 *  this file changes the desktop design at 1280px+ except the one
 *  heading-size fix noted below.
 *
 *  Specificity notes: compiled utilities are (0,1,0); the inline <style>
 *  blocks in nav.php / footer.php / index.php are also mostly (0,1,0) but
 *  sit later in the document, so anything that must beat them is keyed
 *  off an id (#site-header, #overlay-menu) or a two-part selector.
 *
 *  Breakpoints follow Tailwind's: 640 sm · 768 md · 1024 lg · 1280 xl.
 * ==================================================================== */

/* ------------------------------------------------------------------ *
 *  Global safety
 * ------------------------------------------------------------------ */

/* Nothing on the site should ever produce a sideways scroll. `clip` keeps
   the viewport from becoming a scroll container (so sticky/fixed and Lenis
   are unaffected); `hidden` is the fallback for older engines. */
html {
  overflow-x: hidden;
  overflow-x: clip;
}

/* Embedded media from the CMS (blog body, bio) can carry a fixed width. */
iframe,
video,
embed,
object {
  max-width: 100%;
}
.prose img,
.prose video {
  height: auto;
}
.prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* Small-screen headings: allow a single very long word (a project name, a
   category) to break rather than push the page sideways. */
@media (max-width: 639px) {
  h1, h2, h3 {
    overflow-wrap: anywhere;
  }
}

/* ------------------------------------------------------------------ *
 *  Tap targets — the progress dots are 6px tall; the hit area grows to
 *  ~30px without changing what is drawn.
 * ------------------------------------------------------------------ */
.dot,
.shot-dot,
[data-post-dot] {
  position: relative;
}
/* Vertically generous; sideways only to the midpoint of each row's gap,
   so neighbouring hit areas meet rather than cover one another. */
.dot::before,
.shot-dot::before,
[data-post-dot]::before {
  content: '';
  position: absolute;
  inset: -12px -5px;
}
.shot-dot::before { inset: -12px -3px; }   /* gap-1.5 */
[data-post-dot]::before { inset: -12px -4px; } /* gap-2 */

/* ------------------------------------------------------------------ *
 *  Sticky header (nav.php) — every inner page
 *
 *  At ≤360px the bar overflowed by ~30px: wordmark (min-content ~150px)
 *  + "Let's talk" pill + burger + 24px gutters no longer fit. Everything
 *  in the row is made a little smaller and the lockup is allowed to
 *  shrink below its text's natural width (design.js re-fits it to
 *  whatever width it ends up with).
 * ------------------------------------------------------------------ */
@media (max-width: 479px) {
  #site-header > div {
    padding-left: 16px;
    padding-right: 16px;
    gap: 12px;
  }
  #site-header .hdr-mark {
    width: min(215px, 38vw);
    min-width: 0;
    overflow: hidden;
  }
  /* Pre-JS fallback sizes, so the nowrap lines' min-content is small
     enough to fit even before design.js measures them. */
  #site-header .hdr-mark__l1 { font-size: 17px; }
  #site-header .hdr-mark__l2 { font-size: 10px; }
  #site-header .pill-solid {
    padding: 10px 16px;
    font-size: 13px;
  }
  #site-header [data-menu-open] {
    width: 42px;
    height: 42px;
  }
  #site-header > div > div {
    gap: 8px;
  }
}

/* The overlay menu's own header row and footer get the same gutter. */
@media (max-width: 479px) {
  #overlay-menu {
    padding-left: 18px;
    padding-right: 18px;
  }
  #overlay-menu .ovm-link {
    font-size: clamp(28px, 9vw, 40px);
  }
}

/* ------------------------------------------------------------------ *
 *  Home — hero top bar (index.php)
 * ------------------------------------------------------------------ */
@media (max-width: 379px) {
  /* Wrapper-qualified to outrank the .hero-topbar rule in index.php's
     own <style> block, which comes later in the document. */
  [data-hero-slider] .hero-topbar {
    padding-left: 16px;
    padding-right: 16px;
    gap: 12px;
  }
  .hero-topbar__actions .pill-invert {
    padding-left: 16px;
    padding-right: 16px;
  }
}
/* 320px-class phones: the logo, the pill and the burger cannot share the
   row; the burger opens a menu that carries Contact, so the pill goes. */
@media (max-width: 339px) {
  .hero-topbar__actions .pill-invert {
    display: none;
  }
}

/* Landscape phones: a 4:3 hero is taller than the whole screen, so the
   headline lands below the fold. Widen it to 16:9 whenever the viewport is
   short and wide. */
@media (max-height: 520px) and (orientation: landscape) {
  [data-hero-slider] > div {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
}

/* ==================================================================== *
 *  HOME — PHONE / TABLET LAYOUT (below lg, 1024px)
 *
 *  On the canvas every section's CTA sits in the heading row, top-right,
 *  beside the title. Stacked on a phone that puts the button ABOVE the
 *  content it refers to. Below lg each section therefore closes with its
 *  CTA instead (a second copy in the markup; the heading-row one is
 *  display:none there), controls that duplicate a touch gesture are
 *  dropped, and the ones that stay are sized for a thumb.
 * ==================================================================== */

/* ---- Section CTAs: one full-width pill, text left / icon right ------ */
@media (max-width: 639px) {
  .proj-cta-mobile .btn-pill,
  .svc-cta-mobile .btn-pill-outline,
  [data-highlight-carousel] .highlight-cta,
  footer .btn-pill-light {
    width: 100%;
    max-width: 420px;
    justify-content: space-between;
  }
}
/* 320px-class phones: the footer panel's inner width is ~216px, so the pill
   needs a tighter left pad and gap for "Book a consultation" to fit. */
@media (max-width: 359px) {
  footer .btn-pill-light,
  [data-highlight-carousel] .highlight-cta,
  .proj-cta-mobile .btn-pill,
  .svc-cta-mobile .btn-pill-outline {
    padding-left: 18px;
    gap: 10px;
    font-size: 14px;
  }
}

/* ---- Projects: category rail ---------------------------------------- */
/* One scrollable row of tabs. The prev/next arrows are desktop-only (the
   tabs are the control here); the row itself snaps and hides its bar. */
@media (max-width: 1023px) {
  .proj-rail {
    flex-wrap: nowrap;
    column-gap: 26px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    margin-bottom: -6px;
    /* Bleed the row out to the panel edge so the last tab can scroll fully
       clear of the padding, and the first one still starts on the text axis. */
    margin-left: calc(-1 * clamp(28px, 4.5vw, 72px));
    margin-right: calc(-1 * clamp(28px, 4.5vw, 72px));
    padding-left: clamp(28px, 4.5vw, 72px);
    padding-right: clamp(28px, 4.5vw, 72px);
  }
  .proj-rail::-webkit-scrollbar { display: none; }
  .proj-rail [data-carousel-tab] {
    flex: none;
    scroll-snap-align: start;
    font-size: 18px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  /* The active tab gets an underline as well as weight, since on a phone
     the faint/bold contrast alone is easy to miss while scrolling. */
  .proj-rail [data-carousel-tab][aria-selected="true"] {
    box-shadow: inset 0 -2px 0 currentColor;
  }
}

/* ---- Projects: next-photo control ----------------------------------- */
@media (max-width: 1023px) {
  .proj-shot-foot {
    margin-top: 14px;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 16px;
  }
  .proj-shot-foot [data-shot-next] {
    width: 48px;
    height: 48px;
  }
  .proj-shot-foot [data-shot-next] svg {
    width: 16px;
    height: 16px;
  }
}

/* ---- Highlight project ---------------------------------------------- */
/* Stacked (below xl) the picture leads and the text, specs and CTA follow —
   the same order a case-study card reads in on a phone. */
@media (max-width: 1279px) {
  [data-highlight-carousel] .mbh-compare { order: -1; }
}
@media (max-width: 639px) {
  [data-highlight-carousel] .mbh-compare {
    aspect-ratio: 1 / 1;
    min-height: 0;
  }
  [data-highlight-carousel] .highlight-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }
  [data-highlight-carousel] .highlight-nav {
    justify-content: center;
    gap: 14px;
  }
  [data-highlight-carousel] .highlight-nav__btn {
    width: 48px;
    height: 48px;
  }
  [data-highlight-carousel] .highlight-specs { margin-top: 26px; }
}

/* ---- About: the three stats ----------------------------------------- */
/* Stacked, each stat kept the desktop's 48–80px gap between its label and
   its number — a page of air. A tight row with a hairline under each. */
@media (max-width: 767px) {
  [data-screen="about"] [data-reveal-group] {
    margin-top: 40px;
    border-top: 1px solid rgb(var(--c-hair));
  }
  [data-screen="about"] [data-reveal-group] > div {
    gap: 12px;
    padding: 20px 0;
    border-bottom: 1px solid rgb(var(--c-hair));
  }
}

/* ---- Process: the four stages --------------------------------------- */
@media (max-width: 767px) {
  [data-screen="process"] li {
    min-height: 0;
    gap: 22px;
    padding: 26px 20px 30px;
  }
}

/* ---- Testimonials --------------------------------------------------- */
@media (max-width: 767px) {
  .quote-card,
  .quote-card.is-active {
    width: 90%;
    padding: 24px;
    gap: 24px;
  }
  .quote-card blockquote { font-size: 15px; }
}

/* ---- FAQ: heading → questions → "have another question?" + CTA ------ */
/* The left column's three children become grid items of the section grid
   (display: contents), so the list can slot in right after the heading and
   the email line + button close the section. */
@media (max-width: 1023px) {
  [data-screen="faq"] > .shell { gap: 22px; }
  [data-screen="faq"] > .shell > div:first-child { display: contents; }
  [data-screen="faq"] > .shell > div:first-child > h2 { order: 0; }
  [data-screen="faq"] [data-faq] { order: 1; margin-top: 10px; }
  [data-screen="faq"] > .shell > div:first-child > p { order: 2; margin-top: 6px; }
  [data-screen="faq"] > .shell > div:first-child > a {
    order: 3;
    justify-self: start;
  }
}
@media (max-width: 639px) {
  [data-screen="faq"] > .shell > div:first-child > a {
    width: 100%;
    max-width: 420px;
    justify-content: space-between;
  }
}

/* ------------------------------------------------------------------ *
 *  Home — projects panel
 *  The mist panel's own padding (28px) plus the 24px section gutter left
 *  a 216px stage on a 320px phone. Tighten both under 480px.
 * ------------------------------------------------------------------ */
@media (max-width: 479px) {
  .section-flush {
    padding-left: 16px;
    padding-right: 16px;
  }
  [data-screen="projects"] .panel-mist {
    padding-left: 20px;
    padding-right: 20px;
  }
  /* The rail's edge bleed must match the panel padding set just above. */
  .proj-rail {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ------------------------------------------------------------------ *
 *  Home — services mosaic
 * ------------------------------------------------------------------ */

/* The dark card's 30px title overflowed its 209px column on a 320px phone. */
@media (max-width: 419px) {
  [data-screen="services"] .rounded-tile > .relative > h3 {
    font-size: 26px;
  }
}

/* ------------------------------------------------------------------ *
 *  Admin panel - public-site wordmark and monochrome visual system
 *  Kept here (after the generated Tailwind sheet) so the live admin takes
 *  effect even on hosts where the asset build is not available.
 * ------------------------------------------------------------------ */
.admin-brand {
  display: block;
  width: 188px;
  color: #fff;
}
.admin-brand__line {
  display: block;
  font-family: Archivo, system-ui, sans-serif;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  font-variation-settings: 'wdth' 100;
}
.admin-brand__l1 { font-size: 18px; font-weight: 400; letter-spacing: -.005em; }
.admin-brand__l1 b { font-weight: 800; letter-spacing: -.015em; }
.admin-brand--login { width: 238px; margin: 0 auto; }
.admin-brand--login .admin-brand__l1 { font-size: 23px; }

.admin main a.rounded-2xl:hover { border-color: rgb(var(--c-carbon)); }
.admin .field:focus,
.admin .field:focus-visible {
  border-color: rgb(var(--c-carbon));
  box-shadow: 0 0 0 3px rgb(var(--c-carbon) / .16);
  --tw-ring-color: transparent;
}
.admin .btn:focus-visible,
.admin .btn-primary:focus-visible,
.admin .btn-outline:focus-visible,
.admin .focus\:ring-gold:focus { --tw-ring-color: rgb(var(--c-carbon)); }
.admin input[type='checkbox'],
.admin input[type='radio'],
.admin .accent-gold { accent-color: rgb(var(--c-carbon)); }
.admin ::selection { background-color: rgb(var(--c-carbon) / .18); }

.admin .text-gold,
.admin .text-gold-light,
.admin .hover\:text-gold:hover,
.admin .hover\:text-gold-light:hover,
.admin .text-amber-800,
.admin .text-green-800,
.admin .text-red-600,
.admin .text-red-700 { color: rgb(var(--c-carbon)); }
.admin .bg-gold { background-color: rgb(var(--c-paper)); color: rgb(var(--c-carbon)); }
.admin .border-gold,
.admin .hover\:border-gold:hover,
.admin .hover\:border-red-400:hover,
.admin .focus\:border-gold:focus { border-color: rgb(var(--c-carbon)); }
.admin .bg-amber-50,
.admin .bg-green-50,
.admin .bg-red-50 { background-color: rgb(var(--c-mist)); }
.admin .bg-green-600,
.admin .bg-green-700 { background-color: rgb(var(--c-carbon)); }

/* md–lg (768–1279): card 01 spans two rows on the left, 02 and 03 stack
   on the right, and 04 was left alone at the bottom-left with an empty
   cell beside it. Running it the full width closes the row. */
@media (min-width: 768px) and (max-width: 1279px) {
  [data-screen="services"] .card-line:last-child {
    grid-column: span 12 / span 12;
    min-height: 0;
  }
}

/* ------------------------------------------------------------------ *
 *  Home — highlight project: before/after labels
 *  At ≤400px "COMPLETED" and "UNDER CONSTRUCTION" ran into each other at
 *  the top of the frame. Smaller type and a hard half-width cap.
 * ------------------------------------------------------------------ */
/* index.php styles these in a <style> block that comes later in the
   document, so the selectors here carry the carousel wrapper to outrank it. */
@media (max-width: 639px) {
  [data-highlight-carousel] .mbh-compare__label {
    max-width: calc(100% - 24px);
    padding: 5px 10px;
    font-size: 10px;
    letter-spacing: .1em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Opposite corners: "Completed" stays top-left over the finished photo,
     "Under construction" drops to the bottom-right over the site photo, so
     neither can run into the other whatever the frame's width. */
  [data-highlight-carousel] .mbh-compare__label--after  { top: 12px; left: 12px; }
  [data-highlight-carousel] .mbh-compare__label--before { top: auto; bottom: 12px; right: 12px; }
  [data-highlight-carousel] .mbh-compare { min-height: 300px; }
  [data-highlight-carousel] .highlight-body { padding: 24px 20px 28px; }
}

/* ------------------------------------------------------------------ *
 *  Home — process grid
 *  At xl (1280–1535) the four columns are ~226px wide and the 28px
 *  "DOCUMENTATION" heading measured 242px. A slightly gentler ramp keeps
 *  every stage name on one line; from 1536px up the size is unchanged.
 * ------------------------------------------------------------------ */
@media (min-width: 1280px) and (max-width: 1535px) {
  [data-screen="process"] li h3 {
    font-size: clamp(20px, 1.7vw, 26px);
  }
}
/* Two-up on tablets does not need the desktop's 340px card height. */
@media (min-width: 768px) and (max-width: 1279px) {
  [data-screen="process"] li {
    min-height: 260px;
  }
}

/* ------------------------------------------------------------------ *
 *  Home — testimonials
 *  The 25 / 50 / 25 split starts at 768px, where a side card is ~175px
 *  wide with 28px padding — two words per line. Between 768 and 1023 the
 *  active card takes most of the frame instead; 25/50/25 resumes at lg.
 * ------------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 1023px) {
  .quote-card,
  .quote-card.is-active {
    width: 64%;
  }
}

/* ------------------------------------------------------------------ *
 *  Newsletter forms
 * ------------------------------------------------------------------ */

/* Blog's dark band: the input shrank to ~127px beside the button on a
   360px phone. Stack them. */
@media (max-width: 479px) {
  [data-screen="newsletter"] .newsletter-form input[type="email"] {
    flex: 1 1 100%;
    width: 100%;
  }
  [data-screen="newsletter"] .newsletter-form button {
    width: 100%;
  }
}
/* Home's mist tile keeps its single capsule; the button just gets smaller
   so the input has room to show an address. */
@media (max-width: 419px) {
  [data-screen="journal"] .newsletter-form button {
    padding-left: 14px;
    padding-right: 14px;
    font-size: 12px;
  }
}

/* ------------------------------------------------------------------ *
 *  About page
 * ------------------------------------------------------------------ */

/* Studio banner: the uppercase address caption (16px, three lines) plus
   the "Est." line no longer fit inside a 4:3 frame at 360px and spilled
   past its bottom edge. */
@media (max-width: 639px) {
  [data-screen="about-intro"] [data-reveal="media"] > div {
    gap: 6px 16px;
    padding-bottom: 16px;
  }
  [data-screen="about-intro"] [data-reveal="media"] p {
    max-width: 100%;
    font-size: 13px;
    line-height: 1.3;
  }
  [data-screen="about-intro"] [data-reveal="media"] > div > span {
    font-size: 12px;
  }
}
/* The inline image pill inside the mission headline is sized for a wide
   heading; at 320px it pushed the line past the panel. */
@media (max-width: 419px) {
  [data-screen="mission"] h2 > span.inline-block {
    width: 64px;
    height: 28px;
  }
}

/* ------------------------------------------------------------------ *
 *  Contact page
 * ------------------------------------------------------------------ */
/* The FAQ answer reserves a 48px right margin for the (+) column; on a
   phone that is a fifth of the line. */
@media (max-width: 639px) {
  [data-screen="contact-faq"] .faq-a p {
    padding-right: 0;
  }
}

/* ------------------------------------------------------------------ *
 *  Legacy-layout pages (faq, team, team-member, project-detail,
 *  blog-detail, why-choose-us, thank-you, 404)
 *  pt-36 (144px) clears the 80px header with a 64px gap — generous on a
 *  phone. 112px reads the same as the redesigned intros do.
 * ------------------------------------------------------------------ */
@media (max-width: 639px) {
  .container-editorial.pt-36,
  article.container-editorial.pt-36 {
    padding-top: 7rem;
  }
  /* Project facts: two columns of "Faisalabad, Pakistan" is tight at 320. */
  article .grid.grid-cols-2.gap-y-5 {
    column-gap: 16px;
  }
}

/* ------------------------------------------------------------------ *
 *  Admin panel (html.admin)
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
  /* Six-column list tables need to scroll sideways, not squash. The
     wrappers were switched to overflow-x-auto in the markup; the min-width
     stops the cells from wrapping every word first. */
  .admin .overflow-x-auto > table,
  .admin .overflow-y-auto > table {
    min-width: 640px;
  }
  .admin #admin-main-col > header {
    padding-left: 16px;
    padding-right: 16px;
  }
  .admin #admin-main-col > header h1 {
    font-size: 1.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .admin #admin-main-col > main {
    padding: 1rem;
  }
}

/* Login / forgot / reset: the reCAPTCHA v2 widget is a fixed 304px wide,
   wider than the card's content box on a 320–400px phone. Scale it down
   and give the card a phone-sized padding. */
@media (max-width: 419px) {
  .admin .g-recaptcha {
    transform: scale(0.86);
    transform-origin: 0 0;
    height: 68px;                /* 78px × 0.86 — keeps the layout flow honest */
  }
  .admin body > .max-w-sm > .rounded-2xl {
    padding: 1.25rem;
  }
}