/* =====================================================================
   FastDriver Plugin 1364 - Link Card Grid
   Colour, spacing and layout only. No font-size and no font-family are
   declared anywhere in this file, so headings and body copy inherit the
   site defaults from theme-css.css (body -> --creote-family-two /
   --font-size-base, h1..h6 -> --creote-family-one at the theme's own
   sizes and line heights, p -> 16px / 26px). Change the theme type scale
   and this section follows it.
   Scoped under .fdlk-sec.
   ===================================================================== */

.fdlk-sec,.fdlk-sec *,.fdlk-sec *::before,.fdlk-sec *::after{box-sizing:border-box}

.fdlk-sec{
  --fdlk-lime:var(--primary-color-one,#C1F11D);
  --fdlk-head:var(--heading-dark,#141414);
  --fdlk-body:var(--text-color-dark,#4a4e56);
  --fdlk-line:var(--border-color-dark,#e4e7ee);
  --fdlk-acc:var(--menu-active-color,#4cae08);
  --fdlk-tint:#f8fde8;
  --fdlk-tint:color-mix(in srgb, var(--fdlk-lime) 13%, #ffffff);
  background:#ffffff;
  border-top:1px solid var(--fdlk-line);
  padding:80px 0;
  color:var(--fdlk-body);
  -webkit-font-smoothing:antialiased;
}
.fdlk-wrap{max-width:1280px;margin:0 auto;padding:0 40px}

.fdlk-title{
  margin:0;
  max-width:70ch;
  font-weight:600;
  color:var(--fdlk-head);
}
.fdlk-intro{margin-top:16px;max-width:76ch}
.fdlk-intro p{margin:0 0 12px;color:var(--fdlk-body)}
.fdlk-intro p:last-child{margin-bottom:0}

.fdlk-nav{margin-top:32px}
.fdlk-grid{margin:0;padding:0;list-style:none;display:grid;gap:16px;align-items:stretch}
.fdlk-grid--2{grid-template-columns:repeat(2,1fr)}
.fdlk-grid--3{grid-template-columns:repeat(3,1fr)}
.fdlk-grid--4{grid-template-columns:repeat(4,1fr)}
.fdlk-cell{display:flex;min-width:0}

.fdlk-card{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:10px;
  background:var(--fdlk-tint);
  border:1px solid var(--fdlk-line);
  border-radius:14px;
  padding:24px 22px;
  min-height:44px;
  text-decoration:none;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
a.fdlk-card:hover{border-color:var(--fdlk-head);transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.07)}
.fdlk-card__t{
  font-weight:600;
  color:var(--fdlk-head);
}
.fdlk-card__b{color:var(--fdlk-body)}
.fdlk-card__a{
  margin-top:auto;
  font-weight:600;
  color:var(--fdlk-acc);
}

/* The card pointing at the page the visitor is already on. It is rendered
   as a div rather than a link, so it gets the accent border instead of a
   hover state and its footer line is dimmed. */
.fdlk-card--current{
  border-color:var(--fdlk-acc);
  background:#ffffff;
  cursor:default;
}
.fdlk-card--current .fdlk-card__a{opacity:.7}

/* theme-css.css injects a tick into every `section ul li`; this grid is a
   layout list, not a checklist, so switch that pseudo-element off. */
.fdlk-sec .fdlk-grid li{padding-left:0;list-style:none}
.fdlk-sec .fdlk-grid li::before,.fdlk-sec .fdlk-grid li::after{content:none;display:none}

@media(max-width:1000px){
  .fdlk-grid--3,.fdlk-grid--4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .fdlk-sec{padding:56px 0}
  .fdlk-wrap{padding:0 20px}
  .fdlk-grid--2,.fdlk-grid--3,.fdlk-grid--4{grid-template-columns:1fr}
}
@media(max-width:400px){
  .fdlk-wrap{padding:0 16px}
}