/*
 * My Reiki — famiglie “Incontri”, “Sedute terapeutiche” e “Chi siamo”.
 *
 * Page-specific extension of the approved “Cos’è Reiki” visual language.
 * Loaded only when the staging page carries the mr-three-families-page marker.
 */
/* Approved visual language: the same forest, moss, sage and cream system used by “Cos’è Reiki”. */
body,
.family-activities,
.family-treatments,
.family-school {
  --family-accent: var(--moss);
  --family-soft: var(--sage-light);
}

.family-activities .page-hero,
.family-treatments .page-hero,
.family-school .page-hero {
  background:
    radial-gradient(circle at 82% 12%, rgba(167, 193, 148, .2), transparent 34%),
    linear-gradient(145deg, var(--forest-deep), var(--forest));
}
.family-activities .eyebrow,
.family-treatments .eyebrow,
.family-school .eyebrow { color: #c8d8be; }
.family-nav a[aria-current="page"] { background: var(--forest); }
.family-nav > p { background: var(--sage-light); }

.event-fact-strip,
.treatment-focus-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.event-fact-item,
.treatment-focus-card {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center !important;
  min-height: 112px;
  padding: 18px 15px !important;
  border: 1px solid var(--sand);
  border-top: 4px solid var(--moss);
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 10px 28px rgba(33, 53, 43, .06);
}
.event-fact-item .gb-shape,
.treatment-focus-card .gb-shape {
  display: grid !important;
  width: 38px;
  height: 38px;
  padding: 9px !important;
  place-items: center;
  border-radius: 50%;
  color: var(--forest) !important;
  background: var(--sage) !important;
}
.event-fact-item .gb-shape svg,
.treatment-focus-card .gb-shape svg {
  width: 20px !important;
  height: 20px !important;
  color: var(--forest) !important;
}
.event-fact-item h3,
.treatment-focus-card h3 {
  margin: 0 !important;
  font-size: clamp(15px, 1.55vw, 18px) !important;
  line-height: 1.2;
}

.schedule-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(30px, 4.5vw, 44px);
  border: 1px solid #d8e1d4;
  background: linear-gradient(135deg, var(--sage-light), #f8faf6);
}
.schedule-panel::after {
  position: absolute;
  right: -60px;
  bottom: -75px;
  width: 190px;
  height: 190px;
  border: 30px solid rgba(113, 134, 98, .08);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}
.schedule-title {
  display: inline-flex !important;
  margin: 15px 0 10px !important;
  padding: 9px 13px;
  border-radius: 999px;
  color: var(--white) !important;
  background: var(--forest);
  font-size: 15px !important;
  letter-spacing: .01em !important;
}
.schedule-dates {
  position: relative;
  z-index: 1;
  margin: 0 !important;
  padding: 20px 22px !important;
  border: 1px solid var(--sand);
  border-radius: 15px;
  background: rgba(255, 253, 249, .94);
  box-shadow: 0 10px 28px rgba(33, 53, 43, .055);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 720;
}
.free-events-banner { margin-top: -20px; }

.participation-grid,
.online-practice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.participation-overview {
  align-items: start;
  padding: clamp(26px, 4vw, 38px);
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  background: var(--cream);
}
.participation-overview .media-text-copy > h2:first-child { margin-top: 0; }
.participation-panel > .participation-grid { width: 100%; margin-top: 18px; }
.participation-card,
.online-practice-card {
  min-width: 0;
  padding: 24px 22px;
  border: 1px solid var(--sand);
  border-radius: 17px;
  background: var(--white);
  box-shadow: 0 10px 28px rgba(33, 53, 43, .05);
}
.participation-card:nth-child(even),
.online-practice-card:nth-child(even) { background: var(--sage-light); }
.participation-card h2,
.participation-card h3,
.online-practice-card h2,
.online-practice-card h3 { margin-top: 0 !important; font-size: clamp(22px, 2.8vw, 29px) !important; }
.participation-card p:last-child,
.online-practice-card p:last-child { margin-bottom: 0; }
.online-practice-panel { padding: clamp(26px, 4vw, 40px); }
.online-practice-panel .wp-block-embed-youtube { margin: 24px 0; }

.audience-panel {
  padding: clamp(28px, 4vw, 40px);
  border: 1px solid #d8e1d4;
  border-radius: var(--radius);
  background: var(--sage-light);
}
.audience-copy {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-family: var(--serif) !important;
  font-size: 18px !important;
  line-height: 1.8 !important;
}

.benefit-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 24px 0;
}
.benefit-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.benefit-tile,
.benefit-card {
  position: relative;
  min-height: 104px;
  margin: 0 !important;
  padding: 22px 20px 22px 56px !important;
  border: 1px solid var(--sand) !important;
  border-left: 0 !important;
  border-radius: 16px !important;
  background: var(--white) !important;
  box-shadow: 0 10px 26px rgba(33, 53, 43, .05) !important;
  font-family: var(--sans);
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.45 !important;
}
.benefit-tile::before,
.benefit-card::before {
  position: absolute;
  top: 22px;
  left: 19px;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  background: var(--moss);
  content: "✓";
  font: 800 13px/1 var(--sans);
}
.benefit-card {
  padding: 23px !important;
  font-weight: 400;
}
.benefit-card::before { display: none; }
.benefit-card h3 { margin: 0 0 12px !important; padding-left: 36px; font-size: 20px !important; }
.benefit-card h3::before {
  display: inline-grid;
  width: 25px;
  height: 25px;
  margin-left: -36px;
  margin-right: 11px;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  background: var(--moss);
  content: "✓";
  font-size: 12px;
  vertical-align: 2px;
}
.benefit-tile-5 { grid-column: 1 / -1; }
.section-note,
.plane-summary {
  margin-top: 20px !important;
  padding: 18px 20px;
  border-radius: 13px;
  color: var(--ink-soft);
  background: var(--cream);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
}

