/* ============================================================
   ICQUOTES.COM — BROKER PORTAL PAGE
   Loads AFTER styles-a.css, which supplies the colours, fonts,
   header, footer and buttons. This file adds only what is unique
   to this page:

       HERO       mountain background, title, featured card
       RESOURCES  the three picture cards on the tinted band
       ROWS       one resource per line, with a round arrow
       ACTIONS    the three sign-in / help cards at the bottom

   QUICK EDITS
   1. Colours and fonts: styles-a.css, the variables at the top.
   2. Text and links: broker-portal.htm (search for EDIT TEXT).
   3. Hero pictures: assets/broker-hero-panorama.jpg (wide screens)
      and assets/broker-hero-mountains.jpg (phones) - see HERO below.
   ============================================================ */

:root {
  /* Which part of the panorama shows vertically on wide screens. */
  --broker-hero-position: center 60%;
}

/* Text that screen readers announce but nobody sees. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* A plain blue link with a line arrow, used on cards and in the hero. */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--blue);
  font-size: 15px;
  font-weight: 600;
}
.text-link svg {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .15s ease;
}
a.text-link:hover svg,
.resource-card:hover .text-link svg { transform: translateX(3px); }

/* ---------- HERO ----------
   Two background pictures, one per shape of hero:

   WIDE SCREENS (over 1050px) - assets/broker-hero-panorama.jpg,
   2880 x 443, a 6.5:1 panorama. The hero there is a short, wide strip
   (about 6:1), and the original 16:9 photograph had to be enlarged
   until only a thin slice showed, cutting off the peaks. The panorama
   is that photograph's peaks-to-treeline band, extended left and right
   with mirrored copies of itself. The two joins sit at 38% (behind the
   title, under the white wash) and 77% (behind the featured card), so
   neither shows. Rebuild it with make-hero-panorama.ps1 (in the
   originals folder, not uploaded) if the photo ever changes.

   PHONES AND TABLETS (1050px and under) - the original photograph,
   assets/broker-hero-mountains.jpg. The hero is tall there, which
   suits a 16:9 picture; see the 1050px media query below.

   The white wash on the left keeps the title readable. */
.broker-hero {
  background-color: #eaf3fb;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, .86) 0%, rgba(255, 255, 255, .62) 36%, rgba(255, 255, 255, .1) 60%, rgba(255, 255, 255, 0) 100%),
    url("assets/broker-hero-panorama.jpg");
  background-position: center, var(--broker-hero-position);
  background-size: cover, cover;
  background-repeat: no-repeat;
}
/* Kept compact on purpose: the hero was halved in height on 23 Sep
   2026 (590px -> 295px at 1691px wide) so the resource cards show
   without scrolling. The featured card is wide so each of its three
   points fits on one line, which is what keeps it short. */
.broker-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 740px);
  align-items: center;
  gap: 40px;
  padding: 22px 0 24px;
}
.broker-hero-copy h1 {
  color: var(--navy);
  font-size: clamp(46px, 3.9vw, 66px);
  letter-spacing: -2px;
  line-height: 1.02;
}
.broker-hero-lead {
  max-width: 600px;
  margin-top: 14px;
  color: #3b4a61;
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.5;
}
.broker-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
.broker-hero-login { margin-top: 12px; color: var(--body-text); font-size: 15px; }
.broker-hero-login a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  color: var(--blue);
  font-weight: 600;
}
.broker-hero-login a:hover { text-decoration: underline; text-underline-offset: 4px; }
.broker-hero-login svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- FEATURED CARD ----------
   Heading, a one-line lead with the PDF link, then the three selling
   points. No thumbnail and no feature chips - both were cut to halve
   the hero's height. */
.featured-card {
  padding: 18px 24px 20px;
  background: rgba(255, 255, 255, .94);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(8, 30, 59, .12);
}
.featured-card h2 {
  margin-top: 0;
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: clamp(22px, 1.6vw, 27px);
  font-weight: 400;
  letter-spacing: -.6px;
  line-height: 1.15;
}

