/*
 * Safety report guide page.
 */

#report-wrap {
  --report-padding-x: clamp(2rem, 11.667vw, 8.4rem);

  background: var(--bg);
}

#report-wrap .header {
  /* padding-top: clamp(3.2rem, 10vw, 7.2rem); */
  /* padding-right: var(--report-padding-x); */
  /* padding-left: var(--report-padding-x); */
  /* background: transparent; */
}

#report-wrap .tit-section,
#report-wrap .page-section {
  /* padding-right: var(--report-padding-x); */
  /* padding-left: var(--report-padding-x); */
}

#report-wrap .tit-section {
  /* padding-top: clamp(3.2rem, 6.667vw, 4.8rem); */
  /* padding-bottom: clamp(2.4rem, 5.556vw, 4rem); */
}

.report-page {
  padding-bottom: clamp(3.2rem, 8.333vw, 6rem);
}

.report-page .page-section {
  margin-top: clamp(2rem, 5.556vw, 4rem);
}

.report-principles {
  margin-top: clamp(0.8rem, 1.389vw, 1rem) !important;
}

.report-card {
  padding: clamp(2rem, 3.194vw, 2.3rem) clamp(1.8rem, 3.611vw, 2.6rem);
}

.report-card__title {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.778vw, 2rem);
  font-size: var(--fz-25);
  font-weight: var(--fw-bold);
  color: var(--text);
}

.report-card__title-icon {
  flex: 0 0 clamp(2.8rem, 5.556vw, 4rem);
  width: clamp(2.8rem, 5.556vw, 4rem);
  height: clamp(2.8rem, 5.556vw, 4rem);
}

/* ---------- Three reporting principles ---------- */
.report-principle-list {
  /* margin-top: var(--space-4); */
}

.report-principle {
  display: grid;
  grid-template-columns: clamp(2.6rem, 5.544vw, 3.6rem) minmax(0, 1fr);
  align-items: stretch;
  column-gap: clamp(1.6rem, 3.333vw, 2.4rem);
}

.report-principle__number {
  align-self: center;
  width: clamp(2.6rem, 5.544vw, 3.6rem);
  height: clamp(2.6rem, 5.544vw, 3.6rem);
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fz-22);
  font-weight: var(--fw-bold);
  color: var(--text-on-primary);
  background: var(--primary);
}

.report-principle__content {
  /* min-height: clamp(7.2rem, 11.111vw, 8rem); */
  padding: var(--space-4) 0;
  border-bottom: var(--border-1) solid var(--line-strong);
  display: flex;
  align-items: center;
  font-size: var(--fz-22);
  font-weight: var(--fw-medium);
  color: var(--text);
}

.report-principle:last-child .report-principle__content {
  border-bottom: 0;
}

.report-principle__content em {
  font-weight: var(--fw-bold);
  color: var(--primary);
}

/* ---------- Six illegal parking zones ---------- */
.report-zone-list {
  margin-top: clamp(2rem, 4.167vw, 3rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.778vw, 2rem);
}

.report-zone {
  min-height: clamp(4.6rem, 8.722vw, 6rem);
  padding: clamp(1rem, 2.083vw, 1.5rem) clamp(1.2rem, 2.778vw, 2rem);
  border: var(--border-2) solid transparent;
  border-radius: var(--radius-15);
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.778vw, 2rem);
  text-align: left;
  color: var(--text);
  background: var(--surface-gray);
  transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}

.report-zone.is-selected,
.report-zone[aria-pressed="true"] {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--surface-selected);
}

.report-zone__icon {
  flex: 0 0 clamp(2.2rem, 5.556vw, 4rem);
  width: clamp(2.2rem, 5.556vw, 4rem);
  height: clamp(2.2rem, 5.556vw, 4rem);
}

.report-zone__label {
  font-size: var(--fz-22);
  font-weight: var(--fw-medium);
  color: inherit;
  white-space: nowrap;
}

/* The divider belongs to the text column, so it never crosses the icon. */
.report-zone-guide {
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
  /* padding: clamp(2rem, 4.167vw, 3rem) clamp(1.6rem, 3.333vw, 2.4rem); */
  /* border-radius: var(--radius-15); */
  background: var(--surface-blue);
  padding-top: 0.8rem;
  border-radius:  1rem;
}

.report-zone-guide__header {
  width: 100%;
  display: grid;
  grid-template-columns: clamp(2.6rem, 5.556vw, 4rem) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(1.2rem, 2.778vw, 2rem);
  text-align: left;
  cursor: pointer;
}

.report-zone-guide__icon {
  align-self: start;
  width: 2.6rem;
  height: 4.2rem;
}

.report-zone-guide__heading {
  min-height: 4.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.report-zone-guide.is-open .report-zone-guide__heading {
  /* padding-bottom: clamp(1.2rem, 2.778vw, 2rem); */
  border-bottom: var(--border-1) solid var(--line-strong);
}

.report-zone-guide__title {
  font-size: var(--fz-20);
  font-weight: var(--fw-medium);
  color: var(--text);
}

.report-zone-guide__arrow {
  flex: 0 0 clamp(1.6rem, 2.778vw, 2rem);
  width: clamp(1.6rem, 2.778vw, 2rem);
  height: clamp(1.6rem, 2.778vw, 2rem);
  /* margin-top: var(--space-1); */
  transition: transform 0.2s ease;
}

.report-zone-guide:not(.is-open) .report-zone-guide__arrow {
  transform: rotate(180deg);
}

.report-zone-guide__panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.22s ease;
  padding-left: calc(clamp(2.6rem, 5.556vw, 4rem) + clamp(1.2rem, 2.778vw, 2rem));
}

.report-zone-guide:not(.is-open) .report-zone-guide__panel {
  grid-template-rows: 0fr;
}

.report-zone-guide__panel-inner {
  min-height: 0;
  overflow: hidden;
}

.report-zone-guide__description {
  margin-top: clamp(1.6rem, 3.333vw, 2.4rem);
  font-size: var(--fz-17);
  font-weight: var(--fw-regular);
  color: var(--text-sub);
}

/* ---------- Fixed warning ---------- */
.report-warning {
  margin-top: clamp(3.2rem, 7.222vw, 5.2rem) !important;
}

.report-warning__box {
  padding: clamp(1.6rem, 4vw, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.2rem, 2.778vw, 2rem);
  border-radius: 1rem;
}

.report-warning__header {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 1.4rem;
}

.report-warning__icon {
  width: clamp(2.2rem, 5.556vw, 4rem);
  height: clamp(2.2rem, 5.556vw, 4rem);
  flex: 0 0 clamp(2.2rem, 5.556vw, 4rem);
}

.report-warning__title {
  font-size: var(--fz-20);
  font-weight: var(--fw-bold);
  color: var(--danger);
}

.report-warning__content {
  padding-left: calc(clamp(2.2rem, 5.556vw, 4rem) + 1.4rem);
}

.report-warning__description {
  /* margin-top: clamp(1.6rem, 3.333vw, 2.4rem); */
  font-size: var(--fz-18);
  font-weight: var(--fw-regular);
  color: var(--text);
}

/* ---------- External action ---------- */
.report-action {
  margin-top: clamp(3.2rem, 6.667vw, 4.8rem) !important;
}

.report-action__button {
  min-height: clamp(6rem, 10.278vw, 7.4rem);
  font-size: var(--fz-25);
}

@media (max-width: 36rem) {
  .report-zone {
    padding-right: 1rem;
    padding-left: 1rem;
    gap: 1rem;
  }

  .report-zone__label {
    font-size: var(--fz-18);
  }
}