:root{
    --bg-olive: #8b7d4d;
    --card-cream: #f5e29e;
    --ink: #23231f;
    --ink-soft: #3a382f;
    --gap:4px;
    --radius: 18px;

    /* How much wider than the surrounding content column the slider
       should be, on EACH side, at desktop/tablet sizes. */
    --breakout: 80px;

    /* Real photo dimensions: 1140 x 600 = 1.9:1 */
    --img-ratio: 1140 / 600;

    /* Fixed slider height, desktop/tablet only — mobile uses the real
       ratio instead (see below). */
    --slide-height: 600px;

    /* Below this width, slides render as one-thing-per-slide (text card
       alone, then each photo alone) instead of the desktop text+image
       combo — matches the real site's mobile behavior. Also the point
       where the slider goes fully edge-to-edge. */
    --mobile-breakpoint: 700px;
  }

 /* ---- Demo only: stand-in for your site's normal page container ---- */
  .page-container{
    max-width: 1300px; /* Earthen Studio's real content width */
    margin: 0 auto;
    padding: 60px 20px;
  }
  .demo-note{
    font-size: 13px;
    color: rgba(245,226,158,0.7);
    margin: 0 0 40px 0;
    max-width: 620px;
  }
  /* --------------------------------------------------------------- */

  .project-slider{
    position: relative;
	margin-bottom:60px;
    /* Desktop/tablet: break out of the page container by --breakout on
       each side — a fixed overhang, not tied to viewport width. */
    /* width: calc(100% + (var(--breakout) * 2));
    margin-left: calc(var(--breakout) * -1); */
  }

  /* Large screens (roughly 24" and up): size off the viewport instead
     of the container, so the slider keeps elongating as the screen
     gets wider, with a floor/ceiling so it stays reasonable. */
  @media (min-width: 1600px){
    .project-slider{
      /* width: clamp(1460px, 84vw, 1900px); */
      margin-left: 0;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  /* Mobile: true edge-to-edge, ignoring the page container's own
     padding entirely — matches the reference screenshots, where the
     card/photo touch the phone's screen edges directly. */
  @media (max-width: 700px){
    .project-slider{
      width: 100vw;
      margin-left: 0;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  /* Track / slides */
  .slider-viewport{
    overflow: hidden;
  }

  .slider-track{
    display: flex;
    transition: transform .55s cubic-bezier(.65,.05,.36,1);
  }

  .slide{
    flex: 0 0 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
  }

  /* ---- Desktop/tablet combo slide: text card (1 col) + image (3 col) ---- */
  .slide.has-text{
    height: var(--slide-height);
    /* minmax(0, 1fr) — not plain "auto" or "1fr" — stops long text from
       growing the row past --slide-height. */
    grid-template-rows: minmax(0, 1fr);
  }

  .text-card{
    background: var(--card-cream);
    border-radius: var(--radius);
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto; /* safety net for unusually long copy */
	gap:30px;
  }

  .slide.has-text .text-card{
    grid-column: span 1;
  }

  .text-card h2{
    font-family:"sofia-pro";
    font-style: normal;
    font-weight: 700;
    font-size: clamp(28px, 2.4vw, 30px);
    color: var(--ink);
	text-align:left;
    line-height: 1.15;
  }

  .text-card p{
   /*  font-size: 15.5px; */
   font-size:16px;
    line-height:25px;
    color: var(--ink-soft);
    margin: 0;
    font-weight:400;
  }

  .slide.has-text .image-card{
    grid-column: span 3;
  }

  /* Full-width image slide (desktop/tablet) */
  .slide.image-only .image-card{
    grid-column: span 4;
  }

  .image-card{
    border-radius: var(--radius);
    overflow: hidden;
    height: 100%;
    position: relative;
    background: #e7ddb9; /* letterbox fill either side, at desktop's fixed height */
    /* display: flex;
    align-items: center;
    justify-content: center; */
  }

  .slide.image-only .image-card{
    height: var(--slide-height);
  }

  .image-card img{
    width: 100%;
    height: 100%;
    object-fit: cover; /*full photo, no crop */
    display: block;
  }

  /* ---- Mobile: standalone slides ---- */
  @media (max-width: 700px){
    .slide{
      grid-template-columns: 1fr;
    }

    /* Text-only slide: no image alongside it, height follows its own
       content — not the desktop's fixed --slide-height. */
    .slide.text-only{
      display: block;
    }
    .slide.text-only .text-card{
      border-radius: var(--radius);
      padding: 40px 28px;
      min-height:600px; /* roomy card, matches the reference screenshot */
    }

    /* Image-only slide: fixed 540px height like desktop, cropping the
       sides (object-fit: cover below) instead of shrinking the whole
       photo to fit — a narrow mobile width against a 1.9:1 landscape
       photo means cover crops left/right, not top/bottom, so nothing
       important gets cut off vertically. */
    .slide.image-only .image-card{
      height: var(--slide-height);
      border-radius: var(--radius);
    }
    .slide.image-only .image-card img{
      object-fit: cover;
	  min-height:67vh;
    }
  }

  /* Controls row — stays inset within the normal page padding even
     though the card/photo above it go edge-to-edge on mobile. */
  .slider-controls{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 28px;
  }

  @media (max-width: 700px){
    .slider-controls{
      padding: 0 20px; /* re-align with the page's normal side padding */
    }
  }

  .slider-nav{
    display: flex;
    gap: 14px;
  }

  .nav-btn{
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1.5px solid var(--card-cream);
    background: transparent;
    color: var(--card-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .2s ease;
  }

  .nav-btn svg{
    width: 18px;
    height: 18px;
    stroke: currentColor;
  }

  .nav-btn:hover{
    background: var(--card-cream);
    color: var(--bg-olive);
  }

  .nav-btn:active{
    transform: scale(0.94);
  }

  .nav-btn:focus-visible{
    outline: 2px solid #fff;
    outline-offset: 3px;
  }

  .slider-dots{
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
  }

  .dot{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgba(245,226,158,0.4);
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, width .2s ease;
  }

  .dot:hover{
    background: rgba(245,226,158,0.75);
  }

  .dot.active{
    background: var(--card-cream);
    width: 22px;
    border-radius: 5px;
  }

  .dot:focus-visible{
    outline: 2px solid #fff;
    outline-offset: 3px;
  }

  @media (prefers-reduced-motion: reduce){
    .slider-track{ transition: none; }
    .nav-btn, .dot{ transition: none; }
}