/* ============================================================
   PHOTOS + BACKGROUND TOUCHES (added on top of the existing design)
   No changes to colours, type, layout or wording — only photos and
   subtle decorations. Photos: Unsplash License (free).
   ============================================================ */

/* Homepage: three-photo violin strip */
.photo-strip {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 10px;
  padding: clamp(28px, 4vw, 48px) var(--side-pad) clamp(40px, 6vw, 72px);
  max-width: var(--content-max);
  margin: 0 auto;
}
.photo-strip img {
  width: 100%;
  height: clamp(160px, 22vw, 300px);
  object-fit: cover;
  border-radius: var(--r-lg);
  display: block;
}
@media (max-width: 680px) {
  .photo-strip { grid-template-columns: 1fr 1fr; }
  .photo-strip img:first-child { grid-column: 1 / -1; }
  .photo-strip img { height: 160px; }
}

/* Homepage: lesson cards get a photo on top (text and links unchanged) */
.offer-card { overflow: hidden; }
.offer-photo {
  display: block;
  height: 150px;
  margin: calc(-1 * clamp(24px, 3vw, 36px)) calc(-1 * clamp(24px, 3vw, 36px)) 20px;
  background-size: cover;
  background-position: center;
}

/* Homepage: faint music-staff lines behind the method section */
.section-method { position: relative; overflow: hidden; }
.section-method::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 38%;
  height: 74px;
  background: repeating-linear-gradient(to bottom, rgba(28, 56, 41, 0.07) 0 1px, transparent 1px 18px);
  pointer-events: none;
}
.section-method > * { position: relative; }

/* Homepage + About: soft forest glow in the corner of the final call-to-action */
.section-cta { position: relative; overflow: hidden; }
.section-cta::before {
  content: '';
  position: absolute;
  width: 520px; height: 520px;
  right: -180px; top: -200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(106, 173, 130, 0.22), transparent 65%);
  pointer-events: none;
}
.section-cta > * { position: relative; }

/* Inner page headers: faint concentric rings on the right */
.page-hero { position: relative; overflow: hidden; }
.page-hero::after {
  content: '';
  position: absolute;
  right: -90px; bottom: -110px;
  width: 300px; height: 300px;
  border-radius: 50%;
  border: 1px solid rgba(245, 240, 230, 0.16);
  box-shadow: 0 0 0 34px rgba(245, 240, 230, 0.04), 0 0 0 72px rgba(245, 240, 230, 0.03);
  pointer-events: none;
}

/* About: two photos before the principles */
.photo-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: var(--content-max);
  margin: clamp(32px, 5vw, 64px) auto;
  padding: 0 var(--side-pad);
}
.photo-duo img { width: 100%; height: clamp(200px, 28vw, 380px); object-fit: cover; border-radius: var(--r-lg); display: block; }
@media (max-width: 560px) { .photo-duo img { height: 180px; } }

/* Contact: photo at the top of the info column */
.contact-photo {
  display: block;
  width: 100%;
  height: clamp(160px, 18vw, 220px);
  object-fit: cover;
  border-radius: var(--r-lg);
  margin-bottom: 28px;
}