/* Best Deal Barrister Robes — homepage (front page) styles.
   Brand tokens: text #17130C · cream #FAF7F1 · accent orange #E8582B / #CE5808
   Fonts: Poppins (headings), Source Sans Pro (body) — both already loaded by theme. */

/* Full-bleed breakout so hero + SEO band span the viewport regardless of the
   theme's constrained, centered content container. Uses transform (not negative
   margins, which the theme resets) so it survives Woostify's margin rules. */
.barr-hero,
.barr-seo {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 100vw;
}

.home div#content {
    padding-top: 0px;
}

/* ---------- Hero ---------- */
.barr-hero {
  min-height: clamp(440px, 62vh, 640px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #17130C;
}
.barr-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchor to the top so the subject's face is never cropped on wide desktops. */
  object-position: right top;
}
.barr-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(23, 19, 12, 0.78) 0%,
    rgba(23, 19, 12, 0.55) 34%,
    rgba(23, 19, 12, 0.12) 60%,
    rgba(23, 19, 12, 0) 78%);
}
.barr-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px;
}
.barr-hero__content { max-width: 560px; }
.barr-hero__title {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: #fff;
  font-size: clamp(30px, 4.6vw, 50px);
  line-height: 1.1;
  margin: 0 0 18px;
}
.barr-hero__subtitle {
  font-family: "Source Sans Pro", sans-serif;
  color: #F3ECE1;
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.55;
  margin: 0 0 30px;
  max-width: 46ch;
}
.barr-hero__cta {
  display: inline-block;
  background: #E8582B;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  padding: 16px 36px;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.18s ease, transform 0.18s ease;
}
.barr-hero__cta:hover,
.barr-hero__cta:focus {
  background: #CE5808;
  color: #fff;
  transform: translateY(-1px);
}

/* ---------- Shared section shell ---------- */
.barr-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 24px;
}
.barr-section__head { text-align: center; margin-bottom: 36px; }
.barr-section__title {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: #17130C;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.15;
  margin: 0 0 10px;
}
.barr-section__lead {
  font-family: "Source Sans Pro", sans-serif;
  color: #4A443C;
  font-size: 17px;
  line-height: 1.6;
  max-width: 60ch;
  margin: 0 auto;
}

/* ---------- SEO content band ---------- */
.barr-seo { background: #FAF7F1; }
.barr-seo .barr-section {
    padding-block: 10px;
    margin: auto;
    max-width: 760px;
}
.barr-seo h2 {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: #17130C;
  font-size: clamp(20px, 2.4vw, 27px);
  margin: 36px 0 12px;
}
.barr-seo h2:first-of-type { margin-top: 0; }
.barr-seo p {
  font-family: "Source Sans Pro", sans-serif;
  color: #3A2A1A;
  font-size: 17px;
  line-height: 1.75;
  margin: 0 0 16px;
  max-width: 80ch;
}
.barr-seo a { color: #CE5808; text-decoration: underline; }
.barr-seo a:hover { color: #E8582B; }

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
  .barr-hero { min-height: 460px; }
  .barr-hero__img { object-position: 74% top; }
  .barr-hero::after {
    background: linear-gradient(180deg,
      rgba(23, 19, 12, 0.35) 0%,
      rgba(23, 19, 12, 0.55) 45%,
      rgba(23, 19, 12, 0.82) 100%);
  }
  .barr-hero__inner { padding-bottom: 34px; }
  .barr-hero__content { max-width: 100%; }
}