/* ============================================================
   PRIME HARBOR INSURANCE — SHARED CARRIER GRID MODULE STYLES
   File: carrier-grid-styles.css
   Version: 1.5
   Last Updated: 2026-05-21
   v1.5 changes: Shifted background-position from center to top center on
                 .grid-hero and .grid-fallback so the top of the cityscape
                 image anchors to the top of each container.
   v1.4 changes: Added New Orleans cityscape background image to .grid-hero
                 and .grid-fallback sections with linear-gradient overlay at
                 rgba(11, 31, 58, 0.85) for canonical navy-deep tint.
                 Visible on customer portal, claims, and make-a-payment pages
                 automatically via the shared module. background-color
                 retained as fallback for image load failure.
   v1.3 changes: Focus retention bug fix. Swapped :focus for :focus-visible
                 on hero contact links, prefooter contact links, card phone
                 and email links (and icon companion), and card CTA buttons.
                 Hover styles no longer persist after mouse clicks. Keyboard
                 users continue to see the gold focus indicator via
                 :focus-visible. Tap-feedback :active state preserved on
                 card phone/email pills.
   v1.2 changes: Foundation-specificity defense via !important on color
                 declarations (foundation .phi-page a chain at specificity
                 (0,7,1) was overriding module class selectors at (0,2,0)).
                 Card phone/email contact links now use gold-soft pill on
                 hover/focus/active. Search bar fully modernized with hover
                 state, focus state, gold focus ring, and icon color
                 transitions tied to parent state.
   Worker Route: /carrier-grid/styles.css

   Foundation Dependency: phi-product-page-foundation (site-wide)
   Consumes: --phi-navy-deep, --phi-navy, --phi-gold, --phi-gold-soft,
   --phi-cream, --phi-charcoal-soft, --phi-font-serif, --phi-font-sans

   Architecture: Full-bleed section backgrounds + inner content
   wrappers at max-width 1350px (site standard, matches qf-shell
   line 5334 and 10281). Pattern matches car-hero / car-hero__inner
   and renters-hero / renters-hero__grid.

   Canonical colors (locked 2026-05-14 per Handoff v13):
     Navy:      #1B3A6B
     Navy Deep: #0B1F3A
     Gold:      #C9A961
     Gold Soft: #E8C76C  (hover/lift only)
     Cream:     #F7F5F0

   All selectors scoped under .phi-carrier-grid to prevent collision.
   ============================================================ */

.phi-carrier-grid,
.phi-carrier-grid *,
.phi-carrier-grid *::before,
.phi-carrier-grid *::after {
  box-sizing: border-box;
}

