/* HarbourStone company cards -- [hs_company_cards]
 *
 * Every number here was taken from the Elementor-generated stylesheets the
 * cards used to be styled by: post-7.css for the compact (Home) variant and
 * post-9.css for the tall (Our Companies) one. Those rules were keyed on
 * `.elementor-element-<id>`, and the ids went away with the widgets, so they
 * are restated here against variant classes instead.
 *
 * Specificity notes, both of which cost a measurement round if ignored:
 *
 *  * components.LIB_CSS sets `.hs-page .hs-card-link .elementor-button{padding:0}`
 *    at (0,3,0) and is emitted INSIDE the page body, i.e. after this file. Any
 *    rule here that has to beat it needs four classes, not three.
 *  * the opposite case: `.hs-page.hs-oc-companies .hs-logo img{height:79px}` and
 *    the tablet tick-size override are PAGE rules that must keep winning, so
 *    the logo height is deliberately absent from this file (LIB_CSS owns the
 *    74px default) and the tick font size is left at (0,4,0) with no !important.
 *
 * Colours: the four company accents arrive as `--hs-accent` on each card, set
 * inline from the CPT. Navy and body text are read from the Elementor kit,
 * which build/brand.json generates -- no brand hex is written here.
 */

/* ------------------------------------------------------------------ grid -- */

.hs-cards {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  padding: 0;
}

.hs-cards--compact { gap: 20px; }
.hs-cards--tall    { gap: 18px; }

/* Four cards at 23.5% plus three 20px gaps clears 100% only because the
   percentages were shaved; the row still has to wrap at the tablet
   breakpoint, which is where two-up starts. */
@media (max-width: 1024px) {
  .hs-cards { flex-wrap: wrap; }
}

/* ------------------------------------------------------------------ card -- */

.hs-cards .hs-cc {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  min-width: 0;
  box-sizing: border-box;
  width: 100%;
  background-color: #FFFFFF;
  border-style: solid;
  border-radius: 10px;
}

.hs-cards--compact .hs-cc {
  border-width: 1px;
  border-color: var(--hs-accent-32);
  padding: 22px;
}

/* The tall card's accent bar is the card's own top border, 3px of solid
   accent over a soft tint on the other three sides. Elementor's border
   control carries one colour for all four sides, which is why the generated
   build needed a per-page stylesheet block to say this at all. */
.hs-cards--tall .hs-cc {
  border-width: 3px 1px 1px 1px;
  border-top-color: var(--hs-accent);
  border-right-color: var(--hs-accent-30);
  border-bottom-color: var(--hs-accent-30);
  border-left-color: var(--hs-accent-30);
  padding: 53px 29px 22px 29px;
}

/* Widths, in Elementor's own order: base, phone, then the two tablet-and-up
   windows. The 768-1024 rule must come last -- it overrides the 23.5% for the
   two-up tablet layout. */
@media (max-width: 767px) {
  .hs-cards .hs-cc { width: 100%; }
}
@media (min-width: 768px) {
  .hs-cards--compact .hs-cc { width: 23.5%; }
  .hs-cards--tall .hs-cc    { width: 23.7%; }
}
@media (max-width: 1024px) and (min-width: 768px) {
  .hs-cards .hs-cc { width: 48%; }
}

/* Inside an Elementor container this is already zero; restated so the cards
   do not gain 20px between every part if the shortcode is ever used outside
   one (a widget area, say). */
.hs-cards .hs-cc .elementor-widget:not(:last-child) { --kit-widget-spacing: 0px; }

/* ------------------------------------------------------------------ logo -- */

.hs-cards .hs-cc-media {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
}

.hs-cards--compact .hs-cc-media { margin: 0 0 12px 0; }
.hs-cards--tall .hs-cc-media    { margin: 0 0 48px 0; }

.hs-cards .hs-cc-logo {
  margin: 0;
  text-align: center;
}

/* ---------------------------------------------------------------- heading -- */

.hs-cards--compact .hs-cc .hs-cc-titlew { margin: 0 0 10px 0; }
.hs-cards--tall .hs-cc .hs-cc-titlew    { margin: 0 0 20px 0; }

/* The compact card's heading is the service name, set in the BODY face at
   21/1.16 bold -- it is a label, not a display heading. The tall card's is the
   company name, in the heading face at 26/1.25. */
.hs-cards--compact .hs-cc .hs-cc-titlew .elementor-heading-title {
  font-family: "Nunito Sans", Sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.16em;
  color: var(--hs-accent);
}

.hs-cards--tall .hs-cc .hs-cc-titlew .elementor-heading-title {
  font-family: "Playfair Display", Sans-serif;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.25em;
  color: var(--hs-accent);
}