.selling-points {
  display: grid;
  gap: 9px;
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}
.selling-points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--body-text);
  font-size: 14.5px;
  line-height: 1.45;
}
.selling-points b { color: var(--navy); font-weight: 600; }
.sp-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  margin-top: 1px;
  border-radius: 50%;
  background: #e0efff;
}
.featured-more { display: flex; width: max-content; margin: 12px 0 0 auto; }

.sp-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--blue);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- THREE RESOURCE CARDS ---------- */
.resource-band { padding: 28px 0 30px; background: var(--ice); }
/* As in the mockup, the band and the rows run wider than the hero:
   --cards-width (styles-a.css) is the width the landing page uses for
   its benefit cards. */
.resource-band .container,
.rows-section .container { max-width: var(--cards-width); }
.resource-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.resource-card {
  display: flex;
  align-items: stretch;
  gap: 20px;
  min-width: 0;
  padding: 20px;
  background: #fff;
  border-radius: var(--card-radius);
  box-shadow: 0 1px 2px rgba(8, 30, 59, .04);
  transition: transform .15s ease, box-shadow .15s ease;
}
.resource-card:hover { transform: translateY(-3px); box-shadow: 0 14px 26px rgba(8, 30, 59, .12); }
.resource-card:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.resource-card img {
  flex: 0 0 150px;
  width: 150px;
  height: 132px;
  border-radius: 8px;
  box-shadow: 0 0 0 1px #e1ebf6;
  object-fit: cover;
  object-position: left top;
}
.resource-body { display: flex; flex-direction: column; min-width: 0; }
.resource-title {
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 19px;
  letter-spacing: -.4px;
  line-height: 1.25;
}
.resource-desc { margin-top: 8px; color: var(--body-text); font-size: 15px; line-height: 1.5; }
.resource-body .text-link { margin-top: auto; padding-top: 12px; }

/* ---------- ONE RESOURCE PER ROW ---------- */
.rows-section { padding: 30px 0 0; background: #fff; }
.rows { border-top: 1px solid var(--line); }
.row {
  display: grid;
  grid-template-columns: 122px minmax(0, 1fr) 210px;
  align-items: center;
  gap: 26px;
  padding: 16px 6px;
  border-bottom: 1px solid var(--line);
}
.row:hover { background: var(--ice); }
.row:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.row-pic {
  width: 122px;
  height: 82px;
  border-radius: 10px;
  object-fit: cover;
}
.row-kicker {
  display: block;
  color: var(--blue);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}
.row-title {
  display: block;
  margin-top: 6px;
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -.5px;
  line-height: 1.25;
}
.row-desc { display: block; margin-top: 7px; color: var(--body-text); font-size: 15px; line-height: 1.5; }
.row-go {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--blue);
  font-size: 15px;
  font-weight: 600;
}
.row-go svg {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 11px;
  border-radius: 50%;
  background: var(--button-blue);
  fill: #fff;
}
.row:hover .row-go svg { background: #0055ad; }

/* ---------- MORE RESOURCES ---------- */
.more-resources {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 26px;
  margin: 0;
  padding: 22px 6px 0;
  font-size: 15px;
}
.more-resources b { color: var(--navy); font-weight: 600; }
.more-resources a { color: var(--blue); }
.more-resources a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- THE THREE ACTION CARDS ---------- */
.broker-actions-section { margin-top: 38px; padding: 34px 0 36px; background: var(--ice); }
.broker-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 28px 24px;
  background: #fff;
  border-radius: var(--card-radius);
  text-align: center;
}
.action-card h2 {
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -.4px;
  line-height: 1.25;
}
.action-card p { color: var(--body-text); font-size: 15px; line-height: 1.55; }
/* styles-a.css sets white-space:nowrap on .button, which suits the short
   hero labels. These are long sentences, so on a narrow card they have
   to be allowed to wrap - otherwise the card cannot shrink and the page
   scrolls sideways. */
.action-card .button {
  margin-top: auto;
  width: 100%;
  max-width: 330px;
  white-space: normal;
  line-height: 1.3;
}
.action-card img { width: 86px; height: auto; }

