/* Beaver Builder core layout — reconstructed.
 *
 * The scrape captured the theme's stylesheets but not Beaver Builder's own frontend CSS, and no
 * per-page layout file either. Pages built with the theme's post/page templates (blog posts,
 * categories) were unaffected because they use none of these classes; pages built in Beaver
 * Builder — the homepage among them — lost their entire layout and rendered as a bare stack of
 * full-bleed text and unsized images.
 *
 * This restores the structural rules those pages depend on: the fixed-width container, the
 * column grid, module spacing and the post grid. It is deliberately minimal — enough for the
 * markup to lay out correctly, without trying to imitate styling that was never captured.
 *
 * Recoverable from the markup: structure, column counts, image sizing.
 * NOT recoverable: the hero row's background photo, and any per-node colour or padding the
 * missing layout file carried. The hero falls back to the brand colour below.
 */

/* ── rows ───────────────────────────────────────────────────────────────────────────────── */

.fl-row-content-wrap {
  position: relative;
  padding: 40px 20px;
}

/* The container. Beaver Builder's default content width; the theme's own pages use the same
   measure, so the homepage lines up with the rest of the site. */
.fl-row-fixed-width {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.fl-row-content {
  position: relative;
  z-index: 1;
}

.fl-row-full-width > .fl-row-content-wrap {
  padding-left: 20px;
  padding-right: 20px;
}

/* ── columns ────────────────────────────────────────────────────────────────────────────── */

.fl-col-group {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-right: -10px;
}

.fl-col {
  flex: 1 1 0;
  min-width: 0;                 /* without this a long word forces the column wider than its share */
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
}

.fl-col-small {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
}

.fl-col-content {
  position: relative;
}

/* ── modules ────────────────────────────────────────────────────────────────────────────── */

.fl-module-content {
  margin: 20px;
}

.fl-module-heading .fl-heading {
  margin: 0;
}

/* ── post grid ──────────────────────────────────────────────────────────────────────────── */

.fl-post-grid {
  display: flex;
  flex-wrap: wrap;
  margin-left: -12px;
  margin-right: -12px;
}

.fl-post-column {
  width: 33.3333%;
  padding: 0 12px 24px;
  box-sizing: border-box;
  display: flex;
}

.fl-post-grid-post {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  overflow: hidden;
}

.fl-post-grid-image {
  margin: 0;
  line-height: 0;               /* kills the inline-image descender gap under the thumbnail */
}

.fl-post-grid-image img {
  display: block;
  width: 100%;
  /* The source thumbnails vary in aspect ratio, which pushed each card title to a different
     height and left the row looking ragged. A fixed ratio with object-fit crops rather than
     distorts, so titles line up across the row. */
  aspect-ratio: 16 / 10;
  height: auto;
  object-fit: cover;
}

.fl-post-grid-text {
  padding: 16px 18px 20px;
  flex: 1 1 auto;
}

.fl-post-grid-title {
  margin: 0 0 10px;
  font-size: 19px;
  line-height: 1.3;
}

.fl-post-grid-title a {
  text-decoration: none;
}

.fl-post-grid-content {
  font-size: 14px;
  line-height: 1.55;
}

.fl-post-grid-content p:last-child {
  margin-bottom: 0;
}

/* ── hero row ───────────────────────────────────────────────────────────────────────────── */

/* The background photo lived in the per-page layout file and was never captured, so there is no
   image to restore. Falling back to the brand colour keeps the row readable rather than leaving
   white text on white. Replace the background here if the original asset turns up. */
.fl-row-bg-photo > .fl-row-content-wrap {
  background-color: #428bca;
  background-size: cover;
  background-position: center;
}

.fl-row-custom-height > .fl-row-content-wrap {
  display: flex;
  align-items: center;
  min-height: 220px;
}

.fl-row-bg-photo .fl-heading,
.fl-row-bg-photo .fl-heading a,
.fl-row-bg-photo .fl-rich-text,
.fl-row-bg-photo .fl-rich-text p {
  color: #fff;
}

.fl-row-bg-overlay > .fl-row-content-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .25);
}

/* ── responsive ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 992px) {
  .fl-post-column { width: 50%; }
}

@media (max-width: 768px) {
  .fl-col-group { display: block; margin-left: 0; margin-right: 0; }
  .fl-col,
  .fl-col-small { max-width: none; padding-left: 0; padding-right: 0; }
  .fl-post-grid { margin-left: 0; margin-right: 0; }
  .fl-post-column { width: 100%; padding-left: 0; padding-right: 0; }
  .fl-module-content { margin: 16px 0; }
  .fl-row-content-wrap { padding: 28px 16px; }
}

/* ── pagination ─────────────────────────────────────────────────────────────────────────── */

/* Rendered as a bare bulleted list without this — the markup is a <ul> and none of the captured
   stylesheets carry rules for Beaver Builder's pagination wrapper. */
/* ul.page-numbers, not .page-numbers — the class sits on the <ul> AND on every <a>/<span>
   inside it, so a bare class selector applies the flex container rules to each link too. */
.fl-builder-pagination ul,
.fl-builder-pagination ul.page-numbers {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  justify-content: center;
}

.fl-builder-pagination li {
  margin: 0;
}

.fl-builder-pagination a,
.fl-builder-pagination span {
  display: inline-block;
  padding: 7px 13px;
  border: 1px solid #e6e6e6;
  border-radius: 3px;
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
}

.fl-builder-pagination span.current {
  background: #428bca;
  border-color: #428bca;
  color: #fff;
}