/* ==========================================================================
   Namogoo Design System — case study
   ========================================================================== */

/* ---------- Shared building blocks ---------- */
.cs-section { padding: 48px 0; background: var(--c-white); }
.cs-section--gray { background: var(--c-gray-100); }
.cs-section p { margin: 0; }

.cs-list { margin: 0 0 21px 42px; padding: 0; }
.cs-list ul { margin: 0 0 0 21px; padding: 0; list-style: disc; }

/* ---------- Intro ---------- */
.cs-intro { margin-top: 80px; padding: 48px 0; }
.cs-intro__inner { display: flex; flex-direction: column; gap: 40px; }

.cs-intro__head { display: flex; align-items: flex-start; gap: 24px; padding: 10px; margin-bottom: -24px; }
.cs-intro__title { flex: 1 1 100%; display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.cs-intro__title h1 { font-size: 24px; }
.cs-intro__title .cs-intro__lede { margin: 0 0 22.4px; color: var(--c-text); }

.cs-meta { flex: 1 1 80%; display: flex; justify-content: flex-end; align-items: flex-start; gap: 40px; margin: 0; padding: 10px; }
.cs-meta__item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 10px; }
.cs-meta dt { margin-bottom: 19.2px; font-size: 12px; font-weight: 700; line-height: 1.2; color: var(--c-text); }
.cs-meta dd { margin: 0 0 22.4px; color: var(--c-navy); }
.cs-meta dd.cs-meta__logo { margin: 0; line-height: 16.8px; }
.cs-meta__logo a { display: inline; }
.cs-meta__logo img { display: inline-block; vertical-align: middle; max-width: 100%; height: auto; }

.cs-intro__hero { width: 100%; }

.cs-summary { display: flex; justify-content: space-evenly; align-items: stretch; gap: 24px; padding: 10px; }
.cs-summary__card {
  flex: 1 1 0; min-width: 0; min-height: 160px; display: flex; flex-direction: column; gap: 8px;
  padding: 24px; border-radius: 8px; background: var(--c-gray-100);
}
.cs-summary__card p { margin-bottom: 22.4px; }
.cs-summary__card .cs-summary__label { margin-bottom: 19.2px; font-size: 12px; font-weight: 700; color: var(--c-text); }

.cs-video { aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; }
.cs-video iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------- Kickoff ---------- */
.cs-kickoff__inner { display: flex; gap: 24px; }
.cs-kickoff__text, .cs-kickoff__media { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; padding: 10px; }
.cs-kickoff__text { justify-content: center; align-items: flex-start; }
.cs-prose p { margin-bottom: 22.4px; }
.cs-prose p:last-child { margin-bottom: -1.6px; }
.cs-kickoff__media { justify-content: center; align-items: center; margin: 0; }
.cs-kickoff__media > img { width: 100%; }
.cs-kickoff__media figcaption { padding: 10px; text-align: center; }
.cs-kickoff__media figcaption p { margin-bottom: 6px; color: var(--c-text); }
.cs-kickoff__media figcaption img { width: 130px; margin: 0 auto; }

/* ---------- Centered heading + image (Synthesize, Industry analysis) ---------- */
.cs-centered__inner { display: flex; flex-direction: column; gap: 24px; }
.cs-centered__head { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px; text-align: center; }
.cs-centered__head p { margin-bottom: 1.4px; }
.cs-centered__media { display: flex; justify-content: center; padding: 10px; }
.cs-centered__media img { max-width: 100%; }

/* ---------- Our Vision ---------- */
.cs-vision { background: var(--c-navy); color: var(--c-white); }
.cs-vision__inner { display: flex; flex-direction: column; gap: 24px; }
.cs-vision h2 { color: var(--c-white); text-align: center; }
.cs-pillars, .cs-quotes { display: flex; justify-content: center; align-items: flex-start; gap: 48px; padding: 10px; }
.cs-pillar, .cs-quote { flex: 0 0 25%; display: flex; flex-direction: column; align-items: center; padding: 10px; margin: 0; text-align: center; }
.cs-pillar { gap: 24px; }
.cs-pillar__icon svg { width: 72px; height: 72px; margin-bottom: 5px; }
.cs-pillar__text, .cs-quote__text { align-self: stretch; display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.cs-pillar__text h3 { font-family: var(--f-body); font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--c-white); }

/* ---------- Before / after comparisons ---------- */
.cs-compare__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px; }
.cs-compare__inner .cs-compare__quote { margin-bottom: 1.4px; }
.cs-compare__top { align-self: stretch; display: flex; align-items: center; gap: 80px; padding: 10px; }
.cs-compare__collage, .cs-compare__notes { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; padding: 10px; }
.cs-compare__collage img { width: 100%; }
.cs-compare__notes { gap: 40px; }

.cs-note { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 24px; border-radius: 8px; background: var(--c-gray-100); }
.cs-section--gray .cs-note { background: var(--c-white); }
.cs-note .cs-note__title { margin-bottom: 6.4px; font-weight: 700; }