@media (max-width: 1024px) {
  .hs-cards--tall .hs-cc .hs-cc-titlew .elementor-heading-title { font-size: 23px; }
}
@media (max-width: 767px) {
  .hs-cards--compact .hs-cc .hs-cc-titlew .elementor-heading-title { font-size: 19px; }
  .hs-cards--tall .hs-cc .hs-cc-titlew .elementor-heading-title { font-size: 20px; }
}

/* ------------------------------------------------------- rule + strapline -- */

.hs-cards--tall .hs-cc .hs-cc-rule {
  --divider-border-style: solid;
  --divider-border-width: 3px;
  --divider-color: var(--hs-accent);
  margin: 0 0 27px 0;
  padding: 0;
}
.hs-cards--tall .hs-cc .hs-cc-rule .elementor-divider-separator { width: 47px; }
.hs-cards--tall .hs-cc .hs-cc-rule .elementor-divider {
  padding-block-start: 0;
  padding-block-end: 0;
}

.hs-cards--tall .hs-cc .hs-cc-strap { margin: 0 0 19px 0; }
.hs-cards--tall .hs-cc .hs-cc-strap .elementor-heading-title {
  font-family: "Nunito Sans", Sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3em;
  color: var(--e-global-color-primary, #082038);
}
@media (max-width: 767px) {
  .hs-cards--tall .hs-cc .hs-cc-strap .elementor-heading-title { font-size: 16px; }
}

/* ------------------------------------------------------------------ body -- */

.hs-cards .hs-cc .hs-cc-body {
  font-family: "Nunito Sans", Sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--e-global-color-text, #4A5560);
}

/* The loose 1.69em leading on Our Companies is measured, not a typo: that
   page's line pitch really does run 1.7-1.9em and it is most of what makes
   its bands as tall as they are. */
.hs-cards--compact .hs-cc .hs-cc-body { margin: 0 0 12px 0; line-height: 1.35em; }
.hs-cards--tall .hs-cc .hs-cc-body    { margin: 0 0 27px 0; line-height: 1.69em; }

@media (max-width: 767px) {
  .hs-cards .hs-cc .hs-cc-body { font-size: 16px; }
}

.hs-cards .hs-cc .hs-cc-body p { margin-bottom: 0.55em; }
.hs-cards .hs-cc .hs-cc-body p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- ticklist -- */

.hs-cards .hs-cc .hs-cc-ticks {
  margin: 0;
  --e-icon-list-icon-size: 13px;
  --icon-vertical-offset: 0px;
}

.hs-cards .hs-cc .hs-cc-ticks .elementor-icon-list-icon { padding-inline-end: 9px; }
.hs-cards .hs-cc .hs-cc-ticks .elementor-icon-list-icon svg { fill: var(--hs-accent); }
.hs-cards .hs-cc .hs-cc-ticks .elementor-icon-list-text {
  color: var(--e-global-color-text, #4A5560);
  font-family: "Nunito Sans", Sans-serif;
  font-weight: 400;
  line-height: 1.35em;
}

.hs-cards--compact .hs-cc .hs-cc-ticks .elementor-icon-list-text { font-size: 14px; }
.hs-cards--tall .hs-cc .hs-cc-ticks .elementor-icon-list-text { font-size: 13px; }

/* Elementor splits the item gap across the two neighbours, half above and
   half below, which is why these are calc(x/2) and not x. */
.hs-cards--compact .hs-cc .hs-cc-ticks .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child) {
  padding-block-end: calc(7px / 2);
}
.hs-cards--compact .hs-cc .hs-cc-ticks .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child) {
  margin-block-start: calc(7px / 2);
}
.hs-cards--tall .hs-cc .hs-cc-ticks .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child) {
  padding-block-end: calc(10px / 2);
}
.hs-cards--tall .hs-cc .hs-cc-ticks .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child) {
  margin-block-start: calc(10px / 2);
}

/* ------------------------------------------------------------- card foot -- */

.hs-cards .hs-cc .hs-card-foot {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin: 0;
  /* margin-top:auto floats the link to the card floor; LIB_CSS says it with
     !important, this is the standalone fallback. */
  margin-top: auto;
}

.hs-cards--compact .hs-cc .hs-card-foot { padding: 16px 0 0 0; }
.hs-cards--tall .hs-cc .hs-card-foot    { padding: 50px 0 0 0; }

/* Four classes, not three: LIB_CSS's `.hs-page .hs-card-link .elementor-button
   {padding:0}` is (0,3,0) and is printed after this file. */