/* ============================================================
   RESPONSIVE. The breakpoints match styles-a.css so the header
   and these blocks always change shape together.
   ============================================================ */
@media (max-width: 1360px) {
  .broker-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 640px); gap: 32px; }
}

/* Three narrow cards read better with the picture on top. */
@media (max-width: 1250px) {
  .resource-cards { gap: 16px; }
  .resource-card { flex-direction: column; gap: 14px; padding: 16px 16px 18px; }
  .resource-card img { flex: none; width: 100%; height: 150px; }
  .row { grid-template-columns: 110px minmax(0, 1fr) 190px; gap: 20px; }
  .row-pic { width: 110px; height: 74px; }
}

/* The hero stacks: title first, featured card underneath. */
@media (max-width: 1050px) {
  .broker-hero {
    background-image:
      linear-gradient(180deg, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, .55) 45%, rgba(255, 255, 255, .25) 100%),
      url("assets/broker-hero-mountains.jpg");
    background-position: center, center 68%;
    background-size: cover, cover;
  }
  .broker-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 42px 0 46px; }
  .featured-card { max-width: 680px; }
  .resource-cards { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .resource-card { flex-direction: row; gap: 20px; padding: 18px; }
  .resource-card img { flex: 0 0 170px; width: 170px; height: 120px; }
  /* minmax(0,1fr), not 1fr: a plain 1fr will not shrink below its
     content and the card pushes past the screen edge. */
  .broker-actions { grid-template-columns: minmax(0, 1fr); }
  .action-card { max-width: 560px; margin: 0 auto; width: 100%; }
}

@media (max-width: 760px) {
  .broker-hero-inner { padding: 32px 0 36px; }
  /* Capped at 52px so a narrow screen never gets a bigger title than
     the 1050px layout just above it. */
  .broker-hero-copy h1 { font-size: clamp(40px, 7.5vw, 52px); letter-spacing: -1.6px; }
  .broker-hero-actions .button { flex: 1 1 200px; }
  .rows-section { padding-top: 22px; }
  /* The arrow drops onto its own line rather than squeezing the text. */
  .row { grid-template-columns: 88px minmax(0, 1fr); gap: 18px; padding: 16px 2px; }
  .row-pic { width: 88px; height: 60px; }
  .row-title { font-size: 20px; }
  .row-go { grid-column: 1 / -1; justify-content: flex-start; gap: 12px; padding-top: 2px; }
  .row-go svg { flex-basis: 34px; width: 34px; height: 34px; padding: 8px; }
  .more-resources { gap: 10px 20px; font-size: 14px; }
}

@media (max-width: 560px) {
  .featured-card { padding: 16px 16px 18px; }
  .featured-card h2 { font-size: 21px; }
  .resource-card { gap: 14px; padding: 14px; }
  .resource-card img { flex-basis: 104px; width: 104px; height: 96px; }
  .resource-title { font-size: 18px; }
  .resource-desc { font-size: 14px; }
}

/* The action buttons are capped at 330px so they do not stretch across a
   wide card. On a phone that cap plus the card's own padding is wider
   than the screen, so both have to give. */
@media (max-width: 480px) {
  .action-card { gap: 15px; padding: 24px 18px; }
  .action-card .button { max-width: none; }
}

