/* =====================================================
   HIGHER DEGREE COUNCIL PAGES
   File: higher-degree-councils.css
   ===================================================== */

.council-page {
  max-width: 1120px;
  margin: 0 auto;
}


/* MAIN PAGE CONTAINER */

.council-page-shell {
  margin-bottom: 36px;
  padding: 34px;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      var(--cream) 100%
    );

  border: 1px solid var(--line);
  border-top: 5px solid var(--gold);
  border-radius: 14px;

  box-shadow: var(--shadow);
}


/* PAGE HEADING */

.council-page-heading {
  max-width: 930px;
  margin: 0 auto 30px;
  padding: 22px 26px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;

  background: #fff;

  border: 2px solid var(--navy);
  border-radius: 12px;

  box-shadow:
    0 6px 17px rgba(0,0,0,.13);
}

.council-heading-logo {
  display: block;
  width: 165px;
  height: 165px;

  flex: 0 0 165px;

  object-fit: contain;
  object-position: center;
}

.council-heading-text {
  max-width: 650px;
}

.council-overline {
  margin: 0 0 5px;

  color: #9b1c1c;

  font-size: .92rem;
  font-weight: bold;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.council-heading-text h3 {
  margin: 0 0 10px;

  color: var(--navy);

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

  font-size: 1.75rem;
  line-height: 1.2;
}

.council-heading-text p:last-child {
  margin: 0;

  color: #444;

  font-size: 1.04rem;
  line-height: 1.5;
}


/* COUNCIL SECTIONS */

.council-section {
  max-width: 930px;
  margin: 24px auto 0;

  overflow: hidden;

  background: #fff;

  border: 1px solid var(--line);
  border-radius: 12px;

  box-shadow:
    0 6px 17px rgba(0,0,0,.13);
}

.council-section-heading {
  padding: 15px 20px;

  background:
    linear-gradient(
      135deg,
      #071f46 0%,
      #0b326d 55%,
      #071f46 100%
    );

  border-bottom: 3px solid var(--gold);

  text-align: center;
}

.council-section-heading h3 {
  margin: 0;

  color: #fff;

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

  font-size: 1.45rem;
  line-height: 1.2;
  text-transform: uppercase;

  text-shadow:
    0 2px 3px rgba(0,0,0,.32);
}


/* OFFICERS */

.officer-list {
  padding: 8px 24px 22px;
}

.officer-row {
  display: grid;

  grid-template-columns:
    minmax(180px, 235px)
    minmax(0, 1fr);

  align-items: center;

  margin-top: 14px;

  overflow: hidden;

  border: 1px solid var(--line);
  border-radius: 8px;

  background: #fff;

  box-shadow:
    0 3px 9px rgba(0,0,0,.08);
}

.officer-row h4 {
  height: 100%;
  min-height: 74px;
  margin: 0;
  padding: 15px 18px;

  display: flex;
  align-items: center;

  background: var(--cream);

  border-right: 3px solid var(--gold);

  color: var(--navy);

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

  font-size: 1.03rem;
  line-height: 1.2;
}

.officer-row p {
  margin: 0;
  padding: 13px 20px;

  color: #333;

  font-size: 1rem;
  line-height: 1.35;
}

.officer-row p strong,
.officer-row p span {
  display: block;
}

.officer-row p strong {
  margin-bottom: 3px;

  color: var(--navy);

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

  font-size: 1.16rem;
}

.officer-row p span {
  color: var(--muted);
}


/* MEETING INFORMATION */

.meeting-notice {
  margin: 24px;
  padding: 24px;

  background: var(--cream);

  border: 2px solid var(--gold);
  border-radius: 10px;

  text-align: center;
}

.meeting-notice h4 {
  margin: 0 0 8px;

  color: var(--navy);

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

  font-size: 1.3rem;
}

.meeting-notice p {
  max-width: 700px;
  margin: 0 auto;

  color: #444;

  font-size: 1.03rem;
  line-height: 1.5;
}


/* ASSIGNED LODGES AND CHAPTERS */

.assigned-unit-columns {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 22px;

  padding: 24px;
}

.assigned-unit-group {
  overflow: hidden;

  border: 2px solid var(--navy);
  border-radius: 10px;

  background: #fff;
}

.assigned-unit-group h4 {
  margin: 0;
  padding: 13px 16px;

  background: var(--cream);

  border-bottom: 2px solid var(--gold);

  color: var(--navy);

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

  font-size: 1.22rem;
  text-align: center;
  text-transform: uppercase;
}

.assigned-unit-list {
  margin: 0;
  padding: 8px 18px 16px;

  list-style: none;
}

.assigned-unit-list li {
  min-height: 44px;
  padding: 10px 4px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;

  border-bottom: 1px solid var(--line);

  color: #333;

  font-size: 1rem;
  line-height: 1.25;
}

.assigned-unit-list li:last-child {
  border-bottom: 0;
}

.assigned-unit-list li strong {
  flex: 0 0 auto;

  color: var(--navy);

  font-size: 1.02rem;
}


/* TABLET */

@media (max-width: 850px) {

  .council-page-shell {
    padding: 28px 22px;
  }

  .council-page-heading {
    gap: 20px;
  }

  .council-heading-logo {
    width: 140px;
    height: 140px;
    flex-basis: 140px;
  }

  .council-heading-text h3 {
    font-size: 1.55rem;
  }

}


/* SMARTPHONE */

@media (max-width: 720px) {

  .council-page-shell {
    padding: 22px 14px;
    border-radius: 10px;
  }

  .council-page-heading {
    padding: 20px 16px;

    flex-direction: column;

    text-align: center;
  }

  .council-heading-logo {
    width: 155px;
    height: 155px;
    flex-basis: auto;
  }

  .council-heading-text h3 {
    font-size: 1.4rem;
  }

  .council-section-heading h3 {
    font-size: 1.25rem;
  }

  .officer-list {
    padding: 6px 14px 18px;
  }

  .officer-row {
    grid-template-columns: 1fr;
  }

  .officer-row h4 {
    min-height: 0;
    padding: 11px 14px;

    justify-content: center;

    border-right: 0;
    border-bottom: 2px solid var(--gold);

    text-align: center;
  }

  .officer-row p {
    padding: 13px 14px;

    text-align: center;
  }

  .meeting-notice {
    margin: 18px 14px;
    padding: 20px 15px;
  }

  .assigned-unit-columns {
    grid-template-columns: 1fr;

    padding: 18px 14px;
  }

}


/* SMALL SMARTPHONE */

@media (max-width: 430px) {

  .council-heading-logo {
    width: 135px;
    height: 135px;
  }

  .council-heading-text h3 {
    font-size: 1.26rem;
  }

  .assigned-unit-list {
    padding-left: 13px;
    padding-right: 13px;
  }

  .assigned-unit-list li {
    font-size: .94rem;
  }

}