/* ==========================================================
   MID-FLORIDA REAL ESTATE
   RESOURCES & EDUCATION

   MFRE 2026.10.31-0014

   SIMPLIFIED WINE PRESENTATION
========================================================== */


/* ----------------------------------------------------------
   SECTION
---------------------------------------------------------- */

.education-resources {
  position: relative;

  scroll-margin-top: 24px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(198, 161, 91, 0.06),
      transparent 31%
    ),
    linear-gradient(
      180deg,
      var(--mfre-wine-700) 0%,
      var(--mfre-wine-800) 37%,
      var(--mfre-wine-850) 68%,
      var(--mfre-wine-900) 100%
    ) !important;

  border-top:
    1px solid rgba(198, 161, 91, 0.28);

  border-bottom:
    1px solid rgba(0, 0, 0, 0.30);
}


/* ----------------------------------------------------------
   MAIN HEADING
---------------------------------------------------------- */

.education-resources
.section-heading {
  max-width: 720px;

  margin-bottom: 42px;

  text-align: center;
}


.education-resources
.section-heading h2 {
  margin-bottom: 12px;

  color:
    var(--mfre-white);
}


.education-resources
.section-heading p {
  max-width: 540px;

  margin:
    0 auto;

  color:
    rgba(255, 255, 255, 0.70);

  font-size: 0.98rem;
  line-height: 1.6;
}


/* ----------------------------------------------------------
   GROUPS
---------------------------------------------------------- */

.education-group {
  width: 100%;

  padding:
    32px;

  border-radius: 4px;
}


.education-group + .education-group {
  margin-top: 28px;
}


/* ----------------------------------------------------------
   RESOURCES GROUP

   Darker and more functional.
---------------------------------------------------------- */

.education-group--tools {
  background:
    linear-gradient(
      145deg,
      rgba(17, 12, 13, 0.93),
      rgba(32, 12, 16, 0.94)
    );

  border:
    1px solid rgba(198, 161, 91, 0.27);

  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.17);
}


/* ----------------------------------------------------------
   EDUCATION GROUP

   Clearly richer wine instead of black-wine.
---------------------------------------------------------- */

.education-group--guides {
  background:
    linear-gradient(
      145deg,
      rgba(107, 25, 36, 0.91),
      rgba(70, 13, 22, 0.94)
    );

  border:
    1px solid rgba(217, 221, 225, 0.17);

  box-shadow:
    0 18px 42px rgba(31, 5, 10, 0.19);
}


/* ----------------------------------------------------------
   SIMPLE GROUP HEADINGS
---------------------------------------------------------- */

.education-group__heading {
  display: flex;
  align-items: center;

  gap: 14px;

  margin:
    0 0 23px;
}


.education-group__heading::after {
  content: "";

  flex: 1;

  height: 1px;
}


.education-group--tools
.education-group__heading::after {
  background:
    linear-gradient(
      90deg,
      rgba(198, 161, 91, 0.48),
      transparent
    );
}


.education-group--guides
.education-group__heading::after {
  background:
    linear-gradient(
      90deg,
      rgba(217, 221, 225, 0.38),
      transparent
    );
}


.education-group__heading h3 {
  flex:
    0 0 auto;

  margin: 0;

  color:
    var(--mfre-white);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(1.55rem, 3vw, 2.15rem);

  font-weight: 500;
  line-height: 1.05;

  letter-spacing:
    -0.035em;
}


/* ----------------------------------------------------------
   GRIDS
---------------------------------------------------------- */

.client-paths-grid--directories {
  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 14px;
}


.client-paths-grid--articles {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 14px;
}


/* ----------------------------------------------------------
   REMOVE ALL OLD CARD DECORATIONS
---------------------------------------------------------- */

.education-resources
.client-path::before,

.education-resources
.client-path::after {
  display: none !important;

  content: none !important;
}


/* ----------------------------------------------------------
   SHARED CARD
---------------------------------------------------------- */

.education-resources
.client-path {
  position: relative;

  display: flex;

  flex-direction: column;

  min-height: 255px;

  padding:
    26px 24px 23px;

  overflow: hidden;

  border-radius: 2px;

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}


/* ----------------------------------------------------------
   RESOURCE CARDS
---------------------------------------------------------- */

.education-group--tools
.client-path {
  background:
    rgba(10, 9, 10, 0.62);

  border:
    1px solid rgba(198, 161, 91, 0.20);

  border-top:
    2px solid rgba(198, 161, 91, 0.69);
}


.education-group--tools
.client-path:hover {
  transform:
    translateY(-2px);

  background:
    rgba(20, 13, 15, 0.82);

  border-color:
    rgba(223, 194, 127, 0.42);

  border-top-color:
    var(--mfre-gold-bright);

  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.20);
}


/* ----------------------------------------------------------
   EDUCATIONAL CARDS
---------------------------------------------------------- */

