/* Progressive disclosure for the selected directories and project collections.
   All content stays in the document; only the accompanying script sets hidden. */
main.compact-content [data-compact-list] > [data-compact-item][hidden],
main.compact-content .compact-controls[hidden],
main.compact-content .compact-actions[hidden],
main.compact-content .compact-search-reset[hidden] {
  display: none !important;
}

main.compact-content [data-compact-list],
main.compact-content [data-compact-item],
main.compact-content .compact-controls,
main.compact-content .compact-actions {
  min-width: 0;
}

main.compact-content .compact-controls {
  container: compact-controls / inline-size;
  margin-block: 0 20px;
  padding: 18px;
  border: 1px solid #c9dfd9;
  border-radius: 16px;
  color: #183c3c;
  background: #f1f8f5;
}

main.compact-content .compact-search-label {
  display: block;
  margin-bottom: 10px;
  color: #183c3c;
  font-size: min(1rem, 11cqi);
  font-weight: 700;
  line-height: 1.45;
}

main.compact-content .compact-search {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 48rem;
}

main.compact-content .compact-search-input {
  flex: 1 1 18rem;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: 12px;
  border: 1px solid #7faaa0;
  border-radius: 10px;
  color: #183c3c;
  background: #fff;
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
}

main.compact-content .compact-search-input::placeholder {
  color: #56706b;
  opacity: 1;
}

main.compact-content .compact-search-reset,
main.compact-content .compact-toggle {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 11px 16px;
  border: 1px solid #527e73;
  border-radius: 10px;
  color: #164b40;
  background: #fff;
  font: inherit;
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  white-space: normal;
  cursor: pointer;
}

main.compact-content .compact-toggle {
  border-color: #245f50;
  color: #fff;
  background: #245f50;
}

@media (hover: hover) and (pointer: fine) {
  main.compact-content .compact-search-reset:hover {
    color: #123d34;
    background: #e0f1e9;
  }

  main.compact-content .compact-toggle:hover {
    border-color: #174b3f;
    background: #174b3f;
  }
}

@media (hover: none), (pointer: coarse) {
  main.compact-content .compact-search-reset:active {
    color: #123d34;
    background: #e0f1e9;
  }

  main.compact-content .compact-toggle:active {
    border-color: #174b3f;
    background: #174b3f;
  }
}

main.compact-content .compact-controls .compact-status {
  max-width: none;
  margin: 12px 0 0;
  color: #47605a;
  font-size: min(.9375rem, 10cqi);
  line-height: 1.55;
}

main.compact-content .compact-controls > .compact-status:first-child {
  margin-top: 0;
}

main.compact-content .compact-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-block: 24px 0;
}

main.compact-content :is(.compact-search-input, .compact-search-reset, .compact-toggle):focus-visible {
  outline: 3px solid #007a70;
  outline-offset: 4px;
}

/* Rem-based minimum tracks reflow when the reader increases the text size. */
main.compact-content [data-compact-kind="guides"] {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(19rem, calc((100% - 32px) / 2))), 1fr));
}

main.compact-content [data-compact-kind="destinations"] {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(17rem, calc((100% - 32px) / 3))), 1fr));
  align-items: start;
  gap: 16px;
}

main.compact-content [data-compact-kind="destinations"] > .statement-card {
  min-height: 0;
  padding: 22px;
}

