/* INK App case study — transcribed from Elementor post-4648.css */

/* ---- hero ------------------------------------------------------------ */
.ink-hero { background-color: #FF9D9C; }
.ink-hero-cols { margin-top: 30px; margin-bottom: 30px; }
.ink-title {
  margin: 0;
  padding: 0;
  font-family: Lato, sans-serif;
  font-size: 72px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-shadow: 4px 14px 7px rgba(206, 82, 78, 0.5);
  color: #272b2b;
  line-height: 1;
}
.ink-sub { margin-bottom: 0; }
.ink-intro { padding-top: 10px; }

/* ---- buttons (Elementor size-sm, bob hover animation) ---------------- */
.ink-button {
  background-color: #8B8EE8;
  line-height: 1;
  min-height: 40px;
}
.ink-button:hover,
.ink-button:focus {
  background-color: #656AD3;
  color: #fff;
}

/* ---- section scaffolding --------------------------------------------- */
.ink-gray { background-color: #F8F8F8; }
.ink-headrow { margin-top: 50px; margin-bottom: 50px; }
.ink-h2 {
  margin: 0;
  padding: 0;
  font-family: Lato, sans-serif;
  font-size: 28px;
  font-weight: 300;
  color: #222222;
  line-height: 1;
}
.ink-divider { width: 50%; border-top: 3px solid #29CECE; }
.ink-spacer { height: 50px; }
/* Elementor populated-column right margin (20px) + 10px column padding */
.ink-gapr { padding-right: 30px; }
.ink-mt20 { margin-top: 20px; }
.ink-col-center { justify-content: center; }

/* text-editor lists (theme defaults: ul padding-left 20px, li 5px apart) */
.ink-app-text ul { margin: 0 0 10px; padding: 0 0 0 20px; }
.ink-app-text li { margin-bottom: 5px; }

/* ---- teal callout band (full-width section, 30/40/30 columns) -------- */
.ink-callout-col { width: 39.912%; }
.ink-callout-side { width: 30%; padding: 0; }
.ink-callout { background-color: #29CECE; }
.ink-callout-h {
  margin: 0;
  padding: 0;
  font-family: Lato, sans-serif;
  font-size: 28px;
  font-weight: 300;
  color: #FFFFFF;
  line-height: 1;
  text-align: center;
}
.ink-callout-text { text-align: center; color: #FFFFFF; }

/* ---- icon widget (Elementor default view, 50px) ----------------------- */
.ink-icon-wrap { text-align: center; }
.ink-icon {
  display: inline-block;
  font-size: 50px;
  line-height: 1;
  text-align: center;
}
.ink-icon svg { display: block; width: 1em; height: 1em; fill: currentColor; }
.ink-c-white { color: #FFFFFF; }
.ink-c-orange { color: #FF6308; }
.ink-c-gold { color: #E5A804; }
.ink-c-olive { color: #A4BD3E; }
.ink-c-teal { color: #66CCCC; }

/* planned-feature headings (p.elementor-heading-title, kit weight 600) */
.ink-feature-h {
  margin: 0;
  padding: 0;
  font-family: Lato, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

/* ---- usability-testing pull quotes ------------------------------------ */
.ink-quote-wrap { margin-left: 20px; margin-right: 20px; }
.ink-quote {
  margin: 0;
  padding: 0;
  font-family: Lato, sans-serif;
  font-size: 28px;
  font-weight: 300;
  line-height: 1.6em;
  text-align: center;
}
.ink-q-coral { color: #FF616F; }
.ink-q-iris { color: #8B8EE8; }
.ink-q-teal { color: #29CECE; }
.ink-attrib { text-align: center; margin-bottom: 0; }
.ink-a-coral { color: #FF616F; }
.ink-a-periwinkle { color: #8F9BFF; }
.ink-a-teal { color: #29CECE; }

/* ---- image cards (10px margins + soft shadow) ------------------------- */
.ink-card {
  margin: 10px;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
}
.ink-card a { display: block; }
.ink-card img { display: block; width: 100%; height: auto; }

/* ---- video widget (image overlay + lightbox, like Elementor) ---------- */
.ink-video-overlay {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  aspect-ratio: 1.77777;
  overflow: hidden;
}
.ink-video-overlay img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.ink-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  opacity: 0.8;
  transition: all 0.5s;
}
.ink-video-overlay:hover .ink-video-play,
.ink-video-overlay:focus .ink-video-play { opacity: 1; }
.ink-video-play svg {
  display: block;
  width: 100px;
  height: 100px;
  fill: currentColor;
  filter: drop-shadow(1px 0 6px rgba(0, 0, 0, 0.3));
}

.ink-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.8);
}
.ink-lightbox[hidden] { display: none; }
.ink-lightbox-frame {
  width: min(90vw, calc((100vh - 120px) * 1.77777));
  aspect-ratio: 16 / 9;
  background: #000;
}
.ink-lightbox-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.ink-lightbox-close {
  position: absolute;
  top: 10px;
  right: 18px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.8;
}
.ink-lightbox-close:hover { opacity: 1; }

/* ---- shape dividers (Elementor bottom waves) --------------------------- */
.ink-shape {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  direction: ltr;
  pointer-events: none;
}
.ink-shape svg {
  display: block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% + 1.3px);
}
/* bottom shape with data-negative="false" is rotated 180deg by Elementor */
.ink-shape--flip { transform: rotate(180deg); }
.ink-shape path { fill: #FFFFFF; }

/* ---- responsive -------------------------------------------------------- */
@media (max-width: 767px) {
  .ink-divider { width: 90%; }
  .ink-callout-side { display: none; }
}