/* ============================================================
   AIRIS DESIGN STUDIO — COLLECTIONS PAGE
   Loads AFTER style.css and only styles the .collections 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 same
   "btn btn-primary" used by the homepage's "Book to View the Collection").
   ============================================================ */

/* ------------------------------------------------------------
   >>> REPLACE THE COLLECTIONS BACKGROUND IMAGE HERE <<<
   Option A: save your photo as  images/collections-background.jpg
             (an "images" folder next to collections.html) — nothing else to edit.
   Option B: change the path inside url('...') below to any image.
   A wide landscape photo (about 2400px across) works best. It is cropped
   to fill the section, never stretched. If the image is missing, the page
   shows the site's indigo placeholder gradient instead.
   ------------------------------------------------------------ */
:root{
  --collections-bg-image: url('images/collections-background.jpg?v=2');
}

/* 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); }

/* ---------- Main section: full-bleed background ---------- */
.collections{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: clamp(64px, 14vw, 96px) 0;
  background-color: var(--indigo, #44375E);
  background-image: var(--collections-bg-image), linear-gradient(155deg, #44375E 0%, #362c4c 100%);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
/* darkens the image so the white text stays readable on any photo */
.collections::before{
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(7,2,13,0.55);
  pointer-events: none;
}

/* Same proportions as the homepage hero (616 CSS px = 770 screenshot px at
   125% display scaling). A minimum only: it grows if the text needs more room. */
@media (min-width: 900px){
  .collections{
    min-height: 616px;
    padding: 72px 0;
  }
}

/* ---------- Content ---------- */
.collections-content{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 800px;
  box-sizing: border-box;
  padding: 0 var(--gutter, 24px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.collections-content h1{
  font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-weight: 500;
  font-size: clamp(46px, 6.4vw, 84px);
  line-height: 1.05;
  color: var(--white, #FBF6EF);
  margin: 0 0 26px;
}
.collections-content p{
  font-family: var(--sans, 'Montserrat', Arial, sans-serif);
  font-size: 17px;
  line-height: 1.75;
  color: var(--white, #FBF6EF);
  margin: 0 0 36px;
}

/* The button label is long (336px wide) and the shared .btn never wraps its
   text, so on phones narrower than 385px it needs slightly less side padding
   (and may wrap on very small screens) to stay inside its box. Wider than that
   it is exactly the homepage button. */
@media (max-width: 384px){
  .collections-content .btn{
    white-space: normal;
    line-height: 1.4;
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (min-width: 561px) and (max-width: 899px){
  .collections-content .btn{ width: auto; }   /* don't stretch across a tablet */
}
@media (max-width: 560px){
  .collections-content p{ font-size: 16px; line-height: 1.7; }
}