.cs-panel {
  align-self: stretch; display: flex; justify-content: center; align-items: flex-start; gap: 24px;
  padding: 24px 32px 32px; border-radius: 8px; background: var(--c-navy); color: var(--c-white);
}
.cs-panel__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 10px; text-align: center; }
.cs-panel__col h3 { margin-bottom: 4.8px; font-size: 18px; font-weight: 400; line-height: 1.2; color: var(--c-white); }
.cs-panel__col p { margin-bottom: 22.4px; }

/* Image that opens in a lightbox (Elementor lightbox equivalent, using the native Popover API) */
.cs-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.cs-zoom img { width: 100%; }
.cs-zoom:focus-visible { outline: 2px solid var(--c-white); outline-offset: 2px; }

.cs-lightbox {
  position: fixed; inset: 0; margin: auto; padding: 0; border: 0; overflow: visible;
  width: fit-content; height: fit-content; max-width: calc(100vw - 40px); max-height: calc(100vh - 100px);
  background: transparent; opacity: 0;
  transition: opacity .3s, overlay .3s allow-discrete, display .3s allow-discrete;
}
.cs-lightbox:popover-open { opacity: 1; }
@starting-style { .cs-lightbox:popover-open { opacity: 0; } }
.cs-lightbox::backdrop { background: rgba(19, 31, 60, .83); }
.cs-lightbox > img {
  display: block; width: auto; max-width: calc(100vw - 40px); max-height: calc(100vh - 100px);
  box-shadow: 0 0 30px rgba(0, 0, 0, .3), 0 0 8px -5px rgba(0, 0, 0, .3);
}
.cs-lightbox__close {
  position: fixed; top: 15px; right: 15px; width: 30px; height: 30px; padding: 3px;
  border: 0; background: none; color: rgba(238, 238, 238, .9); cursor: pointer; transition: color .3s;
}
.cs-lightbox__close:hover, .cs-lightbox__close:focus-visible { color: #fff; }
.cs-lightbox__close svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; }

/* ---------- Feedback ---------- */
.cs-feedback__inner, .cs-more__inner { display: flex; flex-direction: column; gap: 24px; }
.cs-feedback h2 { text-align: center; }
.cs-quote { gap: 8px; }
.cs-quote__avatar svg { width: 120px; height: 120px; margin-bottom: 5px; }
.cs-quote blockquote { margin: 0; }
.cs-quote figcaption { font-weight: 700; }

/* ---------- More projects ---------- */
.cs-more__inner { gap: 32px; }
.cs-projects { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.cs-project {
  flex: 1 1 40%; min-height: 400px; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  padding: 20px; border: 1px solid var(--c-accent); border-radius: 8px;
  background: center / cover no-repeat; transition: all .3s ease-in-out;
}
.cs-project:hover, .cs-project:focus-visible { transform: scale(1.03); }
.cs-project--namogoo { background-image: url("/assets/uploads/2024/01/Namogoo-cover-image-1.jpg"); }
.cs-project--voiceitt { background-image: url("/assets/uploads/2024/01/Voiceitt-background-no-border.jpg"); }
.cs-project__info { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; padding: 10px; }
.cs-project__title { display: block; margin-bottom: 20px; font-family: var(--f-head); font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--c-navy); }
.cs-project__lock { flex: 0 0 auto; margin-right: -8px; line-height: 0; }
.cs-project__lock svg { width: 50px; height: 50px; }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .cs-project { padding: 16px; }
  .cs-pillar, .cs-quote { flex: 1 1 0; min-width: 0; max-width: 280px; }
}

/* Tablet only: stack the title above the meta row so labels and values never break mid-word */
@media (min-width: 768px) and (max-width: 1024px) {
  .cs-intro__head { flex-direction: column; align-items: stretch; }
  .cs-intro__title, .cs-meta { flex: none; }
  .cs-meta { justify-content: flex-start; }
  .cs-meta__item { flex: 0 1 200px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .cs-intro__head { flex-direction: column; align-items: stretch; }
  .cs-intro__title, .cs-meta { flex: none; }
  .cs-meta { flex-direction: column; align-items: stretch; }
  .cs-meta__item { flex: none; }

  .cs-summary { flex-direction: column; }
  .cs-summary__card { flex: none; width: 90%; }

  .cs-kickoff__inner, .cs-compare__top, .cs-panel, .cs-pillars, .cs-quotes, .cs-projects { flex-direction: column; }
  .cs-kickoff__text, .cs-kickoff__media, .cs-compare__collage, .cs-compare__notes, .cs-panel__col { flex: none; width: 100%; }
  .cs-pillar, .cs-quote { flex: none; width: 100%; max-width: none; }
  .cs-compare__top { align-items: stretch; gap: 48px; }
  .cs-panel { align-items: stretch; }
  .cs-projects { align-items: stretch; }
  .cs-project { flex: none; }
  .cs-project:hover, .cs-project:focus-visible { transform: none; }
}