/* ===== Innani Digital — Ricoh photography showcase ===== */
/* Adds the full-bleed hero banner + photo spotlight cards used on the
   front page and woven into the services page. No new colors — reuses
   the --red / --black / --white / --gray-light system from main.css. */

/* ---- Full-bleed statement banner (front page, after hero) ---- */
.showcase-banner{
  position: relative;
  overflow: hidden;
  background: var(--black);
  color: var(--white);
}
.showcase-banner__img{
  width: 100%;
  aspect-ratio: 1536 / 384;
  object-fit: cover;
  display: block;
  opacity: .95;
}
.showcase-banner__overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, rgba(23,23,23,.92) 0%, rgba(23,23,23,.62) 42%, rgba(23,23,23,.15) 75%, rgba(23,23,23,0) 100%);
}
.showcase-banner__overlay .wrap{ max-width: var(--max); margin: 0 auto; width: 100%; }
.showcase-banner__overlay .tag--white{ display:block; margin-bottom: 16px; }
.showcase-banner__overlay h2{ color: var(--white); max-width: 640px; margin-bottom: 18px; }
.showcase-banner__overlay p{ max-width: 480px; color: #e6e6e6; margin-bottom: 0; font-size: 1.05rem; line-height: 1.7; }
.tag--white{ color: var(--white); }

@media (max-width: 900px){
  /* The 4:1 image is too short on narrow screens to hold the overlaid
     text without overflowing — stack text below it in normal flow instead. */
  .showcase-banner__overlay{
    position: static;
    display: block;
    background: var(--black);
    padding: 28px 0 36px;
  }
  .showcase-banner__overlay .wrap{ width:auto; max-width:100%; padding-top:0; padding-bottom:0; }
  .showcase-banner__overlay h2, .showcase-banner__overlay p{ max-width: 100%; }
}

/* ---- Photo spotlight cards (front page + services page) ---- */
.showcase-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 40px;
}
.showcase-card{
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.showcase-card__media{
  position: relative;
  overflow: hidden;
  line-height: 0;
}
.showcase-card__media img{
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}
.showcase-card--tall .showcase-card__media img{ height: 300px; }
.showcase-card__body{ padding: 24px 26px 28px; }
.showcase-card__body h3{ margin-bottom: 8px; }
.showcase-card__body p{ font-size: 0.94rem; margin-bottom: 0; }

/* Photo card used to carry the existing red-accent "quote" style copy
   (services page) rather than a heading + paragraph. */
.showcase-card__quote{
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--black);
}
.showcase-card__quote .accent{ display: block; font-weight: 800; }

/* Logos sitting beneath a photo card in the #print section */
.showcase-logos{ margin-top: 24px; }

@media (max-width: 900px){
  .showcase-grid{ grid-template-columns: 1fr; }
  .showcase-card__media img{ height: 200px; }
  .showcase-card--tall .showcase-card__media img{ height: 200px; }
}