/* ============================================================
   AIRIS DESIGN STUDIO — STUDIO PAGE
   Loads AFTER style.css and only styles the .studio classes below, so it
   cannot change the homepage or any other page. Header, footer and the
   button come from style.css, unchanged (the button is the site's normal
   "btn btn-primary"). Colours are the site's existing palette variables.
   ============================================================ */

/* If the window is taller than the page, any space below the footer is the
   same black as the footer instead of cream. */
html{ background: var(--black, #07020D); }

.studio{
  display: block;
  box-sizing: border-box;
  background: var(--white, #FBF6EF);
}

/* ---------- Image area: two images ----------
   To add a photo, replace a <div class="ph"> in studio.html with an <img>.
   Each image fills its own area, cropped to fit, never stretched. */
.studio-media{
  --studio-gap: 12px;               /* the small gap between the two images */
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;              /* mobile / tablet: a band above the text, the two images side by side */
  display: flex;
  gap: var(--studio-gap);
}
.studio-media > .ph,
.studio-media > img{
  flex: 0 0 calc((100% - var(--studio-gap)) / 2);   /* two exactly equal halves */
  min-width: 0;
  min-height: 0;
  width: calc((100% - var(--studio-gap)) / 2);
  height: 100%;
  border-radius: 0;
  aspect-ratio: auto;
}
.studio-media > img{ display: block; object-fit: cover; object-position: center; }

/* ---------- Text area ---------- */
.studio-text{
  box-sizing: border-box;
  padding: clamp(40px, 8vw, 64px) var(--gutter, 24px);
}
.studio-copy{ max-width: 560px; margin: 0 auto; }
.studio-copy h1{
  font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-weight: 500;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.1;
  color: var(--black, #07020D);
  margin: 0 0 26px;
}
.studio-copy p{
  font-family: var(--sans, 'Montserrat', Arial, sans-serif);
  font-size: 16px;
  line-height: 1.75;
  color: var(--black, #07020D);
  margin: 0 0 16px;
}
.studio-copy .btn{ margin-top: 20px; }


/* ---------- Desktop: image on the left, full height of the section ---------- */
@media (min-width: 900px){
  .studio{
    display: grid;
    grid-template-columns: 7fr 13fr;
    min-height: 616px;
  }

  .studio-media{
    position: relative;
    aspect-ratio: auto;
    min-height: 616px;
    display: block;
  }

  /* Two images stacked vertically on desktop */
  .studio-media > .ph,
  .studio-media > img{
    position: absolute;
    left: 0;
    width: 100%;
    height: calc((100% - var(--studio-gap)) / 2);
    margin: 0;
  }

  .studio-media > :first-child{ top: 0; }
  .studio-media > :last-child{ bottom: 0; }

  .studio-media > img{
    display: block;
    object-fit: contain;
    object-position: center;
  }

  .studio-text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(48px, 5vw, 80px) clamp(32px, 5vw, 88px);
  }

  .studio-copy{ width: 100%; }
}


/* ---------- Button on smaller screens ---------- */
@media (min-width: 561px) and (max-width: 899px){
  .studio-copy .btn{ width: auto; }          /* don't stretch across a tablet */
}
@media (max-width: 384px){
  .studio-copy .btn{
    white-space: normal;                     /* long label: may wrap on very small phones */
    line-height: 1.4;
    padding-left: 20px;
    padding-right: 20px;
  }
}