/* Section colors use the full-strength combinations from Designmanual. */
.article [data-section-type="facts"] { border: 0; }
.article [data-section-type="facts"]:not([data-group="home-facts"]):not([data-group="visit-facts"]) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 26px;
  padding: 40px 46px;
}
.article > [data-section-type="practical"],
.article > [data-section-type="story"] {
  border: 0;
  padding: 40px 46px;
}
.article > [data-section-type="practical"] > section:first-child h2,
.article > [data-section-type="story"] > section:first-child h2 { margin-top: 0; }
.article > [data-section-type="practical"] > .group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 20px !important;
  gap: 26px;
}
.article > [data-section-type="practical"] > .group > section { border-top-color: currentColor; }
.article [data-section-type="story"]:not([data-group="module"]) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 38px;
  align-items: center;
}
.article > [data-section-type="story"] { margin-top: 44px !important; }
.article [data-group="visit-way"][data-section-type="story"] > section:first-child {
  padding: 30px 0 30px 36px;
}

[data-section-type="facts"][data-section-mood="default"] {
  --box-surface: var(--facts-surface); --box-text: var(--facts-text); --box-heading: var(--facts-heading);
}
[data-section-type="practical"][data-section-mood="default"] {
  --box-surface: var(--practical-surface); --box-text: var(--practical-text); --box-heading: var(--practical-heading);
}
[data-section-type="story"][data-section-mood="default"] {
  --box-surface: var(--story-surface); --box-text: var(--story-text); --box-heading: var(--story-heading);
}
[data-section-mood="green"] { --box-surface:#3b603f; --box-text:#eeeae3; --box-heading:#da96c1; }
[data-section-mood="pink"] { --box-surface:#da96c1; --box-text:#000; --box-heading:#3b603f; }
[data-section-mood="cream"] { --box-surface:#eeeae3; --box-text:#3b603f; --box-heading:#e5221e; }
[data-section-mood="black-red"] { --box-surface:#000; --box-text:#eeeae3; --box-heading:#e5221e; }
[data-section-mood="red"] { --box-surface:#e5221e; --box-text:#000; --box-heading:#eeeae3; }
[data-section-mood="blue"] { --box-surface:#3475ba; --box-text:#eeeae3; --box-heading:#eeeae3; }
[data-section-mood="cream-blue"] { --box-surface:#eeeae3; --box-text:#000; --box-heading:#3475ba; }
[data-section-mood="green-cream"] { --box-surface:#3b603f; --box-text:#eeeae3; --box-heading:#eeeae3; }
[data-section-mood="black-pink"] { --box-surface:#000; --box-text:#eeeae3; --box-heading:#da96c1; }

.article [data-section-type] {
  background:var(--box-surface);
  color:var(--box-text);
}
.article [data-section-type] p,
.article [data-section-type] li,
.article [data-section-type] .sheet th,
.article [data-section-type] .sheet td,
.article [data-section-type] a { color:var(--box-text); }
.article [data-section-type] h2,
.article [data-section-type] h3 { color:var(--box-heading); }
.article [data-section-type] .sheet th,
.article [data-section-type] .sheet td { border-color:color-mix(in srgb, var(--box-text) 35%, transparent); }

@media (max-width: 650px) {
  .article > [data-section-type="practical"],
  .article > [data-section-type="story"] { padding: 28px 22px; }
  .article > [data-section-type="practical"] > .group,
  .article [data-section-type="story"]:not([data-group="module"]) { grid-template-columns: 1fr; gap: 22px; }
  .article [data-group="visit-way"][data-section-type="story"] > section:first-child { padding: 24px 22px 0; }
  .article [data-section-type="facts"]:not([data-group="home-facts"]):not([data-group="visit-facts"]) { padding: 28px 22px; }
}