/**
 * dpc-all-sectors-operational-header-layout-001
 * + restaurant-s01-header-no-chevron-gap-tighten-001 (Bo FE)
 * + restaurant-s01-header-no-chevron-gap-tighten-003 (S01 top inset = S02)
 *
 * Shared Detailed Profit Calculator section header grid for 01 / 02 / 03.
 * General is the master; industry pages that clone the same DPC shell inherit it.
 *
 * Layout 01 (no disclosure — never collapsed):
 *   [number]  [title]
 *             [description]
 *
 * Layout 02 / 03:
 *   [number]  [title]                         [chevron]
 *             [description]
 *
 * Scope: formal DPC 01/02/03 only. Does not style QHC or progressive legacy sections.
 */

.detailed-calculator-group,
#detailed-calculator-group,
#restaurant-root .restaurant-calculator-host {
  --dpc-header-number-col: 2.5rem;
  --dpc-header-chevron-col: 2.25rem; /* 36px disclosure circle — 02/03 only */
  --dpc-header-col-gap: 10px;
  --dpc-header-row-gap: 2px;
  --dpc-header-pad-inline: 24px;
  /* S01 heading lives inside .input-panel padding + 1px border. */
  --dpc-s01-form-pad-inline: 10px;
  --dpc-s01-form-border-inline: 1px;
}

@media (max-width: 900px) {
  .detailed-calculator-group,
  #detailed-calculator-group,
  #restaurant-root .restaurant-calculator-host {
    --dpc-header-pad-inline: 16px;
    --dpc-s01-form-pad-inline: 4px;
  }
}

/* 02 / 03 — three columns including disclosure chevron. */
.detailed-calculator-group .s02-section > summary.business-section-heading,
#detailed-calculator-group .s02-section > summary.business-section-heading,
#restaurant-root .restaurant-calculator-host .s02-section > summary.business-section-heading,
.detailed-calculator-group .s03-section > summary.business-section-heading,
#detailed-calculator-group .s03-section > summary.business-section-heading,
#restaurant-root .restaurant-calculator-host .s03-section > summary.business-section-heading {
  align-items: center;
  box-sizing: border-box;
  column-gap: var(--dpc-header-col-gap);
  display: grid;
  gap: var(--dpc-header-row-gap) var(--dpc-header-col-gap);
  grid-template-columns:
    var(--dpc-header-number-col)
    minmax(0, 1fr)
    var(--dpc-header-chevron-col);
  justify-items: stretch;
  margin-inline: 0;
  max-width: none;
  padding-left: var(--dpc-header-pad-inline);
  padding-right: var(--dpc-header-pad-inline);
  text-align: left;
  width: 100%;
}

/*
 * 01 — two columns only. Section 01 is always open; do not reserve chevron width
 * so the title and description can use the full remaining line.
 */
.detailed-calculator-group #product-margin .section01-heading,
#detailed-calculator-group #product-margin .section01-heading,
#restaurant-root .restaurant-calculator-host #product-margin .section01-heading {
  /* Top-align like 02/03 title row — do not center the badge in title+desc (fake top gap). */
  align-items: start;
  box-sizing: border-box;
  column-gap: var(--dpc-header-col-gap);
  display: grid;
  gap: var(--dpc-header-row-gap) var(--dpc-header-col-gap);
  grid-template-columns:
    var(--dpc-header-number-col)
    minmax(0, 1fr);
  justify-items: stretch;
  margin-inline: 0;
  max-width: none;
  /* Match mobile 02/03 summary top inset (4px). Form has 1px border-top, so use 3px
   * heading pad → card outer top → badge/title ≈ 4px, same as S02 section → title. */
  padding-top: 3px;
  padding-bottom: 4px;
  padding-left: var(--dpc-header-pad-inline);
  padding-right: var(--dpc-header-pad-inline);
  text-align: left;
  /* Pull S01 heading out of the form chrome so numbers share one vertical line with 02/03. */
  margin-left: calc(-1 * (var(--dpc-s01-form-pad-inline) + var(--dpc-s01-form-border-inline)));
  margin-right: calc(-1 * (var(--dpc-s01-form-pad-inline) + var(--dpc-s01-form-border-inline)));
  width: calc(100% + 2 * (var(--dpc-s01-form-pad-inline) + var(--dpc-s01-form-border-inline)));
}

.detailed-calculator-group #product-margin .section01-heading > .section-title-line,
#detailed-calculator-group #product-margin .section01-heading > .section-title-line,
#restaurant-root .restaurant-calculator-host #product-margin .section01-heading > .section-title-line,
.detailed-calculator-group .s02-section > summary.business-section-heading > .business-section-title-line,
#detailed-calculator-group .s02-section > summary.business-section-heading > .business-section-title-line,
#restaurant-root .restaurant-calculator-host .s02-section > summary.business-section-heading > .business-section-title-line,
.detailed-calculator-group .s03-section > summary.business-section-heading > .business-section-title-line,
#detailed-calculator-group .s03-section > summary.business-section-heading > .business-section-title-line,
#restaurant-root .restaurant-calculator-host .s03-section > summary.business-section-heading > .business-section-title-line {
  display: contents;
  justify-self: stretch;
  max-width: none;
  width: auto;
}

