/* ==========================================================================
   Hotelzzz case study (/hotelzzz/)
   Measurements mirror the original Elementor layout (1140px content box).
   ========================================================================== */
.page-hotelzzz main p { margin: 0; }
.page-hotelzzz main img { width: 100%; }

.hz-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Generic sections / headings ---------- */
.hz-section { padding: 48px 0; background: var(--c-white); }
.hz-section--gray { background: var(--c-gray-100); }
.hz-section--navy { background: var(--c-navy); }
.hz-section > .container { display: flex; flex-direction: column; gap: 32px; }
.hz-section--tight > .container { gap: 24px; }

.hz-h2 { font-family: var(--f-head); font-size: 22px; font-weight: 600; line-height: 1.2; color: var(--c-navy); }
.hz-h2--center { text-align: center; }
.hz-section--navy .hz-h2 { color: var(--c-white); }
.hz-h3 { font-family: var(--f-head); font-size: 18px; font-weight: 400; line-height: 1.2; color: var(--c-navy); }

.hz-label {
  font-family: var(--f-body); font-size: 12px; font-weight: 700; line-height: 1.2;
  color: var(--c-text); margin-bottom: 19.2px;
}

/* ---------- Hero ---------- */
.hz-hero { padding: 156px 0 48px; }
.hz-hero__inner { display: flex; flex-direction: column; gap: 40px; }
.hz-hero__top {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  padding: 10px; margin-bottom: -24px;
}
.hz-hero__title { flex: 625 1 0; min-width: 0; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.hz-hero__title h1 { font-size: 24px; font-weight: 600; line-height: 1.2; }
.page-hotelzzz main .hz-hero__subtitle { color: var(--c-text); margin-bottom: 22.4px; }
.hz-hero__meta { flex: 471 1 0; min-width: 0; display: flex; justify-content: flex-end; gap: 40px; padding: 10px; margin: 0; }
.hz-hero__meta > div { flex: 1 1 0; min-width: 0; padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.hz-hero__meta dt { font-size: 12px; font-weight: 700; line-height: 1.2; color: var(--c-text); margin-bottom: 19.2px; }
.hz-hero__meta dd { margin: 0 0 22.4px; font-size: 14px; line-height: 1.2; color: var(--c-navy); }

.hz-summary {
  display: flex; justify-content: space-evenly; align-items: center; gap: 24px;
  padding: 10px;
}
.hz-summary__card {
  flex: 1 1 0; min-width: 0; min-height: 220px; padding: 24px; border-radius: 8px;
  background: var(--c-gray-100); display: flex; flex-direction: column; gap: 8px;
}
.page-hotelzzz main .hz-summary__card p { margin-bottom: 22.4px; line-height: 1.2; }

/* ---------- Icon rows (Problem Definition, Key Qualitative Insights) ---------- */
.hz-icon-row { display: flex; justify-content: center; align-items: flex-start; gap: 48px; padding: 10px; }
.hz-icon-item { width: 25%; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.hz-icon-item__icon { display: block; height: 77px; }
.hz-icon-item__svg { width: 72px; height: 72px; }
.hz-icon-item__text {
  width: 100%; padding: 10px; display: flex; flex-direction: column; gap: 8px;
  text-align: center; color: var(--c-white); line-height: 1.2;
}
.page-hotelzzz main .hz-icon-item__text > * { margin-bottom: .4px; }
.hz-icon-item__text h3 { font-family: var(--f-body); font-size: 14px; font-weight: 700; color: var(--c-white); }

/* ---------- Research goals + accordion ---------- */
.hz-goals { display: flex; justify-content: flex-start; align-items: center; gap: 80px; padding: 10px; }
.hz-goals__media { width: 33%; padding: 10px; }
.hz-goals__list { width: 50%; padding: 10px; }

.hz-acc { display: flex; flex-direction: column; gap: 16px; interpolate-size: allow-keywords; }
.hz-acc__title {
  display: flex; align-items: center; gap: 10px; padding: 16px;
  background: var(--c-white); border: 1px solid var(--c-gray-200); border-radius: 8px;
  font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--c-navy);
  cursor: pointer; list-style: none; transition: border-color .3s;
}
.hz-acc__title::-webkit-details-marker { display: none; }
.hz-acc__title:hover { border-color: var(--c-accent); }
.hz-acc__icon { flex: none; display: flex; width: 12px; height: 12px; color: var(--c-text); }
.hz-acc__icon svg { width: 12px; height: 12px; fill: currentColor; }
.hz-acc__minus, .hz-acc__item[open] .hz-acc__plus { display: none; }
.hz-acc__item[open] .hz-acc__minus { display: block; }
.hz-acc__item[open] > .hz-acc__title, .hz-acc__item[open] .hz-acc__icon { color: #1f2124; }
.hz-acc__panel { padding: 10px; background: var(--c-white); line-height: 1.2; color: var(--c-navy); }
.page-hotelzzz main .hz-acc__panel p { margin-bottom: 22.4px; }
/* Smooth 400ms open/close like the original nested accordion (progressive enhancement) */
.hz-acc__item::details-content {
  block-size: 0; overflow-y: clip;
  transition: block-size .4s ease, content-visibility .4s allow-discrete;
}
.hz-acc__item[open]::details-content { block-size: auto; }

/* ---------- Secondary research cards ---------- */
.hz-findings { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 10px; }
.hz-finding {
  flex: 1 1 0; min-width: 0; min-height: 412px; padding: 24px; border-radius: 8px; background: var(--c-white);
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 8px;
}
.hz-finding__body { width: 100%; padding: 10px; line-height: 1.2; }
.hz-finding__body h3 { font-family: var(--f-body); font-size: 14px; font-weight: 700; margin-bottom: 22.4px; }
.hz-finding__body ul { margin: 0 0 21px 42px; padding: 0; }
.hz-finding__body ul ul { margin: 0 0 0 21px; list-style-type: disc; }
.page-hotelzzz main .hz-finding__source { color: var(--c-text); line-height: 1.2; margin-bottom: 22.4px; }

/* ---------- Competitive analysis ---------- */
.hz-compare {
  display: flex; flex-direction: column; padding: 16px;
  border: 1px solid var(--c-gray-200); border-radius: 8px;
}
.hz-compare__row { display: flex; gap: 24px; padding: 10px; border-bottom: 1px solid var(--c-gray-200); }
.hz-compare__row:last-child { border-bottom: 0; }
.hz-compare__logo { flex: 0 0 109px; min-width: 0; padding: 16px; display: flex; flex-direction: column; justify-content: center; }
.hz-compare__col { flex: 1 1 0; min-width: 0; padding: 10px; display: flex; flex-direction: column; justify-content: center; }
.hz-compare__col--pros { align-items: flex-start; }

.hz-checklist { list-style: none; margin: 0; padding: 0; }
.hz-checklist li { display: flex; align-items: center; font-size: 14px; line-height: 1.2; color: var(--c-navy); }
.hz-checklist li:not(:last-child) { padding-bottom: 6px; }
.hz-checklist li + li { margin-top: 6px; }
.hz-checklist__icon { flex: none; width: 20px; height: 20px; margin-right: 5px; }
.hz-checklist li > span { padding-left: 5px; }

/* ---------- Primary research ---------- */
.hz-primary { display: flex; justify-content: space-evenly; align-items: center; gap: 80px; }
.hz-primary__text { flex: 0 0 calc((100% - 80px) * .7283); min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; }
.hz-prose { line-height: 1.2; }
.page-hotelzzz main .hz-prose p { margin-bottom: 22.4px; }
.page-hotelzzz main .hz-primary__lead { line-height: 1.2; margin-bottom: 2.4px; }
.hz-primary__media { flex: 0 0 calc((100% - 80px) * .2717); min-width: 0; padding: 10px; display: flex; flex-direction: column; justify-content: center; }
.hz-stats { width: 100%; display: flex; justify-content: space-evenly; align-items: flex-start; gap: 24px; padding: 10px; }
.hz-stats__item {
  flex: 1 1 0; min-width: 0; min-height: 100px; padding: 24px; border-radius: 8px; background: var(--c-white);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  font-weight: 700; line-height: 1.2;
}

/* ---------- Success metrics ---------- */
.hz-metrics { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.hz-metrics__card {
  flex: 1 1 0; min-width: 0; min-height: 140px; padding: 24px; border-radius: 8px; background: var(--c-white);
  display: flex; flex-direction: column; gap: 8px; line-height: 1.2;
}
.hz-metrics__card h3 { font-family: var(--f-body); font-size: 14px; font-weight: 700; margin-bottom: -1.6px; }

/* ---------- Wireframes ---------- */
.hz-figure { display: block; }
.hz-wireframes { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.hz-wireframes__media { flex: 0 0 calc((100% - 24px) * .4633); min-width: 0; display: block; }
.hz-pillars {
  flex: 0 0 calc((100% - 24px) * .5367); min-width: 0; min-height: 140px; padding: 24px; border-radius: 8px;
  display: flex; flex-direction: column; gap: 16px; line-height: 1.2;
}
.page-hotelzzz main .hz-pillars__lead { font-weight: 700; margin-bottom: -1.6px; }
.hz-pillars ol { margin: 0 0 -3px 42px; padding: 0; }

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

/* ---------- Tablet (≤1024px) ---------- */
@media (max-width: 1024px) {
  .hz-findings { flex-wrap: wrap; }
  /* Improvement over the original tablet layout: 2×2 stat boxes instead of four cramped columns */
  .hz-stats { flex-wrap: wrap; }
  .hz-stats__item { flex: 0 0 calc(50% - 12px); }
  .hz-metrics { flex-wrap: wrap; }
  .hz-metrics__card { flex: 0 0 calc(50% - 12px); }
  .hz-finding { flex-basis: 100%; }
  .hz-project { padding: 16px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  /* Improvement: full-width stacked cards don't need the desktop equal-height min-height */
  .hz-finding { min-height: 0; }
}

/* ---------- Mobile (≤767px): containers stack ---------- */
@media (max-width: 767px) {
  .hz-hero { padding-top: 151px; }
  .hz-hero__top, .hz-hero__meta, .hz-summary, .hz-icon-row, .hz-goals, .hz-findings,
  .hz-compare__row, .hz-primary, .hz-stats, .hz-metrics, .hz-wireframes, .hz-more { flex-direction: column; }
  .hz-hero__top > *, .hz-hero__meta > div, .hz-summary__card, .hz-icon-item, .hz-goals__media, .hz-goals__list,
  .hz-finding, .hz-compare__logo, .hz-compare__col, .hz-primary__text, .hz-primary__media,
  .hz-stats__item, .hz-metrics__card, .hz-wireframes__media, .hz-pillars, .hz-project { flex: none; width: 100%; }
  .page-hotelzzz main .hz-hero__title > * { width: 90%; margin-inline: auto; }
  .hz-summary { padding-inline: calc(10px + (100% - 20px) * .05); }
  .page-hotelzzz main .hz-compare__logo img { width: 80px; }
  .hz-project:hover { transform: none; }
}