/* ============================================================
   About Us - front/about_us_v2.blade.php, when CommonHelper::ABOUT_US_V2 is
   on. The old page and its rules are untouched.

   Three blocks on white, centred as the old page centred them. Everything is
   scoped to .about-v2. The slider is the site's own owl carousel, so what
   follows is only the part owl leaves to the page.
   ============================================================ */
.about-v2{
  --brand:#ffcc2a;
  --ink:#1a1a1a;
  --ink-2:#3f4550;
  --muted:#6b7280;
  --line:#e6e8ec;
  --line-2:#f0f1f4;
  --r:10px;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);

  font-family:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:#fff;
  /* .nav-top-fixed stands over the top of the page; this is the room it needs */
  padding:150px 0 60px;
}
.about-v2 *{box-sizing:border-box}
.about-v2 h1,.about-v2 h2,.about-v2 h3{margin:0;font-weight:700;letter-spacing:-.01em}

.about-v2 .abt-wrap{max-width:1240px;margin:0 auto;padding:0 20px}
.about-v2 .abt-intro{max-width:820px;margin:0 auto;padding:0 0 8px;text-align:center}
.about-v2 .abt-sec{padding:34px 0}
.about-v2 .abt-sec-hd{max-width:780px;margin:0 auto 26px;text-align:center}
.about-v2 .abt-h{font-size:26px;line-height:1.3}
/* separator-yellow, centred under the heading as the old page had it */
.about-v2 .abt-h::after{content:"";display:block;width:56px;height:3px;border-radius:2px;background:var(--brand);margin:14px auto 18px}
.about-v2 .abt-body{font-size:14px;line-height:1.85;color:var(--ink-2)}
.about-v2 .abt-body p{margin-bottom:12px}
.about-v2 .abt-body p:last-child{margin-bottom:0}

/* ------------------------------------------------------------
   the slider: the side padding is the room the arrows stand in,
   beside the cards rather than on them
   ------------------------------------------------------------ */
.about-v2 .abt-slider{padding:0 48px}
/* Owl's inline-block items are each their own height, which left the social
   marks at a different level in every card. A flex stage makes them match. */
.about-v2 .abt-slider .owl-stage{display:flex}
.about-v2 .abt-slider .owl-item{display:flex;height:auto}
.about-v2 .abt-slider .owl-item > .abt-card{width:100%}
/* Owl cuts off anything outside the slider, which hid the first card's left
   border and the shadows. Side padding would show the next card, so the left
   gap goes inside each item. */
.about-v2 .abt-slider .owl-stage-outer{padding:4px 0 12px;margin:-4px 0 -12px}
.about-v2 .abt-slider .owl-item{padding-left:4px}

.about-v2 .abt-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:26px 20px;text-align:center;display:flex;flex-direction:column}
/* The photograph sits over the initials, so a member with no picture still
   has a face - and so does one whose picture will not load, since the img
   removes itself and uncovers them. */
.about-v2 .abt-face{position:relative;overflow:hidden;width:132px;height:132px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;font-size:38px;font-weight:800;letter-spacing:-.02em}
.about-v2 .abt-face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.about-v2 .abt-face.is-a{background:#fff2cc;color:#8a6b00}
.about-v2 .abt-face.is-b{background:#e3ecfb;color:#1c4f9c}
.about-v2 .abt-face.is-c{background:#e7f5ef;color:#0f7b52}
.about-v2 .abt-face.is-d{background:#efe8fb;color:#5a3fa0}
.about-v2 .abt-face.is-e{background:#fde9e6;color:#b42318}
.about-v2 .abt-face.is-f{background:#e8f1f2;color:#28656c}
.about-v2 .abt-card h3{font-size:15.5px}
.about-v2 .abt-role{margin:5px 0 0;font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.about-v2 .abt-bio{margin:10px 0 0;font-size:13px;color:var(--ink-2);line-height:1.7}
.about-v2 .abt-slider.is-quote .abt-bio{font-style:italic}
/* margin-top:auto lines the marks up across a row, whatever the bios run to */
.about-v2 .abt-social{display:flex;justify-content:center;gap:9px;margin-top:auto;padding-top:16px}
.about-v2 .abt-social a{width:30px;height:30px;border-radius:50%;background:var(--line-2);color:var(--muted);display:grid;place-items:center}
.about-v2 .abt-social a:hover{background:var(--ink);color:#fff}
.about-v2 .abt-social svg{width:14px;height:14px}

/* the arrows and the dots: owl draws them, this places them */
.about-v2 .abt-slider .owl-nav{margin:0}
.about-v2 .abt-slider .owl-nav .owl-prev,
.about-v2 .abt-slider .owl-nav .owl-next{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;padding:0;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);color:var(--ink);font-size:17px;display:grid;place-items:center;transition:background .15s,border-color .15s,color .15s}
.about-v2 .abt-slider .owl-nav .owl-prev{left:0}
.about-v2 .abt-slider .owl-nav .owl-next{right:0}
.about-v2 .abt-slider .owl-nav .owl-prev:hover,
.about-v2 .abt-slider .owl-nav .owl-next:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.about-v2 .abt-slider .owl-nav .owl-prev:focus,
.about-v2 .abt-slider .owl-nav .owl-next:focus{outline:none}
.about-v2 .abt-slider .owl-dots{margin-top:20px;text-align:center}
.about-v2 .abt-slider .owl-dots .owl-dot{display:inline-block;padding:0;border:0;background:none}
.about-v2 .abt-slider .owl-dots .owl-dot:focus{outline:none}
.about-v2 .abt-slider .owl-dots .owl-dot span{display:inline-block;width:8px;height:8px;margin:0 4px;border-radius:50%;background:var(--line-2);transition:width .2s,background .2s}
.about-v2 .abt-slider .owl-dots .owl-dot.active span{width:22px;border-radius:4px;background:var(--brand)}

/* ------------------------------------------------------------
   narrower screens: the arrows come in with the page, so they
   stay off the cards
   ------------------------------------------------------------ */
@media (max-width:991px){
  .about-v2{padding:132px 0 44px}
  .about-v2 .abt-slider{padding:0 34px}
}
@media (max-width:575px){
  .about-v2{padding:122px 0 36px}
  .about-v2 .abt-wrap{padding:0 14px}
  .about-v2 .abt-h{font-size:21px}
  .about-v2 .abt-slider{padding:0 26px}
  .about-v2 .abt-face{width:110px;height:110px;font-size:32px}
}