.process-panel { padding: 0; background: transparent; }
.process-overview {
  padding: clamp(28px, 4.5vw, 44px);
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  background: var(--cream);
}
.process-overview .editorial-media img { min-height: 280px; object-fit: cover !important; }
.booking-panel {
  width: 100%;
  margin-top: 24px;
  padding: clamp(28px, 4.5vw, 42px) !important;
  border: 1px solid #d8e1d4 !important;
  border-radius: var(--radius) !important;
  color: var(--ink) !important;
  background: linear-gradient(135deg, var(--sage-light), var(--white)) !important;
  box-shadow: 0 14px 36px rgba(33, 53, 43, .065);
}
.booking-panel h2,
.booking-panel h3,
.booking-panel h4,
.booking-panel p,
.booking-panel strong,
.booking-panel .gb-text { color: var(--ink) !important; }
.booking-panel > h3:first-child { margin-top: 0 !important; font-size: clamp(27px, 3.6vw, 36px) !important; }
.booking-meta-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 22px 0 !important;
}
.booking-meta-grid > * {
  padding: 16px 18px !important;
  border-radius: 13px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--sand);
}
.booking-steps {
  margin: 24px 0;
  padding: 22px;
  border-radius: 16px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--sand);
}
.booking-steps h4 { margin-top: 0 !important; }
.booking-steps p { position: relative; padding-left: 34px; font-family: var(--sans); font-size: 15px; }
.booking-steps p::before {
  position: absolute;
  left: 0;
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  background: var(--moss);
  content: counter(booking-step);
  font: 750 11px/1 var(--sans);
}
.booking-steps { counter-reset: booking-step; }
.booking-steps p { counter-increment: booking-step; }
.booking-widget-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: 100%;
  margin-top: 18px;
  padding: 24px !important;
  color: var(--white) !important;
  background: var(--forest) !important;
}

.three-planes-panel {
  padding: clamp(30px, 4.5vw, 44px);
  border: 1px solid #d8e1d4;
  background: var(--sage-light);
}
.plane-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}
.plane-card {
  position: relative;
  min-height: 210px;
  margin: 0 !important;
  padding: 64px 20px 22px !important;
  border: 1px solid var(--sand);
  border-radius: 17px;
  background: var(--white);
  box-shadow: 0 10px 28px rgba(33, 53, 43, .055);
  font-size: 16px;
  line-height: 1.65;
}
.plane-card::before {
  position: absolute;
  top: 20px;
  left: 20px;
  color: var(--moss);
  content: "01";
  font: 800 13px/1 var(--sans);
  letter-spacing: .1em;
}
.plane-card-2::before { content: "02"; }
.plane-card-3::before { content: "03"; }
.plane-card strong { display: block; margin-bottom: 7px; color: var(--forest); font-family: var(--sans); font-size: 19px; }
.safety-banner {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
}
.safety-banner::after {
  position: absolute;
  right: -45px;
  bottom: -55px;
  width: 160px;
  height: 160px;
  border: 26px solid rgba(255,255,255,.07);
  border-radius: 50%;
  content: "";
}
.safety-banner p { position: relative; z-index: 1; margin-bottom: 0; }
.safety-banner strong {
  display: inline-block;
  margin: 5px 0;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  font-family: var(--sans);
  font-size: 15px;
}