.education-group--guides
.client-path {
  background:
    rgba(42, 8, 14, 0.48);

  border:
    1px solid rgba(217, 221, 225, 0.15);

  border-top:
    2px solid rgba(217, 221, 225, 0.47);
}


.education-group--guides
.client-path:hover {
  transform:
    translateY(-2px);

  background:
    rgba(48, 8, 16, 0.67);

  border-color:
    rgba(217, 221, 225, 0.27);

  border-top-color:
    var(--mfre-silver-bright);

  box-shadow:
    0 18px 34px rgba(29, 3, 9, 0.22);
}


/* ----------------------------------------------------------
   CARD TITLES
---------------------------------------------------------- */

.education-resources
.client-path h3 {
  min-height: 0;

  margin:
    0 0 13px;

  color:
    var(--mfre-white);

  font-size:
    clamp(1.48rem, 2.4vw, 1.9rem);

  line-height: 1.08;

  letter-spacing:
    -0.025em;
}


/* ----------------------------------------------------------
   CARD TEXT
---------------------------------------------------------- */

.education-resources
.client-path p {
  margin:
    0 0 23px;

  color:
    rgba(255, 255, 255, 0.68);

  font-size: 0.9rem;
  line-height: 1.63;
}


/* ----------------------------------------------------------
   CARD BUTTONS
---------------------------------------------------------- */

.education-resources
.client-path__button {
  min-width: 140px;

  margin-top: auto;

  padding:
    10px 15px;

  border-radius: 2px;

  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.085em;

  transition:
    transform 0.18s ease,
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}


/* Resources = gold */

.education-group--tools
.client-path__button {
  color:
    var(--mfre-black) !important;

  background:
    var(--mfre-gold-bright);

  border:
    1px solid var(--mfre-gold-bright) !important;
}


.education-group--tools
.client-path__button:hover,

.education-group--tools
.client-path__button:focus {
  color:
    var(--mfre-white) !important;

  background:
    var(--mfre-wine-700);

  border-color:
    var(--mfre-gold) !important;

  transform:
    translateY(-1px);
}


/* Education = silver */

.education-group--guides
.client-path__button {
  color:
    var(--mfre-white) !important;

  background:
    rgba(12, 12, 13, 0.30);

  border:
    1px solid rgba(217, 221, 225, 0.55) !important;
}


.education-group--guides
.client-path__button:hover,

.education-group--guides
.client-path__button:focus {
  color:
    var(--mfre-black) !important;

  background:
    var(--mfre-silver-bright);

  border-color:
    var(--mfre-silver-bright) !important;

  transform:
    translateY(-1px);
}


/* ----------------------------------------------------------
   TABLET
---------------------------------------------------------- */

@media (max-width: 980px) {

  .education-group {
    padding:
      27px;
  }


  .client-paths-grid--directories,
  .client-paths-grid--articles {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .client-paths-grid--directories
  .client-path:last-child {
    grid-column:
      1 / -1;

    width: 100%;
    max-width: 560px;

    justify-self:
      center;
  }

}


/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media (max-width: 700px) {

  .education-resources {
    background:
      linear-gradient(
        180deg,
        #5c1520 0%,
        #461018 48%,
        var(--mfre-wine-900) 100%
      ) !important;
  }


  .education-resources
  .section-heading {
    margin-bottom: 32px;

    text-align: left;
  }


  .education-resources
  .section-heading p {
    margin: 0;
  }


  .education-group {
    padding:
      22px 16px;
  }


  .education-group + .education-group {
    margin-top: 20px;
  }


  .education-group__heading {
    margin-bottom: 18px;
  }


  .education-group__heading h3 {
    font-size:
      clamp(1.55rem, 8vw, 1.95rem);
  }


  .client-paths-grid--directories,
  .client-paths-grid--articles {
    grid-template-columns:
      1fr;

    gap: 11px;
  }


  .client-paths-grid--directories
  .client-path:last-child {
    grid-column: auto;

    width: 100%;
    max-width: none;
  }


  .education-resources
  .client-path {
    min-height: 0;

    padding:
      22px 19px 20px;
  }


  .education-resources
  .client-path h3 {
    font-size:
      clamp(1.45rem, 7vw, 1.8rem);
  }


  .education-resources
  .client-path p {
    margin-bottom: 19px;
  }


  .education-resources
  .client-path__button {
    width: 100%;
  }

}


/* ----------------------------------------------------------
   VERY SMALL MOBILE
---------------------------------------------------------- */

@media (max-width: 400px) {

  .education-group {
    padding:
      19px 13px;
  }


  .education-group__heading {
    gap: 9px;
  }


  .education-resources
  .client-path {
    padding:
      20px 16px 19px;
  }

}


/* ----------------------------------------------------------
   REDUCED MOTION
---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .education-resources
  .client-path,

  .education-resources
  .client-path__button {
    transition: none;
  }


  .education-resources
  .client-path:hover,

  .education-resources
  .client-path__button:hover {
    transform: none;
  }

}