.phi-carrier-grid {
  font-family: var(--phi-font-sans, Inter, sans-serif);
  color: var(--phi-charcoal-soft, #444);
  line-height: 1.6;
}

/* ----------------------------------------------------------------
   SECTION 1: HERO (full-bleed navy + inner content at 1350px)
   ---------------------------------------------------------------- */
.phi-carrier-grid .grid-hero {
  background-color: var(--phi-navy-deep, #0B1F3A);
  background-image:
    linear-gradient(rgba(11, 31, 58, 0.85), rgba(11, 31, 58, 0.85)),
    url('https://primeharborinsurance.com/wp-content/uploads/2026/05/life-insurance-new-orleans.png');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  color: #FFFFFF;
}

.phi-carrier-grid .grid-hero__inner {
  max-width: 1350px;
  margin: 0 auto;
  padding: 28px 20px;
}

.phi-carrier-grid .grid-hero__title {
  font-family: var(--phi-font-serif, 'Playfair Display', Georgia, serif);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: #FFFFFF;
  margin: 0 0 10px;
}

.phi-carrier-grid .grid-hero__lede {
  font-size: 14px;
  line-height: 1.6;
  color: #E8E5DE;
  margin: 0 0 16px;
  max-width: 540px;
}

.phi-carrier-grid .grid-hero__contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.phi-carrier-grid .grid-hero__contact-link {
  color: var(--phi-gold, #C9A961) !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 14px;
  font-family: var(--phi-font-sans, Inter, sans-serif);
  border-bottom: 1px solid rgba(201, 169, 97, 0.18);
  transition: color 0.2s ease;
  word-break: break-word;
}

.phi-carrier-grid .grid-hero__contact-link:last-child {
  border-bottom: 0;
}

.phi-carrier-grid .grid-hero__contact-link:hover,
.phi-carrier-grid .grid-hero__contact-link:focus-visible {
  color: var(--phi-gold-soft, #E8C76C) !important;
  outline: none;
}

.phi-carrier-grid .grid-hero__contact-link .grid-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: inline-block;
}

/* ----------------------------------------------------------------
   SECTION 2: FILTER BAR (full-bleed cream + inner content at 1350px)
   ---------------------------------------------------------------- */
.phi-carrier-grid .grid-filter {
  background-color: var(--phi-cream, #F7F5F0);
  border-bottom: 1px solid rgba(11, 31, 58, 0.08);
}

.phi-carrier-grid .grid-filter__inner {
  max-width: 1350px;
  margin: 0 auto;
  padding: 20px 20px 14px;
}

.phi-carrier-grid .grid-filter__search {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: #FFFFFF;
  border: 1px solid rgba(11, 31, 58, 0.08);
  border-radius: 10px;
  padding: 11px 12px;
  margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(11, 31, 58, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.phi-carrier-grid .grid-filter__search:hover {
  border-color: rgba(11, 31, 58, 0.4);
  box-shadow: 0 2px 6px rgba(11, 31, 58, 0.08);
}

.phi-carrier-grid .grid-filter__search:focus-within {
  border-color: var(--phi-navy-deep, #0B1F3A);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.3);
}

.phi-carrier-grid .grid-filter__search-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: #7A8A99;
  transition: color 0.2s ease;
}

.phi-carrier-grid .grid-filter__search:hover .grid-filter__search-icon {
  color: var(--phi-navy, #1B3A6B);
}

.phi-carrier-grid .grid-filter__search:focus-within .grid-filter__search-icon {
  color: var(--phi-gold, #C9A961);
}

.phi-carrier-grid .grid-filter__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: var(--phi-navy-deep, #0B1F3A);
  font-family: var(--phi-font-sans, Inter, sans-serif);
  padding: 0;
}

.phi-carrier-grid .grid-filter__input::placeholder {
  color: #8A9AAB;
}

.phi-carrier-grid .grid-filter__chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.phi-carrier-grid .grid-filter__chip {
  border: 1px solid rgba(11, 31, 58, 0.2);
  background-color: #FFFFFF;
  color: var(--phi-navy-deep, #0B1F3A);
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 400;
  font-family: var(--phi-font-sans, Inter, sans-serif);
  cursor: pointer;
  min-height: 32px;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.phi-carrier-grid .grid-filter__chip:hover {
  border-color: var(--phi-navy, #1B3A6B);
  color: var(--phi-navy, #1B3A6B);
}

.phi-carrier-grid .grid-filter__chip.is-active {
  background-color: var(--phi-navy-deep, #0B1F3A);
  border-color: var(--phi-navy-deep, #0B1F3A);
  color: #FFFFFF;
  font-weight: 500;
}

.phi-carrier-grid .grid-filter__chip:focus-visible {
  outline: 2px solid var(--phi-gold, #C9A961);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------
   SECTION 3: SECTIONED GRIDS (full-bleed cream + inner content at 1350px)
   ---------------------------------------------------------------- */
.phi-carrier-grid .grid-sections {
  background-color: var(--phi-cream, #F7F5F0);
}

.phi-carrier-grid .grid-sections__inner {
  max-width: 1350px;
  margin: 0 auto;
  padding: 22px 20px 8px;
}

.phi-carrier-grid .grid-section {
  margin-bottom: 18px;
}

.phi-carrier-grid .grid-section.is-hidden {
  display: none;
}

.phi-carrier-grid .grid-section__title {
  font-family: var(--phi-font-serif, 'Playfair Display', Georgia, serif);
  font-size: 13px;
  font-weight: 500;
  color: var(--phi-navy-deep, #0B1F3A);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 14px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--phi-gold, #C9A961);
  display: inline-block;
}

.phi-carrier-grid .grid-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* ----------------------------------------------------------------
   SECTION 4: CARRIER CARD
   ---------------------------------------------------------------- */
.phi-carrier-grid .grid-card {
  background-color: #FFFFFF;
  border: 1px solid rgba(11, 31, 58, 0.12);
  border-radius: 10px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.phi-carrier-grid .grid-card.is-hidden {
  display: none;
}

.phi-carrier-grid .grid-card__name {
  font-family: var(--phi-font-serif, 'Playfair Display', Georgia, serif);
  font-size: 19px;
  font-weight: 500;
  color: var(--phi-navy-deep, #0B1F3A);
  line-height: 1.2;
  margin: 0 0 6px;
}

.phi-carrier-grid .grid-card__description {
  font-size: 13px;
  line-height: 1.5;
  color: var(--phi-charcoal-soft, #444);
  margin: 0 0 14px;
  flex: 1;
}

.phi-carrier-grid .grid-card__contacts {
  font-size: 12px;
  line-height: 1.7;
  margin-bottom: 14px;
}

.phi-carrier-grid .grid-card__contact-link {
  color: var(--phi-charcoal-soft, #444) !important;
  text-decoration: none;
  display: flex;
  width: fit-content;
  max-width: 100%;
  gap: 8px;
  align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  word-break: break-word;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.phi-carrier-grid .grid-card__contact-link:hover,
.phi-carrier-grid .grid-card__contact-link:focus-visible,
.phi-carrier-grid .grid-card__contact-link:active {
  background-color: var(--phi-gold-soft, #E8C76C);
  color: var(--phi-navy-deep, #0B1F3A) !important;
  outline: none;
}

.phi-carrier-grid .grid-card__contact-link:hover .grid-card__contact-icon,
.phi-carrier-grid .grid-card__contact-link:focus-visible .grid-card__contact-icon,
.phi-carrier-grid .grid-card__contact-link:active .grid-card__contact-icon {
  color: var(--phi-navy-deep, #0B1F3A);
}

.phi-carrier-grid .grid-card__contact-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: #7A8A99;
}

.phi-carrier-grid .grid-card__cta {
  display: block;
  text-align: center;
  background-color: var(--phi-navy-deep, #0B1F3A);
  color: #FFFFFF !important;
  text-decoration: none;
  padding: 13px 14px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--phi-font-sans, Inter, sans-serif);
  letter-spacing: 0.02em;
  min-height: 44px;
  margin-top: auto;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.phi-carrier-grid .grid-card__cta:hover,
.phi-carrier-grid .grid-card__cta:focus-visible {
  background-color: var(--phi-navy, #1B3A6B);
  color: #FFFFFF !important;
  outline: none;
}

.phi-carrier-grid .grid-card__cta:active {
  transform: scale(0.99);
}

.phi-carrier-grid .grid-card__cta-arrow {
  display: inline-block;
  margin-left: 4px;
}

@media (hover: hover) {
  .phi-carrier-grid .grid-card:hover {
    border-color: rgba(201, 169, 97, 0.45);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(11, 31, 58, 0.06);
  }
}

/* ----------------------------------------------------------------
   SECTION 5: EMPTY STATE (no filter results)
   ---------------------------------------------------------------- */
.phi-carrier-grid .grid-empty {
  display: none;
  padding: 28px 20px;
  text-align: center;
  font-size: 14px;
  color: var(--phi-charcoal-soft, #444);
}

.phi-carrier-grid .grid-empty.is-visible {
  display: block;
}

.phi-carrier-grid .grid-empty__cta {
  color: var(--phi-navy, #1B3A6B);
  text-decoration: underline;
  font-weight: 500;
}

/* ----------------------------------------------------------------
   SECTION 6: FALLBACK PANEL (full-bleed navy + inner content at 1350px)
   ---------------------------------------------------------------- */
.phi-carrier-grid .grid-fallback {
  background-color: var(--phi-navy-deep, #0B1F3A);
  background-image:
    linear-gradient(rgba(11, 31, 58, 0.85), rgba(11, 31, 58, 0.85)),
    url('https://primeharborinsurance.com/wp-content/uploads/2026/05/life-insurance-new-orleans.png');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  color: #FFFFFF;
}

.phi-carrier-grid .grid-fallback__inner {
  max-width: 1350px;
  margin: 0 auto;
  padding: 24px 20px;
  text-align: center;
}

.phi-carrier-grid .grid-fallback__title {
  font-family: var(--phi-font-serif, 'Playfair Display', Georgia, serif);
  font-size: 24px;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 1.2;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

.phi-carrier-grid .grid-fallback__body {
  font-size: 14px;
  line-height: 1.6;
  color: #D8D3C8;
  margin: 0 auto 16px;
  max-width: 620px;
}

.phi-carrier-grid .grid-fallback__contact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  justify-content: center;
}

.phi-carrier-grid .grid-fallback__link {
  color: var(--phi-gold, #C9A961) !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 14px;
  word-break: break-word;
  transition: color 0.2s ease;
}

.phi-carrier-grid .grid-fallback__link:hover,
.phi-carrier-grid .grid-fallback__link:focus-visible {
  color: var(--phi-gold-soft, #E8C76C) !important;
  outline: none;
}

.phi-carrier-grid .grid-fallback__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* ----------------------------------------------------------------
   SECTION 7: TABLET (640px and up)
   ---------------------------------------------------------------- */
@media (min-width: 640px) {
  .phi-carrier-grid .grid-hero__inner { padding: 36px 32px; }
  .phi-carrier-grid .grid-hero__title { font-size: 30px; }
  .phi-carrier-grid .grid-hero__contact {
    flex-direction: row;
    gap: 20px;
    flex-wrap: wrap;
  }
  .phi-carrier-grid .grid-hero__contact-link {
    border-bottom: 0;
    padding: 4px 0;
  }
  .phi-carrier-grid .grid-filter__inner { padding: 24px 32px 16px; }
  .phi-carrier-grid .grid-sections__inner { padding: 28px 32px 12px; }
  .phi-carrier-grid .grid-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .phi-carrier-grid .grid-fallback__inner { padding: 36px 32px; }
  .phi-carrier-grid .grid-fallback__title { font-size: 28px; }
  .phi-carrier-grid .grid-fallback__contact {
    flex-direction: row;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ----------------------------------------------------------------
   SECTION 8: DESKTOP (1024px and up)
   ---------------------------------------------------------------- */
@media (min-width: 1024px) {
  .phi-carrier-grid .grid-hero__inner { padding: 44px 40px; }
  .phi-carrier-grid .grid-hero__title { font-size: 34px; }
  .phi-carrier-grid .grid-filter__inner {
    padding: 28px 40px 18px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
  }
  .phi-carrier-grid .grid-filter__search {
    flex: 1;
    min-width: 280px;
    margin-bottom: 0;
  }
  .phi-carrier-grid .grid-sections__inner { padding: 32px 40px 16px; }
  .phi-carrier-grid .grid-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .phi-carrier-grid .grid-fallback__inner { padding: 44px 40px; }
  .phi-carrier-grid .grid-fallback__title { font-size: 32px; }
}

/* ----------------------------------------------------------------
   SECTION 9: ACCESSIBILITY AND MOTION
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .phi-carrier-grid *,
  .phi-carrier-grid *::before,
  .phi-carrier-grid *::after {
    transition: none !important;
    animation: none !important;
  }
}

.phi-carrier-grid :focus-visible {
  outline: 2px solid var(--phi-gold, #C9A961);
  outline-offset: 2px;
}