/**
 * Photo placeholder blocks , Bourne Builders
 * Used wherever real photos will be uploaded later.
 * Styled to clearly indicate the space, ratio, and expected content.
 */

.photo-placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ratio, 16 / 9);
  background-color: var(--color-photo-bg);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Inner content */
.photo-placeholder__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-photo-icon);
  pointer-events: none;
  user-select: none;
}

.photo-placeholder__inner svg {
  width: 40px;
  height: 40px;
  opacity: 0.7;
}

.photo-placeholder__inner span {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  opacity: 0.8;
}

/* Subtle grain texture via pseudo-element */
.photo-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}

/* Ratio variants */
.photo-placeholder--hero      { aspect-ratio: 16 / 7; }
.photo-placeholder--wide      { aspect-ratio: 16 / 6; }
.photo-placeholder--landscape { aspect-ratio: 4 / 3; }
.photo-placeholder--square    { aspect-ratio: 1 / 1; }
.photo-placeholder--portrait  { aspect-ratio: 3 / 4; }
.photo-placeholder--boat-card { aspect-ratio: 3 / 2; }

/* Dark variant , for sections with dark backgrounds */
.photo-placeholder--dark {
  background-color: var(--color-navy-mid);
}

.photo-placeholder--dark .photo-placeholder__inner {
  color: rgba(247, 244, 239, 0.35);
}

/* Full-bleed variant , fills its container with no border-radius */
.photo-placeholder--fill {
  border-radius: 0;
  height: 100%;
  aspect-ratio: auto;
}

/* ── Specific photo zones ─────────────────────────────────────────────────── */

/* Hero background photo zone */
.hero-photo-zone {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-photo-zone .photo-placeholder {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}

/* Section background photo zone */
.section-bg-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.section-bg-photo .photo-placeholder {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}

/* Boat card thumbnail */
.boat-card__image-zone {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.boat-card__image-zone .photo-placeholder {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}

/* Partner section image */
.partner-image-zone {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 400px;
}

.partner-image-zone .photo-placeholder {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: var(--radius-lg);
}

/* About / team member photo */
.team-photo-zone {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-md);
}

/* Craftsmanship strip background */
.craftsmanship-bg-zone {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.craftsmanship-bg-zone .photo-placeholder {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}

/* Page-hero interior banner */
.page-hero__image-zone {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.page-hero__image-zone .photo-placeholder {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}

/* Gallery grid */
.gallery-photo-zone {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-md);
}

/* About page feature image */
.about-feature-zone {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg);
}