/* --- Layout: 3 columns with dividers --- */
.services-row{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:20px;
  width:80%;
  margin-top:40px;
  margin-bottom: 2px;
  flex-wrap:wrap;
}
.service-col{
  flex:1;
  min-width:200px;
  background:transparent;
  display:flex;
  justify-content:center;
  align-items:center;
}
/* 1) Give the placeholder a stable, responsive height */
.placeholder{
  width:100%;
  min-height:200px;
  height:auto;
  border:0px dashed rgba(255,255,255,0.5);
  border-radius:4%;
  display:flex;
  justify-content:center;
  font-size:1.1rem;
  text-align:center;
  padding:0;
  align-items:flex-start;
  overflow:hidden;
}

.placeholder--demo{
  position: relative;
  height: clamp(300px, 40vw, 460px);
  min-height: clamp(300px, 40vw, 460px);
  max-width: 640px;     /* pick a width you like (420–720px) */
  width: 90%;
  margin: 0 auto;       /* now this actually centers */
  display: flex;
  justify-content: center;  /* centers inner content */
  align-items: center;      /* vertical centering of content */
  

}

.divider{
  width:2px;height:150px;
  background:linear-gradient(to bottom,rgba(255,255,255,.2),rgba(255,255,255,.8),rgba(255,255,255,.2));
  align-self:center;
}
@media (max-width:768px){
  .services-row{flex-direction:column;align-items:center;}
  .divider{width:60%;height:2px;margin:15px 0;}
}

/* --- Cards (left/right) --- */
.info-card-left,
.info-card-right{
  width:var(--side-w,420px);
  height:auto;                  /* let content define height */
  border-radius:16px;
  background:#F8F7F0;
  box-shadow:0 0 0 1px rgba(0,0,0,.06) inset;
  padding:22px 18px;
  font-family:"Arsenal SC",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  text-align:left;
}
.info-card-left{display:flex;flex-direction:column;align-items:center;}
.info-card-right{display:grid;grid-template-rows:auto auto 1fr;justify-items:center;align-items:start;}

.placeholder > .info-card-left,
.placeholder > .info-card-right{
  width:100%;
  max-width:420px;
  margin:0 auto;
}