.limits-panel,
.expectations-panel {
  padding: clamp(28px, 4.5vw, 42px);
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 12px 34px rgba(33, 53, 43, .05);
}
.concept-card-grid,
.holistic-action-grid,
.practice-framework,
.expect-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}
.concept-card-item,
.holistic-action-card,
.practice-framework-item,
.expect-card {
  position: relative;
  min-height: 122px;
  margin: 0 !important;
  padding: 22px 20px 22px 52px !important;
  border: 1px solid var(--sand);
  border-radius: 15px;
  background: var(--sage-light);
  font-size: 16px;
  line-height: 1.62;
}
.concept-card-item::before,
.holistic-action-card::before,
.practice-framework-item::before,
.expect-card::before {
  position: absolute;
  top: 23px;
  left: 19px;
  color: var(--moss);
  content: "•";
  font: 900 26px/1 var(--sans);
}
.concept-card-item:nth-child(3),
.holistic-action-card:nth-child(3),
.expect-card:nth-child(3) { grid-column: 1 / -1; }
.practice-panel { border: 1px solid var(--sand); }
.practice-framework-item { background: var(--white); }
.practice-framework-item--standalone {
  max-width: none;
  margin-top: 14px !important;
  background: var(--white);
}
.holistic-action-card { background: var(--white); }
.expect-card { background: var(--cream); }
.expect-card:nth-child(3) { grid-column: auto; }

.publication-panel {
  padding: clamp(30px, 4.5vw, 44px);
  border: 1px solid #d8e1d4;
  background: linear-gradient(135deg, var(--sage-light), #f8faf6);
}
.publication-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  margin-top: 24px;
}
.publication-card {
  position: relative;
  display: flex !important;
  align-items: center !important;
  min-height: 118px;
  margin: 0 !important;
  padding: 23px 20px 23px 62px !important;
  border: 1px solid var(--sand);
  border-left: 9px solid var(--moss);
  border-radius: 7px 16px 16px 7px;
  background: var(--white);
  box-shadow: 0 10px 26px rgba(33, 53, 43, .06);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 720;
  line-height: 1.45;
}
.publication-card::before {
  position: absolute;
  left: 22px;
  color: var(--moss);
  content: "01";
  font: 800 12px/1 var(--sans);
  letter-spacing: .08em;
}
.publication-card-2::before { content: "02"; }
.publication-card-3::before { content: "03"; }
.publication-card-4::before { content: "04"; }
.publication-card-5::before { content: "05"; }
.publication-card-5 { grid-column: 1 / -1; }

.youtube-media-card {
  border-left-color: var(--moss);
}
.youtube-media-card:hover,
.youtube-media-card:focus-visible { border-color: var(--moss); }
.youtube-media-icon { background: var(--moss); }
.youtube-media-arrow { color: var(--moss); }

/* The live YouTube integration is rendered by YouTube Embed Plus. Keep the
 * native core/embed block and playlist, but present its facade as the compact
 * media card approved in the preview. */
.mr-three-families-page .youtube-card-shell {
  position: relative;
  min-height: 92px;
  margin: 24px 0 30px;
  overflow: hidden;
  border: 1px solid var(--sand);
  border-left: 5px solid var(--moss);
  border-radius: 16px;
  background: linear-gradient(135deg, var(--white), var(--sage-light));
  box-shadow: 0 10px 28px rgba(33, 53, 43, .06);
}
.mr-three-families-page .youtube-card-shell::before,
.mr-three-families-page .youtube-card-shell::after {
  position: absolute;
  left: 88px;
  z-index: 2;
  pointer-events: none;
  font-family: var(--sans);
}
.mr-three-families-page .youtube-card-shell::before {
  top: 24px;
  color: var(--ink);
  content: "Playlist YouTube";
  font-size: 17px;
  font-weight: 750;
  line-height: 1.2;
}
.mr-three-families-page .youtube-card-shell::after {
  top: 51px;
  color: var(--text-muted);
  content: "Avvia la playlist di pratica Reiki";
  font-size: 14px;
  line-height: 1.25;
}
.mr-three-families-page .youtube-card-shell figure,
.mr-three-families-page .youtube-card-shell .wp-block-embed__wrapper,
.mr-three-families-page .youtube-card-shell .epyt-video-wrapper {
  height: 92px !important;
  margin: 0 !important;
}
.mr-three-families-page .youtube-card-shell .wp-block-embed__wrapper::before {
  display: none !important;
  padding: 0 !important;
}
.mr-three-families-page .youtube-card-shell .epyt-facade {
  height: 92px !important;
  min-height: 92px !important;
  padding: 0 !important;
  background: transparent !important;
}
.mr-three-families-page .youtube-card-shell .epyt-facade-poster {
  display: none !important;
}
.mr-three-families-page .youtube-card-shell .epyt-facade-play {
  top: 50% !important;
  left: 24px !important;
  width: 48px !important;
  height: 48px !important;
  margin: -24px 0 0 !important;
  transform: none !important;
}

