/* =========================================================================
   Blackwood Coffee Roastery — photo mosaic + compact footer
   Scoped EXCLUSIVELY to `#photo` and `footer` selectors.
   No HTML/JS/assets changes; decorative texture is pure CSS gradients.
   Tokens fall back to the Blackwood palette if :root is not loaded first.
   Breakpoints aligned with the page system (900px / 600px).
   ========================================================================= */

/* ---- Photo mosaic: warm copper / espresso blocks ---------------------- */

#photo{
  padding:96px 5%;
  background:var(--cream, #F3E9D8);
  color:var(--ink, #201713);
}

#photo .eyebrow{
  color:var(--coffee, #6C422C);
  letter-spacing:4px;
  font-size:12px;
  margin:0 0 28px;
}

#photo .photo-mosaic{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr;
  gap:16px;
}

#photo .photo-mosaic > div{
  position:relative;
  overflow:hidden;
  height:300px;
  border-radius:18px;
  background:var(--coffee, #6C422C);
}

/* warm gradient blocks, no photography */
#photo .photo-mosaic > div:nth-child(1){
  background:
    radial-gradient(120% 90% at 15% 20%, var(--copper, #B8754A) 0%, transparent 55%),
    linear-gradient(140deg, var(--coffee, #6C422C) 0%, var(--espresso, #38241C) 100%);
}
#photo .photo-mosaic > div:nth-child(2){
  background:
    radial-gradient(120% 100% at 80% 25%, var(--copper, #B8754A) 0%, transparent 60%),
    linear-gradient(160deg, var(--espresso, #38241C) 0%, var(--coffee, #6C422C) 100%);
}
#photo .photo-mosaic > div:nth-child(3){
  background:
    radial-gradient(110% 90% at 30% 75%, var(--copper, #B8754A) 0%, transparent 55%),
    linear-gradient(150deg, var(--espresso, #38241C) 0%, var(--coffee, #6C422C) 100%);
}

/* subtle bean/texture grain, pure CSS */
#photo .photo-mosaic > div::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 22% 28%, rgba(255,249,240,.10) 0 5px, transparent 6px),
    radial-gradient(circle at 62% 68%, rgba(32,23,19,.22) 0 6px, transparent 7px),
    radial-gradient(circle at 82% 34%, rgba(255,249,240,.07) 0 4px, transparent 5px);
  pointer-events:none;
}

/* ---- Compact footer, contained width --------------------------------- */

footer{
  background:var(--espresso, #38241C);
  border-top:1px solid rgba(220,200,174,.18);
  color:var(--muted, #9A8170);
  font-size:11px;
  letter-spacing:2px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 24px;
  padding:28px 5%;
}

footer span:first-child{
  color:var(--sand, #DCC8AE);
  font-weight:700;
  letter-spacing:3px;
}

/* ---- Responsive ------------------------------------------------------- */

@media (max-width:900px){
  #photo{padding:80px 5%;}
  #photo .photo-mosaic{grid-template-columns:1fr 1fr;}
  #photo .photo-mosaic > div{height:240px;}
  #photo .photo-mosaic > div:nth-child(1){grid-column:1 / -1;}
}

@media (max-width:600px){
  #photo{padding:64px 20px;}
  #photo .photo-mosaic{grid-template-columns:1fr;gap:14px;}
  #photo .photo-mosaic > div{height:200px;}
  #photo .photo-mosaic > div:nth-child(1){grid-column:auto;}
  footer{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    padding:28px 20px 96px; /* clear fixed bottom action bar */
  }
}