.hs-cards .hs-cc .hs-card-link .elementor-button {
  background-color: rgba(0, 0, 0, 0);
  font-family: "Nunito Sans", Sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4em;
  color: var(--hs-accent);
  fill: var(--hs-accent);
  border-radius: 0;
  /* 6px vertical lifts the 20px text to the 24px WCAG 2.5.8 pointer minimum. */
  padding: 6px 0 6px 0;
}

.hs-cards .hs-cc .hs-card-link .elementor-button-content-wrapper {
  flex-direction: row-reverse;
  gap: 9px;
}

.hs-cards .hs-cc .hs-card-link .elementor-button:hover,
.hs-cards .hs-cc .hs-card-link .elementor-button:focus {
  color: var(--hs-accent);
  fill: var(--hs-accent);
}
.hs-cards .hs-cc .hs-card-link .elementor-button:hover svg,
.hs-cards .hs-cc .hs-card-link .elementor-button:focus svg {
  fill: var(--hs-accent);
}

/* Touch targets: the tap area grows to 46px below the desktop breakpoint,
   which is what the generated build did too. */
@media (max-width: 1024px) {
  .hs-cards .hs-cc .hs-card-link .elementor-button {
    font-size: 14px;
    padding: 13px 0 13px 0;
  }
}
@media (max-width: 767px) {
  .hs-cards .hs-cc .hs-card-link .elementor-button { font-size: 15px; }
}

/* Screen-reader-only company name inside the link label. LIB_CSS defines
   .hs-sr under .hs-page; repeated here so the shortcode is safe to use
   outside a library band. */
.hs-cards .hs-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ====================================================== simple (Governance) ==
 *
 * The Governance & Compliance page shows the same four companies as a plain
 * statement: the mark and the company NAME side by side on one line, one line
 * of governance copy under it, no rule, no ticks, no link. Measured off
 * "Governance & Complaince Page.png" (864 wide, S = 1440/864), where the row
 * sits at y 1200..1306 -- a 177px card.
 *
 * It is a third variant rather than a third component because everything that
 * makes a company card a company card -- the CPT read, the logo, the name, the
 * accent custom properties, the grid -- is identical. Only the parts drop out.
 */

.hs-cards--simple { gap: 20px; }

.hs-cards--simple .hs-cc {
  border-width: 1px;
  /* Neutral, not the accent: the design draws four identical hairlines here,
     where Home and Our Companies tint the border per company. */
  border-color: rgba(8, 32, 56, 0.10);
  padding: 26px 22px 22px 22px;
  justify-content: flex-start;
}

@media (min-width: 768px) {
  .hs-cards--simple .hs-cc { width: 23.5%; }
}
@media (max-width: 1024px) and (min-width: 768px) {
  .hs-cards--simple .hs-cc { width: 48%; }
}

/* The mark and the name on one line. hs-cc-media is a flex COLUMN for the
   other two variants, so the direction has to be restated, not just the gap. */
.hs-cards--simple .hs-cc .hs-cc-media {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin: 0 0 14px 0;
}

/* 38px, against LIB_CSS's 74px default for .hs-logo img. Three classes beats
   its two, so this wins whichever sheet is printed last. */
.hs-cards--simple .hs-cc .hs-cc-logo { flex: 0 0 auto; }
/* 32px, against LIB_CSS's 74px default for .hs-logo img. The height is what
   sets the mark's WIDTH here, and the mark's width is what is left for the
   name: at 38px the mark is 66px wide, the name gets 188px, and "POSITIVE
   CHOICES" needs 202 -- so the four names broke onto three lines and the row
   ran 30% over the design. */
.hs-cards--simple .hs-cc .hs-cc-logo img {
  height: 32px;
  width: auto;
  object-fit: contain;
}

.hs-cards--simple .hs-cc .hs-cc-titlew { margin: 0; min-width: 0; }
.hs-cards--simple .hs-cc .hs-cc-titlew .elementor-heading-title {
  font-family: "Playfair Display", Sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.22em;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  /* Navy, not the company accent: the design sets all four names in the group
     navy here. The accent is still on the card as --hs-accent for anything a
     later change wants to pick up. */
  color: var(--e-global-color-primary, #082038);
}

.hs-cards--simple .hs-cc .hs-cc-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.65em;
  text-align: center;
}

@media (max-width: 1024px) {
  .hs-cards--simple .hs-cc .hs-cc-titlew .elementor-heading-title { font-size: 18px; }
  /* 14px: at 13 the tablet audit flags it as small text, and two-up cards have
     the room. */
  .hs-cards--simple .hs-cc .hs-cc-body { font-size: 14px; }
}
@media (max-width: 767px) {
  .hs-cards--simple .hs-cc .hs-cc-titlew .elementor-heading-title { font-size: 19px; }
  .hs-cards--simple .hs-cc .hs-cc-body { font-size: 15px; }
}