.detailed-calculator-group #product-margin .section01-heading > .section-title-line > .section-number,
#detailed-calculator-group #product-margin .section01-heading > .section-title-line > .section-number,
#restaurant-root .restaurant-calculator-host #product-margin .section01-heading > .section-title-line > .section-number {
  /* Always-open 01: pin badge to title row so card-top → badge matches 02 padding-top. */
  align-self: start;
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

.detailed-calculator-group .s02-section > summary.business-section-heading > .business-section-title-line > .section-number,
#detailed-calculator-group .s02-section > summary.business-section-heading > .business-section-title-line > .section-number,
#restaurant-root .restaurant-calculator-host .s02-section > summary.business-section-heading > .business-section-title-line > .section-number,
.detailed-calculator-group .s03-section > summary.business-section-heading > .business-section-title-line > .section-number,
#detailed-calculator-group .s03-section > summary.business-section-heading > .business-section-title-line > .section-number,
#restaurant-root .restaurant-calculator-host .s03-section > summary.business-section-heading > .business-section-title-line > .section-number {
  align-self: center;
  grid-column: 1;
  grid-row: 1 / span 2;
  justify-self: start;
}

.detailed-calculator-group #product-margin .section01-heading > .section-title-line > h2,
#detailed-calculator-group #product-margin .section01-heading > .section-title-line > h2,
#restaurant-root .restaurant-calculator-host #product-margin .section01-heading > .section-title-line > h2,
.detailed-calculator-group .s02-section > summary.business-section-heading > .business-section-title-line > h2,
#detailed-calculator-group .s02-section > summary.business-section-heading > .business-section-title-line > h2,
#restaurant-root .restaurant-calculator-host .s02-section > summary.business-section-heading > .business-section-title-line > h2,
.detailed-calculator-group .s03-section > summary.business-section-heading > .business-section-title-line > h2,
#detailed-calculator-group .s03-section > summary.business-section-heading > .business-section-title-line > h2,
#restaurant-root .restaurant-calculator-host .s03-section > summary.business-section-heading > .business-section-title-line > h2 {
  grid-column: 2;
  grid-row: 1;
  justify-self: stretch;
  margin: 0;
  min-width: 0;
  text-align: left;
  text-wrap: wrap;
  white-space: normal;
}

/* Prefer one-line S01 titles once chevron gutter is gone (PT / ES / EN long labels). */
.detailed-calculator-group #product-margin .section01-heading > .section-title-line > h2,
#detailed-calculator-group #product-margin .section01-heading > .section-title-line > h2,
#restaurant-root .restaurant-calculator-host #product-margin .section01-heading > .section-title-line > h2 {
  overflow: visible;
  text-wrap: nowrap;
  white-space: nowrap;
  word-break: normal;
}

.detailed-calculator-group #product-margin .section01-heading > p,
#detailed-calculator-group #product-margin .section01-heading > p,
#restaurant-root .restaurant-calculator-host #product-margin .section01-heading > p,
.detailed-calculator-group .s02-section > summary.business-section-heading > .section-subtitle,
#detailed-calculator-group .s02-section > summary.business-section-heading > .section-subtitle,
#restaurant-root .restaurant-calculator-host .s02-section > summary.business-section-heading > .section-subtitle,
.detailed-calculator-group .s03-section > summary.business-section-heading > .section-subtitle,
#detailed-calculator-group .s03-section > summary.business-section-heading > .section-subtitle,
#restaurant-root .restaurant-calculator-host .s03-section > summary.business-section-heading > .section-subtitle {
  grid-column: 2;
  grid-row: 2;
  justify-self: stretch;
  margin: 0;
  max-width: none;
  min-width: 0;
  text-align: left;
  width: 100%;
}

.detailed-calculator-group .s02-section > summary.business-section-heading > .section-toggle-indicator,
#detailed-calculator-group .s02-section > summary.business-section-heading > .section-toggle-indicator,
#restaurant-root .restaurant-calculator-host .s02-section > summary.business-section-heading > .section-toggle-indicator,
.detailed-calculator-group .s03-section > summary.business-section-heading > .section-toggle-indicator,
#detailed-calculator-group .s03-section > summary.business-section-heading > .section-toggle-indicator,
#restaurant-root .restaurant-calculator-host .s03-section > summary.business-section-heading > .section-toggle-indicator {
  align-self: center;
  grid-column: 3;
  grid-row: 1 / span 2;
  justify-self: end;
}

@media (min-width: 901px) {
  .detailed-calculator-group .s02-section > summary.business-section-heading > .business-section-title-line > h2,
  #detailed-calculator-group .s02-section > summary.business-section-heading > .business-section-title-line > h2,
  #restaurant-root .restaurant-calculator-host .s02-section > summary.business-section-heading > .business-section-title-line > h2,
  .detailed-calculator-group .s03-section > summary.business-section-heading > .business-section-title-line > h2,
  #detailed-calculator-group .s03-section > summary.business-section-heading > .business-section-title-line > h2,
  #restaurant-root .restaurant-calculator-host .s03-section > summary.business-section-heading > .business-section-title-line > h2 {
    overflow: visible;
    text-wrap: nowrap;
    white-space: nowrap;
    word-break: normal;
  }
}