/* =========================================================
   ARGUS COMPONENT LAYOUTS
   Apply these classes to GenerateBlocks Container/Grid blocks
   in the editor (Advanced > CSS Classes field). Built to sit
   on top of style.css's color/button/badge tokens.
========================================================= */

/* ---------------------------------------------------------
   Alternating image + text row (used for the "credibility"
   and "what that looks like" sections). Apply .argus-split
   to the outer GB Container, and .argus-split--reverse to
   flip image/text order on alternate sections.
--------------------------------------------------------- */
.argus-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.argus-split--reverse { direction: rtl; }
.argus-split--reverse > * { direction: ltr; }

.argus-split__media img {
  width: 100%;
  border-radius: var(--argus-radius-card, 12px);
  display: block;
}

@media (max-width: 900px) {
  .argus-split { grid-template-columns: 1fr; gap: 2rem; }
  .argus-split--reverse { direction: ltr; }
}

/* ---------------------------------------------------------
   Two-column hero (badge/H1/copy left, photo right)
--------------------------------------------------------- */
.argus-hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  padding: 5rem 0;
}
.argus-hero-split__media img {
  width: 100%;
  border-radius: var(--argus-radius-card, 12px);
  display: block;
}
@media (max-width: 900px) {
  .argus-hero-split { grid-template-columns: 1fr; padding: 3rem 0; }
}

/* ---------------------------------------------------------
   Services grid — 4 equal cards (navy background section)
--------------------------------------------------------- */
.argus-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
@media (max-width: 1100px) {
  .argus-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .argus-grid-4 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   Blog / insights grid — 3 equal cards
--------------------------------------------------------- */
.argus-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
@media (max-width: 900px) {
  .argus-grid-3 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   Centered section heading block (badge + H2 + subhead,
   used above the services grid and blog grid)
--------------------------------------------------------- */
.argus-section-heading {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 3rem;
}
.argus-section-heading p {
  color: inherit;
  opacity: 0.85;
}

/* ---------------------------------------------------------
   Bottom CTA banner row — heading left, hotline pill +
   solid CTA button right
--------------------------------------------------------- */
.argus-cta-banner__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.argus-hotline-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
  background: var(--argus-navy-soft);
  color: var(--argus-white);
  padding: 0.7em 1.4em;
  border-radius: var(--argus-radius-pill);
  font-size: 0.9rem;
}
.argus-hotline-pill strong { display: block; font-size: 1rem; }

/* ---------------------------------------------------------
   Footer columns
--------------------------------------------------------- */
.argus-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 3rem;
}
@media (max-width: 900px) {
  .argus-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .argus-footer-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   PRIMARY-NAV CTA ITEM
   Renders the "Free Assessment" menu item as a gold pill
   button rather than a plain nav link. The class is set on
   the menu item itself (_menu_item_classes = argus-nav-cta).
--------------------------------------------------------- */
.main-navigation .main-nav ul li.argus-nav-cta { display: flex; align-items: center; }

.main-navigation .main-nav ul li.argus-nav-cta > a {
  background: var(--argus-gold);
  color: var(--argus-navy);
  border-radius: var(--argus-radius-pill, 999px);
  margin-left: 0.9rem;
  padding: 0.7em 1.5em;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  transition: background 0.2s ease;
}
.main-navigation .main-nav ul li.argus-nav-cta > a:hover,
.main-navigation .main-nav ul li.argus-nav-cta.sfHover > a {
  background: var(--argus-gold-hover);
  color: var(--argus-navy);
}

/* On the mobile/collapsed menu the pill would stretch full width;
   keep it inline and left-aligned instead. */
@media (max-width: 768px) {
  .main-navigation .main-nav ul li.argus-nav-cta { display: block; }
  .main-navigation .main-nav ul li.argus-nav-cta > a {
    display: inline-block;
    margin: 0.6rem 0 0.6rem 1.25rem;
  }
}

/* ---------------------------------------------------------
   NAV DROPDOWNS — match the brand palette. GeneratePress
   ships neutral defaults; these tie sub-menus to the navy
   /gold system used everywhere else on the site.
--------------------------------------------------------- */
.main-navigation .main-nav ul ul.sub-menu {
  box-shadow: 0 14px 34px rgba(14, 26, 73, 0.16);
  border-top: 3px solid var(--argus-gold);
  min-width: 250px;
}
.main-navigation .main-nav ul ul.sub-menu li a {
  font-size: 0.9rem;
  padding-top: 0.85em;
  padding-bottom: 0.85em;
}