/* Brokers Page Styles */

/* Hero Section */
.brokers-hero {
  position: relative;
  height: 700px;
  background-image: url(../images/broker_image.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--white);
}

.brokers-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); /* Optional overlay for text readability */
}

.brokers-hero-content {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  padding: 20px;
}

.brokers-hero-title {
  font-family: var(--font-primary);
  font-style: italic; /* Matches the "Offering" style in image */
  font-size: 130px;
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 0;
  color: var(--white);
}

/* Content Section */
.brokers-content-section {
  padding: 80px 0;
  text-align: center;
  background-color: var(--white);
}

.brokers-content-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.brokers-content-title {
  font-family: "Apoc Normal", serif;
  font-size: 48px;
  color: var(--primary-color);
  margin-bottom: 30px;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.02em;
}

.brokers-content-text {
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  line-height: 120%;
  color: var(--black);
  margin-bottom: 40px;
  letter-spacing: -0.02em;
}

.brokers-btn {
  display: inline-block;
  background-color: var(--accent-color);
  color: var(--white);
  padding: 15px 40px;
  font-family: var(--font-tertiary);
  text-decoration: none;
  font-size: 18px;
  transition: background-color 0.3s ease;
  border: none;
  cursor: pointer;
}

.brokers-btn:hover {
  background-color: var(--hover-color);
  color: var(--white);
}

@media (max-width: 768px) {
  .brokers-hero {
    height: 500px;
  }

  .brokers-hero-title {
    font-size: 48px;
  }

  .brokers-content-title {
    font-size: 32px;
  }
}

/* Features Section */
.brokers-features-section {
  padding: 80px 0;
  background-color: var(--white);
}

/* Typography for new structure */
.features-title {
  font-family: "Apoc Normal", serif;
  font-size: 37px;
  line-height: 120%;
  letter-spacing: -0.02em;
  color: var(--primary-color);
  margin-bottom: 20px;
  font-weight: 400;
}

.features-subtitle {
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  line-height: 1.2;
  color: var(--black);
  font-weight: 500;
}

/* Post Item Layout adjustments */
.brokers-features-section .broker-card {
  transition: background-color 0.3s ease, color 0.3s ease;
  border-radius: 0; /* Square corners */
  padding: 10px; /* Increase padding */
  margin: 0; /* Reset margin to prevent hover bleed */
  height: 100%; /* Ensure full height */
  box-sizing: border-box; /* Include padding in width/height */
  /* Ensure the hover effect stays within the card */
  position: relative;
  overflow: hidden;
  /* Soft shadow, weighted to the bottom, negative spread to hide sides */
  box-shadow: 0px 15px 20px -10px rgba(0, 0, 0, 0.15);
}

/* Feature Card Specifics */
.feature-card {
  height: 100%;
  background: var(--white); /* White background default */
}

/* Hover Effects */
.brokers-features-section .broker-card:hover {
  background: var(--primary-color);
  color: var(--white);
  box-shadow: none;
  cursor: default;
}

.brokers-features-section .broker-card:hover p,
.brokers-features-section .broker-card:hover li a {
  color: var(--white);
}

.brokers-features-section .broker-card:hover .feature-card-title {
  color: var(--white);
}

/* Category Title List Reset - Decoupled from .post-category */
.broker-card-category ul {
  list-style: none; /* Remove bullets */
  padding: 0;
  margin: 0 0 5px 0; /* Add bottom margin for spacing */
}

.broker-card-category ul li {
  padding: 0;
  margin: 0;
}

.broker-card-category ul li a {
  text-decoration: none;
  display: block; /* Ensure it takes width */
}

.feature-card-title {
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--primary-color);
  line-height: 1;
}

.feature-card-text {
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  line-height: 1;
  color: var(--black);
  margin-bottom: 0;
}

/* Force fixed image dimensions for uniformity */
.feature-icon img {
  width: auto !important; /* Allow width to be auto */
  height: 60px !important; /* Fixed height */
  /* Remove object-fit: contain to prevent clipping if container is wrong size, 
     but actually we want the image to NOT be cut off. 
     If the image is larger than 60x60, we want it to scale down.
     If it's being cut, it's likely overflow:hidden on a parent or object-fit:cover.
     Let's try object-fit: contain with correct overflow handling. 
  */
  object-fit: contain;
  max-width: 100%;
  transition: none !important; /* explicit no zoom */
  transform: none !important;
}

/* Ensure figure doesn't clip */
.feature-card figure {
  overflow: visible !important;
  height: auto !important;
  margin-bottom: 20px;
}

.feature-card:hover .feature-icon img {
  transform: none !important; /* Ensure image doesn't zoom inside */
  /* User requested NO transformation/filter on images - keep original color */
}

@media (max-width: 991px) {
  .features-left-content {
    position: static;
    margin-bottom: 40px;
    text-align: center;
  }

  .features-title {
    font-size: 36px;
  }

  .features-subtitle {
    margin: 0 auto;
  }
}