/* --- Icon circle + pill --- */
.icon-circle{
  width:72px;height:72px;border-radius:50%;background:#fff;
  display:grid;place-items:center;margin:0 auto 1rem;position:relative;overflow:hidden;
}
.icon-circle picture,.icon-circle img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;}
.pill{background:#b8c3b3;color:#0a1f23;padding:.6rem 1rem;border-radius:999px;font-weight:500;margin-bottom:1rem;display:inline-block;}

/* --- Copy --- */
.info-copy{
  font-family:'Arsenal SC',sans-serif;
  font-size:.9rem;
  line-height:1.6;              /* single, non-duplicated line-height */
  color:#070707;
}

.info-copy-suggestions{
  font-family:'Arsenal SC',sans-serif;
  font-size:.9rem;
  line-height:1.6;              /* single, non-duplicated line-height */
  color:#FFFFFF;
}

/* Style for the contact form hyperlink */
.info-copy-suggestions a {
  color: #FFFFFF;            /* white text */
  font-weight: 800px;         /* bold */
  text-decoration: underline;     /* remove underline */
  transition: text-decoration 0.2s ease, color 0.2s ease;
}

.info-copy-suggestions a:hover {
  text-decoration: underline; /* show underline on hover */
  color: #f2c078;            /* white text */
}


/* --- Placeholder 2 (image stack + video) --- */
/* 2) Make the inner ph2 layer occupy the placeholder fully */
.placeholder .ph2{
  position:static;
  inset: auto;
  display: block;
  width:100%;
  /*min-height:320px;*/
  min-height: initial;
  padding-top:0px;             /* reserves room for the heading */
  padding-bottom: 10px;           
}
.placeholder--demo .ph2{
  position: absolute;
  inset: 0;
  display: block;
}
/* Heading on top (no conflicting position) */
.placeholder .ph2-heading{
  position:absolute;
  top:16px; left:50%;
  transform:translateX(-50%);
  text-align:center;
  font-family:'Arsenal SC',sans-serif;
  font-size:1.4rem;
  color:#fff;
  letter-spacing:.5px;
  z-index:10;
  padding:0 10px;
  white-space:nowrap;
}

/* Image stack centered */
.placeholder .ph2-stack{
  position:absolute;
  left:0; right:0; top:72px; bottom:10px;   /* respects container padding-top */
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:16px;padding:16px;
  padding-bottom: 10px;       
}

/* Thumbnails with consistent rounding */
.placeholder .ph2-thumb{
  display:block;
  width:min(220px,92%);
  height:min(360px,100%);
  aspect-ratio:16/9;
  object-fit:contain;
  border-radius:20px;
  cursor:pointer;
  padding-bottom: 20px;       
}

/* Video fills the placeholder */
/* make video occupy normal flow so ph2 resizes automatically */
.placeholder--demo .ph2-video{
  position: absolute;
  inset: 0;
  display: none;
}

/* 4) The actual <video> fills the overlay */
.placeholder--demo .ph2-video video{
  width: 100%;
  height: 100%;
  /*height: auto; */           /* keep aspect ratio */
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border-radius: 8px;
}

/* show the selected video; hide stack + heading while targeted */
#ph2-video-grace:target,
#ph2-video-kazit:target{ display: block; }

#ph2-video-grace:target ~ .ph2-stack,
#ph2-video-kazit:target ~ .ph2-stack{ display: none; }

#ph2-video-grace:target ~ .ph2-heading,
#ph2-video-kazit:target ~ .ph2-heading{ display: none; }

/* small screens */
@media (max-width: 768px){
  .placeholder--demo .ph2-video video{ border-radius: 8px; }
}
.placeholder--demo .ph2-back{
  position:absolute;top:10px;right:10px;padding:6px 10px;
  text-decoration:none;border-radius:999px;background:rgba(0,0,0,.35);color:#fff;backdrop-filter:blur(2px);
  z-index: 2; /* Optional: ensure the Back button sits above the video */
}

/* Toggle: show video, hide images when targeted */
/*#ph2-video:target{display:block;}*/
/*#ph2-video:target + .ph2-stack{display:none;}*/

/*Hide heading when the video opens*/
/*#ph2-video:target ~ .ph2-heading{ display:none; }*/

/* 1) Hide the duplicate heading that appears before the videos */
.ph2 .ph2-heading:first-of-type{ display:none; }

/* Responsive tweaks */
@media (max-width:1200px){ .placeholder > .info-card-left{ --side-w:360px; } }
@media (max-width:992px){  .placeholder > .info-card-left{ --side-w:320px; } }
@media (max-width:768px){
  .placeholder > .info-card-left{ --side-w:100%; }
  .placeholder .ph2{ min-height:260px; padding-top:48px; }
  .placeholder .ph2-heading{ font-size:1.1rem; white-space:normal; width:90%; }
  .placeholder .ph2-thumb{ width:95%; border-radius:20px; } /* keep 20px on mobile */
  .placeholder .ph2-stack{ 
    top: 64px; 
  }
}

#ph2 { scroll-margin-top: var(--header-offset, 70px); }

/* Like/Dislike bar under a card */
.rating-bar{
  display:flex;
  justify-content:center;
  gap:16px;
  margin-top:10px;      /* sits just below the placeholder */
}

.rate-btn{
  display:flex;
  align-items:center;
  gap:6px;
  background: transparent;
  border: 0;
  color: #FFFFFF !important;       /* icon + text color */
  /* border: 1px solid #ddd; */       /* optional thin border */
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s, transform .05s;
}

/* optional: tweak icon size/spacing */
.rate-btn i {
  font-size: 1rem;
}

.rate-btn:hover{ background: rgba(255,255,255,.08); }
.rate-btn:active{ transform: scale(.98); }
.rate-btn svg{ display:block; }

.rate-btn.active{ background: rgba(255,255,255,.16); }
.rate-btn.dislike.active{ background: rgba(255,0,0,.12); }

.rate-btn .count{ font-size: .95rem; line-height: 1; }

/* Responsive */
@media (max-width: 768px){
  .rating-bar{ gap:12px; }
  .rate-btn{ padding: 6px 8px; }
}

/* Groupbox wrapper for like/unlike area */
.rating-box{
  width: 100%;
  max-width: 260px;            /* keeps it compact so layout isn't distorted */
  margin: 0 auto;              /* center inside each service-col */
  display: flex;
  justify-content: center;
}

/* Fieldset styled as "Your count matters" groupbox */
.rating-group{
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 12px;
  padding: 10px 12px 14px;
  width: 100%;
  text-align: center;
}

/* Legend title */
.rating-group legend{
  padding: 0 8px;
  font-family: 'Arsenal SC', sans-serif;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Optional: tighten the placeholder text inside the box */
.rating-group .info-copy{
  margin-bottom: 8px;
}

/* On small screens, let the groupbox stretch a bit */
@media (max-width: 768px){
  .rating-box{
    max-width: 320px;
  }
}

/* Message under each rating box */
.vote-message {
  margin-top: 6px;
  min-height: 1.2em;              /* keeps layout stable even when empty */
  font-size: 0.85rem;
  text-align: center;
}

/* Success and error colors – still readable on dark backgrounds */
.vote-message.success {
  color: #b9ffc9;                 /* soft green */
}

.vote-message.error {
  color: #ffb3b3;                 /* soft red */
}

/* Visually disabled buttons after voting */
.rate-btn.disabled {
  opacity: 0.5;
  pointer-events: none;
}


/* --- override: 20px corner radius on info cards --- */
.info-card-left,
.info-card-right{
  border-radius:20px;
}

.thinking-lab-badge {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6f7c83; /* muted, not CTA */
  margin-bottom: 6px;
}
.thinking-lab-badge::before {
  content: "• ";
  color: #f2c078; /* your accent */
}