@media (max-width: 420px) {
  .broker-hero-copy h1 { font-size: 40px; letter-spacing: -1.2px; }
  .broker-hero-lead { font-size: 16px; }
  .selling-points li { gap: 11px; font-size: 14px; }
  .row { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; }
  .row-pic { width: 72px; height: 52px; }
  .row-title { font-size: 18px; }
  .row-desc { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .resource-card, .text-link svg { transition: none; }
  .resource-card:hover, a.text-link:hover svg, .resource-card:hover .text-link svg { transform: none; }
}

@media print {
  .broker-hero { background: none; }
  .featured-card { box-shadow: none; border: 1px solid #ccc; }
  .resource-card:hover, .row:hover { background: none; box-shadow: none; transform: none; }
  .resource-band, .broker-actions-section { background: none; }
}

/* ============================================================
   WHY BROKERS CHOOSE - PHOTO PANEL (chosen 23 Sep 2026: design 1 of 5)
   "Why Brokers Choose ICHRASystems" as an editorial card: the team
   photo fills the left of the box from top to bottom, the heading,
   the three points and the link sit on white to its right.

   Kept last in this file on purpose. Every rule is scoped to
   .fc-photo-panel, so nothing else on the page changes.

   HEIGHT: the photo never sets the box's height - it is laid over
   its column and cropped to whatever height the text needs - so the
   box stays as short as the text (about 240px on wide screens, the
   same as the plain card) and the hero does not grow.

   PHOTO: assets/broker-team.jpg, 500 x 375. It is never
   drawn larger than that. --fc-photo-focus picks which part shows
   when the panel is narrower or wider than the picture.
   ============================================================ */

.fc-photo-panel {
  --fc-photo-width: 36%;
  --fc-photo-focus: 46% 30%;
  --fc-radius: 16px;
  display: grid;
  grid-template-columns: var(--fc-photo-width) minmax(0, 1fr);
  padding: 0;
  overflow: hidden;
  background: #fff;
  border-radius: var(--fc-radius);
  box-shadow: 0 22px 44px rgba(8, 30, 59, .16), 0 2px 6px rgba(8, 30, 59, .06);
}

/* ---------- THE PHOTO ---------- */
.fc-photo {
  position: relative;
  min-height: 100%;
  background: #dfe9f4;
}
.fc-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--fc-photo-focus);
}
/* A soft navy shade at the foot of the photo and a thin white seam
   where it meets the text: it reads as a printed plate, not a crop. */
.fc-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 30, 59, 0) 58%, rgba(8, 30, 59, .30) 100%),
    linear-gradient(90deg, rgba(7, 90, 189, .10) 0%, rgba(7, 90, 189, 0) 40%);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .7);
  pointer-events: none;
}

/* ---------- THE TEXT ---------- */
.fc-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 16px 26px 13px 28px;
}
.fc-photo-panel h2 {
  font-size: clamp(22px, 1.35vw, 25px);
  letter-spacing: -.5px;
}

/* The rule under the heading: a hairline with a short blue bar at its
   start, like a section rule in a magazine. */
.fc-photo-panel .selling-points {
  position: relative;
  gap: 6px;
  margin-top: 12px;
  padding-top: 13px;
}
.fc-photo-panel .selling-points::before {
  content: "";
  position: absolute;
  left: 0;
  top: -2px;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--button-blue);
}
.fc-photo-panel .selling-points li {
  gap: 12px;
  font-size: 14px;
  line-height: 1.42;
}
.fc-photo-panel .sp-icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  margin-top: 2px;
  background: linear-gradient(140deg, #1b7fe3 0%, var(--blue) 100%);
  box-shadow: 0 3px 8px rgba(7, 90, 189, .22);
}
.fc-photo-panel .sp-icon svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
}

.fc-photo-panel .featured-more {
  margin: 6px 0 0 auto;
}
.fc-photo-panel .featured-more:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* 1051-1360px: the box is 640px wide; a slightly narrower photo keeps
   the text column wide enough for two-line points. */
@media (max-width: 1360px) {
  .fc-photo-panel { --fc-photo-width: 33%; }
  .fc-body { padding: 18px 22px 15px 24px; }
}

/* Phones: the photo moves above the text as a short banner. */
@media (max-width: 640px) {
  .fc-photo-panel { grid-template-columns: minmax(0, 1fr); --fc-photo-focus: 50% 24%; }
  .fc-photo { height: 180px; min-height: 0; }
  .fc-photo::after {
    background: linear-gradient(180deg, rgba(8, 30, 59, 0) 55%, rgba(8, 30, 59, .26) 100%);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .7);
  }
  .featured-card.fc-photo-panel { padding: 0; }
  .fc-body { padding: 18px 18px 16px; }
}
@media (max-width: 420px) {
  .fc-photo { height: 160px; }
  .fc-body { padding: 16px 16px 15px; }
}

@media print {
  .fc-photo-panel { box-shadow: none; border: 1px solid #ccc; }
  .fc-photo::after { display: none; }
}