/*
 * State pages. Loaded only on /book-publishing-services/*.
 *
 * The office notice is the one element here doing real work. On three of the
 * four pages it says there is no local office, and it is styled to be read
 * rather than skipped — a location page that lets a visitor assume a presence
 * it does not have is the thing that makes location pages disreputable.
 */

.loc {
  padding: 60px 0 90px;
}

.loc .container {
  max-width: 1140px;
}

.loc__crumbs {
  font-size: 0.875rem;
  color: #82848a;
  margin-bottom: 24px;
}

.loc__crumbs a {
  color: #82848a;
}

.loc__intro {
  max-width: 46rem;
  margin-bottom: 48px;
}

.loc__intro h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.2;
  margin-bottom: 18px;
}

.loc__intro p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #45464a;
  margin-bottom: 16px;
}

/* --- The office notice --------------------------------------------------- */

.loc__office {
  margin-top: 24px;
  padding: 18px 22px;
  border-radius: 10px;
  background: #f4f5f7;
  border-left: 4px solid #9aa0a6;
  font-size: 1rem !important;
  color: #45464a !important;
}

.loc__office--yes {
  background: #fdf1e7;
  border-left-color: #f47c20;
}

.loc__office a {
  color: #f47c20;
  font-weight: 600;
  white-space: nowrap;
}

/* --- Blocks -------------------------------------------------------------- */

.loc__block {
  margin-bottom: 52px;
  max-width: 46rem;
}

.loc__block h2 {
  font-size: 1.5rem;
  line-height: 1.3;
  margin-bottom: 18px;
}

.loc__scene {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #45464a;
}

.loc__events {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.loc__events li {
  border: 1px solid #e6e7ea;
  border-radius: 10px;
  padding: 22px 24px;
}

.loc__events h3 {
  font-size: 1.1rem;
  line-height: 1.35;
  margin-bottom: 4px;
}

.loc__when {
  font-size: 0.875rem;
  color: #82848a;
  margin-bottom: 10px;
}

.loc__events p:last-child {
  margin: 0;
  line-height: 1.65;
  color: #55565a;
}

.loc__caveat {
  margin-top: 14px;
  font-size: 0.9375rem;
  color: #82848a;
}

.loc__services {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}

.loc__services a,
.loc__reading a,
.loc__others a {
  color: #f47c20;
  font-weight: 600;
}

.loc__faqs {
  margin: 0;
}

.loc__faqs dt {
  font-weight: 600;
  font-size: 1.0625rem;
  margin-top: 22px;
  margin-bottom: 8px;
}

.loc__faqs dd {
  margin: 0;
  line-height: 1.7;
  color: #55565a;
}

.loc__reading,
.loc__others {
  max-width: 46rem;
  padding: 26px 30px;
  border-radius: 12px;
  background: #f7f8fa;
}

.loc__others {
  margin-top: 20px;
}

.loc__reading h2,
.loc__others h2 {
  font-size: 1.15rem;
  margin-bottom: 14px;
}

.loc__reading ul,
.loc__others ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.loc__reading li {
  margin-bottom: 8px;
}

.loc__others ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}

@media (max-width: 575px) {
  .loc {
    padding: 40px 0 60px;
  }

  .loc__events li,
  .loc__reading,
  .loc__others {
    padding: 20px 22px;
  }
}