/* ==========================================================================
   responsive.css
   ========================================================================== */


/* ==========================================================================
   DESKTOP GUARD
   ========================================================================== */
@media (min-width:1025px) {
  .burger {
    display: none !important;
  }
}


/* ==========================================================================
   TABLET AND BELOW
   ========================================================================== */
@media (max-width:1024px) {

  /* ---------- page ---------- */
  header {
    padding: 22px 26px;
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  header.scrolled {
    padding: 20px 26px;
  }

  nav.nav-left,
  nav.nav-right {
    display: none;
  }
	
  .logo img {
    width: 11rem;
}

/*   .logo {
    grid-column: 1;
    justify-self: center;
  } */

  /* grid-column:auto matters — an absolutely positioned grid child that still
     claims column 3 is placed against that (now non-existent) grid area. */
  .burger {
    display: flex;
    grid-column: auto;
    position: absolute;
    right: 26px;
    top: 50%;
    transform: translateY(-50%);
  }

  .journey-row,
  .journey-row.reverse {
    grid-template-columns: 1fr;
  }

  .journey-content {
    padding: 44px 8px;
  }

  .textile-grid,
  .people-grid,
  .cta-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .stories-grid {
    grid-template-columns: 1fr;
  }

  .test-track {
    gap: 34px;
  }

  .test-card {
    flex: 0 0 calc(50% - 17px);
  }

  .test-nav {
    width: 42px;
    height: 42px;
  }

  .test-nav .nav-icon {
    width: 18px;
    height: 18px;
  }

  .partners-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  /* ---------- journeys page (journeys.php) ---------- */
  /* The mockup broke at 980px; folded into this 1024px block so the whole
     site has one set of breakpoints. */
  .page-hero-inner {
    padding: 150px 26px 70px;
  }

  .je {
    padding: 80px 0;
  }

  /* .je.reverse needs naming too - its 0.6fr/1.4fr split would otherwise win */
  .je-grid,
  .je.reverse .je-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .je-photos {
    flex-flow: row wrap;
  }

  .je-photo {
    max-width: 150px;
    flex: 1 1 130px;
  }

  /* ---------- textile studio (page-templates/textile.php) ---------- */
  /* The mockup broke at 980px; folded into this 1024px block so the whole
     site has one set of breakpoints. */
  .story-section {
    padding: 80px 0;
  }

  .story-head {
    margin-bottom: 36px;
  }

  /* All three compositions collapse to a two-up grid. !important is
     load-bearing — the mosaic/staggered/brick rules are more specific. */
  .story-gallery {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
    margin-top: 40px;
  }

  .story-gallery .story-photo {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
    aspect-ratio: 1/1 !important;
    margin-top: 0 !important;
  }

  /* ---------- about + contact (page-templates/) ---------- */
  .split {
    padding: 80px 0;
  }

  .split-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  /* the photograph leads once the row stacks, on both rows */
  .split-grid.reverse .split-media {
    order: -1;
  }

  .enquiry {
    padding: 90px 0;
  }

  .enquiry .form-panel {
    margin-top: 44px;
  }

  .map-band {
    height: 340px;
  }

  .contact-cta {
    padding: 80px 0;
  }

  .contact-cta .wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }

  /* ---------- 404 (404.php) ---------- */
  .e404 {
    padding: 150px 0 100px;
    min-height: auto;
  }

  .e404-next {
    padding: 80px 0;
  }

  .e404-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* ---------- hero slider (index2.html) ---------- */
  .hero-slide-inner {
    padding: 0 32px 92px;
    max-width: 680px;
  }

  .hero-dots {
    right: 22px;
    /* >=16px keeps the 24px hit areas from overlapping */
    gap: 17px;
  }
}


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

  /* ---------- page ---------- */
  /* wordmark sits left, rules dropped — the burger keeps the right edge */
  .logo-line {
    display: none;
  }

  .logo {
    justify-self: start;
    text-align: left;
  }

  .intro {
    padding: 90px 0 90px;
  }
	
	.journeys-head {
    margin-bottom: 40px;
}

  .moment {
    padding: 140px 0;
  }

  .textile,
  .people,
  .stories,
  .testimonials,
  .final-cta {
    padding: 70px 0;
  }

  .founders-row {
    flex-direction: column;
  }

  .test-track {
    gap: 26px;
  }

  .test-card {
    flex: 0 0 100%;
  }

  .test-nav {
    width: 38px;
    height: 38px;
  }

  .partners-grid {
    grid-template-columns: 1fr;
  }

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

  .floating-actions {
    right: 16px;
    bottom: 16px;
    gap: 10px;
  }

  .floating-social {
    left: 16px;
    bottom: 16px;
    gap: 10px;
  }

  .float-btn {
    width: 48px;
    height: 48px;
  }

  .float-btn::before {
    display: none;
  }

  /* ---------- journeys page (journeys.php) ---------- */
  /* The mockup broke at 560px; folded into this 767px block. */
  .journeys-intro {
    padding: 110px 0 70px;
  }

  /* ---------- textile studio (page-templates/textile.php) ---------- */
  .story-intro {
    padding: 110px 0 70px;
  }

  /* ---------- about + contact (page-templates/) ---------- */
  .split,
  .worldmap,
  .enquiry {
    padding: 70px 0;
  }

  /* ---------- 404 (404.php) ---------- */
  .e404 {
    padding: 130px 0 80px;
  }

  .e404-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .e404-next {
    padding: 64px 0;
  }

  .map-band {
    height: 260px;
  }

  .contact-cta {
    padding: 70px 0;
  }

  .contact-cta .btn {
    width: 100%;
    justify-content: center;
  }

  /* ---------- hero slider (index2.html) ---------- */
  .hero-slider {
    min-height: 600px;
  }

  .hero-slide-inner {
    padding: 0 26px 76px;
  }

  .hero-slide .eyebrow {
    letter-spacing: 0.26em;
    margin-bottom: 16px;
  }

  .hero-slide .hero-sub {
    font-size: 0.95rem;
    margin-top: 16px;
  }

  .hero-slide .hero-cta {
    margin-top: 26px;
  }

  /* dots move under the caption as a centred row */
  .hero-dots {
    inset: auto auto 14px 50%;
    transform: translateX(-50%);
    flex-direction: row;
    gap: 17px;
  }

  .hero-dot {
    width: 7px;
    height: 7px;
  }
	header.scrolled {
        padding: 22px 26px;
    }
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

  /* ---------- page ---------- */
  html {
    scroll-behavior: auto;
  }

  /* .js .reveal must be named: a bare .reveal is lighter and would lose to it,
     leaving every block at opacity:0 for the readers who least want motion. */
  .js .reveal,
  .reveal {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .arch-wrap svg path {
    transition: none;
    stroke-dashoffset: 0;
  }

  /* ---------- hero slider (index2.html) ---------- */
  .hero-slide,
  .hero-slide-bg,
  .hero-slide .eyebrow,
  .hero-slide h1,
  .hero-slide .hero-sub,
  .hero-slide .hero-cta {
    transition: none;
  }

  .hero-slide-bg,
  .hero-slide.is-active .hero-slide-bg {
    transform: none;
  }
}