main.compact-content .compact-examples-heading {
  margin-block: 28px 16px;
  color: var(--ink, #152832);
  font-size: 1.25rem;
  line-height: 1.35;
}

main.compact-content .compact-example-list > p {
  margin-block: 0 18px;
}

main.compact-content .compact-example-list > p:last-child {
  margin-bottom: 0;
}

main.compact-content .compact-example-list + .compact-actions {
  justify-content: flex-start;
  margin-bottom: 24px;
}

/* Details keep their native closed state. Only the summary and body are styled. */
main.compact-content .compact-panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

main.compact-content details.compact-panel {
  container: compact-panel / inline-size;
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 1px solid #cbded9;
  border-radius: 16px;
  color: #183c3c;
  background: #fff;
}

main.compact-content .compact-panel-summary {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 60px;
  padding: 18px 66px 18px 20px;
  /* Native summary does not reliably inherit the details radius. Match its inner edge. */
  border-radius: 15px;
  color: inherit;
  font-size: min(1.0625rem, calc((100cqi - 86px) / 8));
  font-weight: 700;
  line-height: 1.45;
  list-style: none;
  cursor: pointer;
}

main.compact-content .compact-panel-summary::-webkit-details-marker {
  display: none;
}

main.compact-content .compact-panel-summary::marker {
  content: "";
}

main.compact-content .compact-panel[open] > .compact-panel-summary {
  border-radius: 15px 15px 0 0;
}

main.compact-content .compact-panel-summary > :is(h3, h4) {
  min-width: 0;
  margin: 0;
  color: inherit;
  font-size: min(1.25rem, calc((100cqi - 86px) / 7));
  line-height: 1.35;
  letter-spacing: -.015em;
}

main.compact-content .compact-panel-summary::after {
  position: absolute;
  top: 16px;
  right: 18px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid #accdc1;
  border-radius: 50%;
  color: #245f50;
  background: #e8f4ee;
  font: 600 22px/1 Arial, sans-serif;
  content: "+";
}

main.compact-content .compact-panel[open] > .compact-panel-summary::after {
  content: "−";
}

@media (hover: hover) and (pointer: fine) {
  main.compact-content .compact-panel-summary:hover {
    background: #f1f8f5;
  }
}

@media (hover: none), (pointer: coarse) {
  main.compact-content .compact-panel-summary:active {
    background: #f1f8f5;
  }
}

main.compact-content .compact-panel-summary:focus-visible {
  outline: 3px solid #007a70;
  outline-offset: 4px;
}

main.compact-content .compact-panel-body {
  container: compact-panel-copy / inline-size;
  min-width: 0;
  padding: 0 20px 20px;
}

main.compact-content .compact-panel-body > p {
  margin-block: 0 16px;
  color: #4d6462;
  font-size: min(var(--type-body, 1.0625rem), 10cqi);
  line-height: 1.7;
}

main.compact-content .compact-panel-body > p:last-child {
  margin-bottom: 0;
}

main.compact-content .compact-panel-body > p a {
  color: #176052;
  text-decoration: underline;
  text-underline-offset: .18em;
}

main.compact-content .compact-panel-body a:focus-visible {
  outline: 3px solid #007a70;
  outline-offset: 3px;
}

@container compact-panel (max-width: 24rem) {
  main.compact-content .compact-panel-summary {
    padding-inline: 16px;
    font-size: min(1.0625rem, calc((100cqi - 32px) / 8));
  }

  main.compact-content .compact-panel-summary > :is(h3, h4) {
    font-size: min(1.25rem, calc((100cqi - 32px) / 7));
  }

  main.compact-content .compact-panel-summary::after {
    position: static;
    margin-top: 12px;
  }
}

/* Rome: keep all six image previews visible above their own detailed copy. */
body[data-page-detail="roma"] main.compact-content #progetto-roma .compact-roma-cases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(26rem, calc((100% - 24px) / 2))), 1fr));
  align-items: start;
  gap: 28px 24px;
}

body[data-page-detail="roma"] main.compact-content #progetto-roma .compact-roma-case {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  gap: 12px;
}

body[data-page-detail="roma"] main.compact-content #progetto-roma .compact-roma-case > .roma-case-preview {
  position: relative;
  top: auto;
  min-height: 0;
  height: auto;
  margin: 0;
}

body[data-page-detail="roma"] main.compact-content #progetto-roma .compact-roma-case .portfolio-body {
  container: compact-roma-preview / inline-size;
  padding: 22px;
}

body[data-page-detail="roma"] main.compact-content #progetto-roma .compact-roma-case .portfolio-body h3 {
  font-size: min(2rem, 13cqi);
  line-height: 1.15;
}

body[data-page-detail="roma"] main.compact-content #progetto-roma .compact-roma-case .portfolio-body p {
  font-size: min(var(--type-body, 1.0625rem), 11cqi);
}

/* The stage follows the actual card width, while screenshot/device ratios stay intact.
   Reserve the existing bezel, chin and stand, plus the top offset and shadows. */
body[data-page-detail="roma"] main.compact-content #progetto-roma .compact-roma-case .portfolio-media.has-responsive-project-preview {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 14px;
}

body[data-page-detail="roma"] main.compact-content #progetto-roma .compact-roma-case .portfolio-media.has-responsive-project-preview .responsive-project-label {
  position: static;
  order: -1;
  align-self: flex-end;
  max-width: 100%;
  min-width: 0;
  white-space: normal;
}

body[data-page-detail="roma"] main.compact-content #progetto-roma .compact-roma-case .portfolio-media.has-responsive-project-preview .responsive-project-stage {
  --compact-desktop-width: min(88cqi, 620px);
  min-height: calc(var(--compact-desktop-width) * .5625 + clamp(4px, .72vw, 9px) + clamp(18px, 3vw, 34px) + clamp(19px, 3.2vw, 38px) + 38px);
}

body[data-page-detail="roma"] main.compact-content #progetto-roma .compact-panel {
  border-color: #54736f;
  color: #edf9f5;
  background: #1b3739;
}

@media (hover: hover) and (pointer: fine) {
  body[data-page-detail="roma"] main.compact-content #progetto-roma .compact-panel-summary:hover {
    background: #254546;
  }
}

