/*! RP Theme — Our Firm
    The Firm Overview page's own sections: About the firm, the core values and the
    link to the Awards page. Loaded on the Our Firm template only; everything else on
    that page is the shared system. Hand-authored (not generated), so safe to edit. */

/* ---------- about the firm -------------------------------------- */
/* the photograph stands a little taller than it is wide, level with the copy beside it */
.firm-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:72px;align-items:center}
.firm-shot{aspect-ratio:25/26}
.firm-shot img{filter:saturate(.8) contrast(1.03)}
.firm-copy h2{font-size:var(--f-h2);margin-top:14px}
.firm-copy .rp-prose{max-width:60ch}
.firm-copy .btn{margin-top:34px}

/* ---------- core values ----------------------------------------- */
/* up to five to a row, each divided from the next by a fine line. The disc, the heading
   and the text keep a track each across the row (subgrid), so every description starts
   on the same line however the headings wrap; a second row opens under a line of its own */
.values-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-rows:auto auto auto}
.values-row+.values-row{margin-top:50px;padding-top:50px;border-top:1px solid var(--line)}
.value{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start;padding:0 32px;border-left:1px solid var(--line)}
.value:first-child{padding-left:0;border-left:0}
.value:last-child{padding-right:0}
.value .badge{grid-row:1;margin-bottom:22px}
.value h3{grid-row:2;font-size:20px;line-height:1.32}
.value p{grid-row:3;font-size:15px;line-height:1.7;margin-top:16px;max-width:36ch}

/* ---------- the link to the Awards page -------------------------- */
/* the marks sit in a square of hairline cells, each the directory's own logo in its own
   colours (1.5.0). Their three heights keep the proportions of the homepage's strip */
.firm-awards{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
.firm-awards__copy h2{font-size:var(--f-h2);margin-top:14px}
.firm-awards__copy p{font-size:var(--f-lead);line-height:1.7;max-width:44ch}
.firm-awards__copy .btn{margin-top:32px}
.firm-marks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-top:3px solid var(--red)}
.firm-marks--1{grid-template-columns:minmax(0,1fr)}
.firm-marks--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.firm-mark{display:flex;align-items:center;justify-content:center;min-height:172px;padding:28px;background:var(--white)}
.firm-mark img{width:auto;max-width:100%;object-fit:contain}
.firm-mark .m-sq{height:72px}
.firm-mark .m-wide{height:47px}
.firm-mark .m-xwide{height:37px}

@media(max-width:1200px){
  /* the copy runs longer than the narrower photograph is tall: the photograph matches it */
  .firm-grid{align-items:stretch}
  .firm-shot{aspect-ratio:auto;min-height:420px}
  .firm-grid,.firm-awards{gap:48px}
  .value{padding:0 18px}
  .value h3{font-size:18px}
  .value p{font-size:14.5px}
  .firm-mark{min-height:150px}
}
@media(max-width:900px){
  .firm-grid,.firm-awards{grid-template-columns:minmax(0,1fr);gap:40px}
  .firm-shot{min-height:0;height:380px}
  /* the values become one list: the disc beside each, a fine line between */
  .values-row{grid-auto-flow:row;grid-template-rows:none}
  .values-row+.values-row{margin-top:0;padding-top:0;border-top:0}
  .value{grid-row:auto;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr;
    padding:26px 0;border-left:0;border-top:1px solid var(--line)}
  .values>:first-child>.value:first-child{padding-top:0;border-top:0}
  .values>:last-child>.value:last-child{padding-bottom:0}
  .value .badge{grid-column:1;grid-row:1/3;margin:0 20px 0 0}
  .value h3{grid-column:2;grid-row:1}
  .value p{grid-column:2;grid-row:2;max-width:none;margin-top:8px}
}
@media(max-width:640px){
  .firm-shot{height:260px}
  .value{padding:22px 0}
  .value .badge{margin-right:16px}
  .firm-mark{min-height:118px;padding:18px}
  .firm-mark .m-sq{height:50px}
  .firm-mark .m-wide{height:33px}
  .firm-mark .m-xwide{height:26px}
}