/* ==============================================
   SERVICE AREAS SECTION
   ============================================== */
.areas {
  padding: var(--section-spacing-desktop) 0;
}
.areas-header {
  width: calc(100% - 48px);
  max-width: 700px;
  margin: 0 auto 40px;
  text-align: center;
}
.areas-header h2 {
  margin-bottom: 12px;
}
.areas-grid {
  width: calc(100% - 48px);
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
/* The filter hides a card by setting its `hidden` property, and `[hidden]`'s display:none
   comes from the user-agent sheet — a single class selector beats it, so every rule that
   gives a card a display value has to be answered by one that takes it away. Without this
   the search box filtered the DOM correctly and changed nothing on screen. */
.area-card[hidden],
.area-regions .area-card[hidden],
.area-region[hidden] {
  display: none;
}
.area-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-weight: 600;
  color: var(--text);
  transition: all var(--transition);
}
.area-card i {
  color: var(--brand-orange);
}
.area-card:hover {
  background: var(--white);
  border-color: var(--brand-orange);
  box-shadow: 0 10px 24px rgba(243, 146, 1, 0.1);
  transform: translateY(-2px);
  color: var(--brand-orange);
}
.area-card:hover i {
  color: var(--brand-orange-dark);
}
.areas-footer {
  text-align: center;
  margin-top: 56px;
}
@media (max-width: 1024px) {
  .areas-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {
  .areas {
    padding: var(--section-spacing-mobile) 0;
  }
  .areas-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}
/* ==============================================
   AREA SEARCH (areas page)
   ============================================== */
.area-search {
  width: calc(100% - 48px);
  max-width: 480px;
  margin: 0 auto 40px;
  position: relative;
}
.area-search i {
  position: absolute;
  top: 50%;
  left: 18px;
  transform: translateY(-50%);
  color: var(--text-soft);
}
.area-search input {
  width: 100%;
  padding: 14px 16px 14px 46px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  font-size: var(--font-size-body);
  font-family: var(--font-primary);
  background: var(--white);
  transition: all var(--transition);
}
.area-search input:focus {
  outline: none;
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 3px rgba(243, 146, 1, 0.12);
}
.areas-no-results {
  text-align: center;
  color: var(--text-soft);
  padding: 24px 0 0;
}
/* Live result count, announced to screen readers only. */
.area-search-status {
  position: absolute;
}
/* ==============================================
   AREAS — grouped by county
   A hundred and twenty places in one alphabet is a wall to read. Split by län each group
   is short enough to scan, and the groups themselves flow into columns so the page does
   not become a single long ribbon.
   ============================================== */
/*
   Columns, not a grid. The counties are wildly uneven — Stockholm has 29 places and
   Norrbotten has one — and in a grid every row is as tall as its tallest cell, so a short
   county left a hole the height of a long one beside it. Multi-column flows each group
   after the last, so the columns end level and there are no holes; break-inside keeps a
   county from being split across two of them.
*/
.area-regions {
  width: calc(100% - 48px);
  max-width: var(--container);
  margin-inline: auto;
  /* Narrow columns on purpose. Wide ones pack badly: a county that will not fit in what
       is left of a column jumps to the next and leaves a hole behind it, and at four
       columns the worst hole was 1,263px. Five narrower ones bring it under 410. */
  columns: 220px;
  column-gap: 28px;
}
.area-region {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  min-width: 0;
  margin-bottom: 36px;
}
/* The flat grid carries the page's own width; inside a column it is already there. */
.area-regions .areas-grid {
  width: 100%;
  max-width: none;
  margin: 0;
}
/*
   A row, not a pill. The design's card is a centred box with 20px of padding, which is
   right for a grid of twenty and wrong for a county list of twenty-nine: at 69px each,
   Stockholm alone ran to 2,225px and set the height of every column beside it. Ranged left
   and half as tall the same list reads faster and the columns come out level.
*/
.area-regions .area-card {
  justify-content: flex-start;
  padding: 8px 12px;
  gap: 8px;
  font-size: var(--font-size-small);
  font-weight: 500;
  border-radius: var(--radius-sm);
}
.area-regions .area-card:hover {
  transform: none;
  box-shadow: none;
}
.area-region-name {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.area-regions .areas-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
@media (max-width: 640px) {
  .area-regions {
    gap: 32px 20px;
  }
}
/*# sourceMappingURL=style.css.map */
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3N0eWxlLmxlc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7O0FBSUE7RUFDSSxTQUFTLGdDQUFUOztBQUdKO0VBQ0ksT0FBTyxpQkFBUDtFQUNBLGdCQUFBO0VBQ0EsbUJBQUE7RUFDQSxrQkFBQTs7QUFHSixhQUFjO0VBQ1YsbUJBQUE7O0FBR0o7RUFDSSxPQUFPLGlCQUFQO0VBQ0EsV0FBVyxnQkFBWDtFQUNBLGNBQUE7RUFDQSxhQUFBO0VBQ0EsdUJBQXVCLGNBQXZCO0VBQ0EsU0FBQTs7Ozs7O0FBT0osVUFBVTtBQUNWLGFBQWMsV0FBVTtBQUN4QixZQUFZO0VBQ1IsYUFBQTs7QUFHSjtFQUNJLGFBQUE7RUFDQSxtQkFBQTtFQUNBLHVCQUFBO0VBQ0EsU0FBQTtFQUNBLGFBQUE7RUFDQSxZQUFZLFlBQVo7RUFDQSxrQkFBa0IsYUFBbEI7RUFDQSxlQUFlLGdCQUFmO0VBQ0EsZ0JBQUE7RUFDQSxPQUFPLFdBQVA7RUFDQSxnQkFBZ0IsaUJBQWhCOztBQUdKLFVBQVc7RUFDUCxPQUFPLG1CQUFQOztBQUdKLFVBQVU7RUFDTixZQUFZLFlBQVo7RUFDQSxjQUFjLG1CQUFkO0VBQ0EsOENBQUE7RUFDQSxXQUFXLGdCQUFYO0VBQ0EsT0FBTyxtQkFBUDs7QUFHSixVQUFVLE1BQU87RUFDYixPQUFPLHdCQUFQOztBQUdKO0VBQ0ksa0JBQUE7RUFDQSxnQkFBQTs7QUFHSixRQUEyQjtFQUN2QjtJQUFjLHVCQUF1QixjQUF2Qjs7O0FBR2xCLFFBQTBCO0VBQ3RCO0lBQVMsU0FBUywrQkFBVDs7RUFDVDtJQUFjLHVCQUF1QixjQUF2QjtJQUF1QyxTQUFBOzs7Ozs7QUFRekQ7RUFDSSxPQUFPLGlCQUFQO0VBQ0EsZ0JBQUE7RUFDQSxtQkFBQTtFQUNBLGtCQUFBOztBQUdKLFlBQWE7RUFDVCxrQkFBQTtFQUNBLFFBQUE7RUFDQSxVQUFBO0VBQ0EsV0FBVyxnQkFBWDtFQUNBLE9BQU8sZ0JBQVA7O0FBR0osWUFBYTtFQUNULFdBQUE7RUFDQSw0QkFBQTtFQUNBLG9CQUFvQixhQUFwQjtFQUNBLG9CQUFBO0VBQ0EsV0FBVyxxQkFBWDtFQUNBLGFBQWEsbUJBQWI7RUFDQSxZQUFZLFlBQVo7RUFDQSxnQkFBZ0IsaUJBQWhCOztBQUdKLFlBQWEsTUFBSztFQUNkLGFBQUE7RUFDQSxjQUFjLG1CQUFkO0VBQ0EsNkNBQUE7O0FBR0o7RUFDSSxrQkFBQTtFQUNBLE9BQU8sZ0JBQVA7RUFDQSxpQkFBQTs7O0FBSUo7RUFBc0Isa0JBQUE7Ozs7Ozs7Ozs7Ozs7OztBQWdCdEI7RUFDSSxPQUFPLGlCQUFQO0VBQ0EsV0FBVyxnQkFBWDtFQUNBLG1CQUFBOzs7O0VBSUEsY0FBQTtFQUNBLGdCQUFBOztBQUdKO0VBQ0ksbUJBQUE7RUFDQSxrQ0FBQTtFQUNBLFlBQUE7RUFDQSxtQkFBQTs7O0FBSUosYUFBYztFQUNWLFdBQUE7RUFDQSxlQUFBO0VBQ0EsU0FBQTs7Ozs7Ozs7QUFTSixhQUFjO0VBQ1YsMkJBQUE7RUFDQSxpQkFBQTtFQUNBLFFBQUE7RUFDQSxXQUFXLHNCQUFYO0VBQ0EsZ0JBQUE7RUFDQSxlQUFlLGdCQUFmOztBQUdKLGFBQWMsV0FBVTtFQUNwQixlQUFBO0VBQ0EsZ0JBQUE7O0FBR0o7RUFDSSxlQUFBO0VBQ0EsZ0JBQUE7RUFDQSxzQkFBQTtFQUNBLE9BQU8sV0FBUDtFQUNBLGdCQUFBO0VBQ0Esb0JBQUE7RUFDQSx5QkFBeUIsYUFBekI7O0FBR0osYUFBYztFQUNWLGFBQUE7RUFDQSxzQkFBQTtFQUNBLFFBQUE7O0FBR0osUUFBMEI7RUFDdEI7SUFBZ0IsY0FBQSIsImZpbGUiOiJhcmVhcy9zdHlsZS5jc3MiLCJzb3VyY2VzQ29udGVudCI6W119 */