/* Once Embed Plus replaces its facade with an iframe, release the compact
 * card height and reserve the full video area without changing the embed. */
.mr-three-families-page .youtube-card-shell:has(iframe) {
  min-height: 0;
}
.mr-three-families-page .youtube-card-shell:has(iframe)::before,
.mr-three-families-page .youtube-card-shell:has(iframe)::after {
  display: none;
}
.mr-three-families-page .youtube-card-shell:has(iframe) figure {
  position: relative;
  width: 100%;
  height: auto !important;
  aspect-ratio: 16 / 9;
}
.mr-three-families-page .youtube-card-shell:has(iframe) .wp-block-embed__wrapper,
.mr-three-families-page .youtube-card-shell:has(iframe) .epyt-video-wrapper {
  position: static;
  height: 100% !important;
  padding: 0 !important;
}
.mr-three-families-page .youtube-card-shell iframe {
  position: absolute !important;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  border: 0;
}

/* Yoast keeps the FAQ content and schema authoritative. Style its live output
 * as the clear two-column card grid approved for the page. */
.mr-three-families-page .faq-grid > .schema-faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 4px;
}
.mr-three-families-page .faq-grid .schema-faq-section {
  min-width: 0;
  padding: clamp(20px, 3vw, 26px);
  border: 1px solid var(--sand);
  border-top: 4px solid var(--moss);
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 10px 28px rgba(33, 53, 43, .055);
}
.mr-three-families-page .faq-grid .schema-faq-question:empty {
  display: none;
}
.mr-three-families-page .faq-grid .schema-faq-section > strong:not(:empty) {
  display: block;
  margin-bottom: 10px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 720;
  line-height: 1.35;
}
.mr-three-families-page .faq-grid .schema-faq-answer {
  margin: 0;
}

@media (max-width: 760px) {
  .mr-three-families-page .article-content .event-fact-strip,
  .mr-three-families-page .article-content .treatment-focus-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .mr-three-families-page .article-content .event-fact-item,
  .mr-three-families-page .article-content .treatment-focus-card {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: start;
    min-width: 0;
    min-height: 126px;
    padding: 15px !important;
  }
  .mr-three-families-page .faq-grid > .schema-faq {
    grid-template-columns: minmax(0, 1fr);
  }
  .mr-three-families-page .youtube-card-shell::before,
  .mr-three-families-page .youtube-card-shell::after {
    left: 78px;
  }
  .mr-three-families-page .youtube-card-shell::after {
    max-width: calc(100% - 94px);
  }
  .mr-three-families-page .youtube-card-shell .epyt-facade-play {
    left: 18px !important;
  }
  .benefit-grid,
  .benefit-grid--four,
  .participation-grid,
  .online-practice-grid,
  .plane-grid,
  .concept-card-grid,
  .holistic-action-grid,
  .practice-framework,
  .expect-grid,
  .publication-grid,
  .booking-meta-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .benefit-tile-5,
  .concept-card-item:nth-child(3),
  .holistic-action-card:nth-child(3),
  .expect-card:nth-child(3),
  .publication-card-5 { grid-column: auto; }
  .plane-card { min-height: 0; }
  .process-panel { padding: 0; }
  .process-overview,
  .booking-panel,
  .limits-panel,
  .expectations-panel,
  .publication-panel,
  .online-practice-panel { padding: 23px 19px !important; }
  .process-overview .editorial-media img { min-height: 220px; }
  .booking-widget-shell { grid-template-columns: minmax(0, 1fr); }
  .booking-widget-shell button { width: 100%; }
  .publication-card { min-height: 100px; }
}

/* Treatment page: keep whole words and reserve space for step markers. */
.family-treatments:has(.treatment-focus-grid) .page-hero h1 {
  font-size: clamp(34px, 4.2vw, 60px);
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.mr-three-families-page .article-content .treatment-focus-card {
  grid-template-columns: minmax(0, 1fr) !important;
  min-width: 0;
  padding: 16px 10px !important;
}
.mr-three-families-page .treatment-focus-card > div,
.mr-three-families-page .treatment-focus-card h3 {
  min-width: 0;
  width: 100%;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.mr-three-families-page .treatment-focus-card h3 {
  font-size: 15px !important;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.mr-three-families-page .booking-steps p {
  display: block !important;
  padding: 18px 16px 18px 54px !important;
}
.mr-three-families-page .booking-steps p::before {
  left: 16px;
  top: 20px;
}
@media (max-width: 360px) {
  .mr-three-families-page .article-content .treatment-focus-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}