@media (hover: none), (pointer: coarse) {
  body[data-page-detail="roma"] main.compact-content #progetto-roma .compact-panel-summary:active {
    background: #254546;
  }
}

body[data-page-detail="roma"] main.compact-content #progetto-roma .compact-panel-summary:focus-visible {
  outline-color: #b9fbf7;
}

body[data-page-detail="roma"] main.compact-content #progetto-roma .compact-panel-body {
  padding: 0;
}

body[data-page-detail="roma"] main.compact-content #progetto-roma .compact-roma-case .roma-case-copy {
  container: compact-roma-copy / inline-size;
  overflow: visible;
  min-width: 0;
  padding: 20px;
  border: 0;
  border-top: 1px solid #476763;
  border-radius: 0 0 16px 16px;
  background: transparent;
  box-shadow: none;
}

body[data-page-detail="roma"] main.compact-content #progetto-roma .compact-roma-case .roma-case-copy::before {
  content: none;
}

body[data-page-detail="roma"] main.compact-content #progetto-roma .compact-roma-case .roma-case-copy > p {
  font-size: min(1.03rem, 11cqi);
}

body[data-page-detail="roma"] main.compact-content #progetto-roma .compact-roma-case .roma-case-points {
  grid-template-columns: minmax(0, 1fr);
}

body[data-page-detail="roma"] main.compact-content #progetto-roma .compact-roma-case .roma-case-points li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
}

body[data-page-detail="roma"] main.compact-content #progetto-roma .compact-roma-case .roma-case-point-icon {
  width: 40px;
  height: 40px;
  margin: 0;
}

body[data-page-detail="roma"] main.compact-content #progetto-roma .compact-roma-case .roma-case-points li > span:last-child {
  container: compact-roma-point / inline-size;
  min-width: 0;
}

body[data-page-detail="roma"] main.compact-content #progetto-roma .compact-roma-case .roma-case-points strong {
  font-size: min(.96rem, 12cqi);
}

body[data-page-detail="roma"] main.compact-content #progetto-roma .compact-roma-case .roma-case-points small {
  font-size: min(.82rem, 11cqi);
}

body[data-page-detail="roma"] main.compact-content #progetto-roma .compact-roma-case .roma-case-actions {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

body[data-page-detail="roma"] main.compact-content #progetto-roma .compact-roma-case .roma-case-actions .button {
  min-width: 0;
  padding-inline: 12px;
  white-space: normal;
}

@container compact-roma-copy (max-width: 24rem) {
  body[data-page-detail="roma"] main.compact-content #progetto-roma .compact-roma-case .roma-case-points li {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  main.compact-content .compact-controls {
    padding: 14px;
  }

  main.compact-content .compact-panel-body,
  main.compact-content [data-compact-kind="destinations"] > .statement-card {
    padding-inline: 16px;
  }

  /* Size enlarged region labels to the card, including their marker and gap. */
  @container statement-content (max-width: 10rem) {
    main.compact-content [data-compact-kind="destinations"] > .statement-card > .eyebrow {
      font-size: min(.8125rem, 8cqi) !important;
    }
  }

  body[data-page-detail="roma"] main.compact-content #progetto-roma .compact-roma-case .portfolio-body,
  body[data-page-detail="roma"] main.compact-content #progetto-roma .compact-roma-case .roma-case-copy {
    padding-inline: 14px;
  }

  body[data-page-detail="roma"] main.compact-content #progetto-roma .compact-roma-case .portfolio-media.has-responsive-project-preview .responsive-project-stage {
    --compact-desktop-width: min(92cqi, 488px);
  }
}

@media (min-width: 641px) and (max-width: 840px) {
  body[data-page-detail="roma"] main.compact-content #progetto-roma .compact-roma-case .portfolio-media.has-responsive-project-preview .responsive-project-stage {
    --compact-desktop-width: min(80cqi, 560px);
  }
}

@media print {
  main.compact-content .compact-controls,
  main.compact-content .compact-actions,
  main.compact-content [data-filters],
  main.compact-content [data-filter-status],
  main.compact-content .compact-panel-summary::after {
    display: none !important;
  }

  main.compact-content [data-compact-list] > [data-compact-item][hidden] {
    display: revert !important;
  }

  main.compact-content .reveal,
  main.compact-content [data-compact-item],
  main.compact-content .compact-panel {
    opacity: 1 !important;
    transform: none !important;
  }

  main.compact-content .compact-panel::details-content {
    content-visibility: visible;
    height: auto;
  }

  main.compact-content .compact-panel-summary {
    padding-inline: 16px;
  }

  main.compact-content .compact-panel-body {
    display: block;
  }
}