/* Anodyne site: the Automations page.
   Link this file after site.css and pages.css. It uses their type scale, colors, gutter and hairlines.
   tabs.js sets .tabs-on on the tabs root. With no script, the tab row is a row of in-page links and the three panels show one under the other. */

/* Principles: the .proof band of pages.css, with three columns in place of four */

.proof-list.proof-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: row;
}

.proof-3 p {
  max-width: 30ch;
}

/* The tab row. At 800 px and wider: one row of names over a hairline. The open tab has the accent color and an accent bar on the hairline.
   --tab-room is the space above the tab row when tabs.js scrolls it into view. --tab-row is the height of the tab row, so that a browser scroll to a panel also keeps the tab row in view. */

/* The line above the tabs: the tabs are examples, not a list of industries */
.auto-examples {
  max-width: 52ch;
  margin-bottom: clamp(32px, 3.4vw, 48px);
  font-size: clamp(19px, 1.5vw, 22px);
  line-height: 1.5;
}

.auto-tabs {
  --tab-room: clamp(24px, 3vw, 48px);
  --tab-font: clamp(17px, 1.35vw, 20px);
  --tab-gap: clamp(40px, 4.4vw, 64px);
  --tab-row: calc(35px + 1.3 * var(--tab-font));
}

.auto-tab-list {
  display: flex;
  gap: 0 clamp(28px, 3.4vw, 56px);
  margin-bottom: var(--tab-gap);
  border-bottom: 1px solid var(--rule);
}

.auto-tab-list a {
  position: relative;
  padding: 16px 0 18px;
  font-size: var(--tab-font);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}

.auto-tab-list a:hover {
  color: var(--ink);
}

.tabs-on .auto-tab-list {
  scroll-margin-top: var(--tab-room);
}

.tabs-on .auto-panel {
  scroll-margin-top: calc(var(--tab-room) + var(--tab-row) + var(--tab-gap));
}

.tabs-on .auto-tab-list a {
  color: var(--ink);
}

.tabs-on .auto-tab-list a:hover,
.tabs-on .auto-tab-list a[aria-selected="true"] {
  color: var(--accent);
}

.tabs-on .auto-tab-list a[aria-selected="true"]::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  background: var(--accent);
}

/* The panels. With no script, each panel has its visible industry heading, and space between the panels. */

.auto-panel {
  scroll-margin-top: 24px;
}

.auto-panel + .auto-panel {
  margin-top: clamp(56px, 6vw, 96px);
}

.auto-panel h2 {
  margin-bottom: clamp(28px, 3vw, 40px);
}

.auto-panel:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 8px;
}

/* The note of the Financial services panel: the .callout of pages.css, as wide as its text */
.auto-note {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 clamp(28px, 3vw, 40px);
}

/* The cards. Each card is a subgrid of four rows (name, facts, label, what stays), so the parts line up across a row of cards. */

.auto-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(16px, 1.7vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.auto-card {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  margin-bottom: clamp(16px, 1.7vw, 24px);
  padding: clamp(24px, 2.2vw, 34px) clamp(22px, 2vw, 32px) clamp(26px, 2.4vw, 36px);
  border: 1px solid #CFE1E6;   /* accent, 20% tint, as the tiles of site.css */
  border-radius: 2px;
  background: var(--bg);
}

.auto-card h3 {
  margin-bottom: 22px;
  font-size: clamp(22px, 1.8vw, 27px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: balance;
}

.auto-facts {
  margin: 0;
}

.auto-facts > div + div {
  margin-top: 18px;
}

.auto-facts dt {
  margin-bottom: 4px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.auto-facts dd {
  margin: 0;
  font-size: 17px;
  line-height: 1.45;
}

/* The label: text in a box. "Rules" has an ink outline; "Rules + AI" is an accent fill with white text (6.2:1), and its note sits beside it. */

.auto-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-self: start;
  gap: 8px 14px;
  margin: 24px 0;
}

.auto-tag {
  flex: none;
  padding: 3px 10px;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
}

.auto-tag-ai {
  border-color: var(--accent);
  background: var(--accent);
  color: #FFFFFF;
}

.auto-tag-note {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.4;
}

/* What stays with the team: under a hairline, as the rows of pages.css */
.auto-stays {
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}

/* The line under the tabs: the .trust-note of pages.css */
.auto-line {
  margin-top: clamp(32px, 3.4vw, 48px);
}

/* Under 960 px: two columns of cards */

@media (max-width: 959px) {
  .auto-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .auto-card h3 {
    margin-bottom: 18px;
  }

  .auto-label {
    margin: 20px 0;
  }
}

/* Under 800 px: the tab row is one column of rows with a hairline above each, as the rows of pages.css. The open tab has an accent bar at its left. */

@media (max-width: 799px) {
  .auto-tabs {
    --tab-font: 17px;
    --tab-row: calc(3 * (29px + 1.3 * var(--tab-font)) + 1px);
  }

  .auto-tab-list {
    flex-direction: column;
    gap: 0;
    border-bottom: 1px solid var(--rule);
  }

  .auto-tab-list a {
    padding: 14px 0 14px 20px;
    border-top: 1px solid var(--rule);
    white-space: normal;
  }

  .auto-tab-list a:focus-visible {
    outline-offset: -2px;
  }

  .tabs-on .auto-tab-list a[aria-selected="true"]::after {
    top: -1px;
    right: auto;
    bottom: -1px;
    width: 3px;
    height: auto;
  }

  .proof-list.proof-3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Under 600 px: one column of cards */

@media (max-width: 599px) {
  .auto-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .auto-card {
    padding: 22px 20px 24px;
  }

  .auto-card h3 {
    font-size: 22px;
  }
}