/* DressageCalculator.com landing page.
 *
 * Loaded only by calculator/home.html, so it is a separate entry point rather
 * than lines on calcstyles - every other page would otherwise carry it. The
 * page sits inside base.html's #wrapper .container, so nothing here sets a
 * width; sections space themselves vertically and let the container do the
 * rest.
 *
 * Everything is scoped under .dc-landing. calcstyles and bootstrap-custom are
 * both already loaded by base.html and this must not reach past the landing
 * page - in particular the issuer-card overrides would otherwise hit the
 * public testsheet list, which uses the same include.
 */
/* calcstyles pins #wrapper to margin-left: 70px on large screens to leave room
   for the Skorie event rail. There is no rail on DressageCalculator, so on the
   landing page the whole page reads as shunted to the left - centre it instead.
   Scoped to body.dc-home so no other page moves. */
body.dc-home #wrapper {
  margin-left: auto;
  margin-right: auto;
  max-width: 1140px;
}

.dc-landing {
  --dcl-green: #2B9D84;
  --dcl-green-dark: #1A6B5C;
  --dcl-green-mint: #48C596;
  --dcl-green-tint: #F4FBF7;
  --dcl-green-tint-2: #E9F6F0;
  --dcl-green-tint-border: #DCEDE6;
  --dcl-purple: #52047F;
  --dcl-ink: #33053A;
  --dcl-action: #2C98F0;
  --dcl-action-dark: #1B7ACB;
  --dcl-border: #E0E0E0;
  --dcl-border-strong: #C9C9C9;
  --dcl-text: #33053A;
  --dcl-text-soft: #4A3350;
  --dcl-text-muted: #626262;
  --dcl-radius: 5px;
  --dcl-radius-card: 8px;
  --dcl-shadow-xs: 0 1px 2px rgba(51, 5, 58, 0.14);
  --dcl-ease: cubic-bezier(0.2, 0, 0.2, 1);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--dcl-text);
  /* Links are brand green and bold rather than the usual action blue - on this
     page green is the only accent, so a second one just reads as noise. */
}
.dc-landing a {
  color: var(--dcl-green);
  font-weight: 700;
  text-decoration: none;
}
.dc-landing a:hover,
.dc-landing a:focus {
  color: var(--dcl-green-dark);
  text-decoration: none;
}
.dc-landing img {
  max-width: 100%;
}

/* ---------- shared bits ---------- */
.dcl-eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dcl-green);
}

/* Nested under .dc-landing on purpose: the generic `.dc-landing a` link colour
   above is more specific than a bare `.dcl-btn--primary`, so unnested button
   variants lose their text colour to the link blue. */
.dc-landing .dcl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 2px solid transparent;
  border-radius: var(--dcl-radius);
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 150ms var(--dcl-ease), border-color 150ms var(--dcl-ease), color 150ms var(--dcl-ease), transform 120ms var(--dcl-ease);
}
.dc-landing .dcl-btn:hover {
  text-decoration: none;
}
.dc-landing .dcl-btn:active {
  transform: scale(0.97);
}
.dc-landing .dcl-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(44, 152, 240, 0.45);
}
.dc-landing .dcl-btn .bi {
  font-size: 1rem;
}

.dc-landing .dcl-btn--primary {
  background: var(--dcl-green);
  border-color: var(--dcl-green);
  color: #fff;
  box-shadow: var(--dcl-shadow-xs);
}
.dc-landing .dcl-btn--primary:hover, .dc-landing .dcl-btn--primary:focus {
  background: var(--dcl-green-dark);
  border-color: var(--dcl-green-dark);
  color: #fff;
}

.dc-landing .dcl-btn--outline {
  background: transparent;
  border-color: var(--dcl-border-strong);
  color: var(--dcl-ink);
  font-size: 1.0625rem;
  padding: 0 22px;
}
.dc-landing .dcl-btn--outline:hover, .dc-landing .dcl-btn--outline:focus {
  background: #F4EFF6;
  border-color: var(--dcl-ink);
  color: var(--dcl-ink);
}

.dc-landing .dcl-btn--purple {
  background: transparent;
  border-color: var(--dcl-purple);
  color: var(--dcl-purple);
  font-size: 1.0625rem;
  padding: 0 24px;
}
.dc-landing .dcl-btn--purple:hover, .dc-landing .dcl-btn--purple:focus {
  background: #F3EAF8;
  color: var(--dcl-purple);
}

.dc-landing .dcl-btn--text {
  min-height: 52px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--dcl-green);
}
.dc-landing .dcl-btn--text:hover, .dc-landing .dcl-btn--text:focus {
  color: var(--dcl-green-dark);
  text-decoration: none;
}

/* ---------- hero ---------- */
.dcl-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 56px;
  padding: 40px 0 56px;
  border-bottom: 1px solid var(--dcl-border);
}

.dcl-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

.dcl-hero h1 {
  margin: 0;
  font-weight: 700;
  font-size: 3.75rem;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--dcl-ink);
  text-wrap: balance;
}

.dcl-hero__lede {
  margin: 0;
  font-size: 1.3125rem;
  line-height: 1.5;
  color: var(--dcl-text-soft);
  max-width: 24em;
  text-wrap: pretty;
}

.dcl-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.dcl-hero__actions--secondary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.dcl-hero__note {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--dcl-text-muted);
}

/* ---------- device shot ---------- */
.dcl-shot {
  margin: 0;
  background: linear-gradient(var(--dcl-green-tint), var(--dcl-green-tint-2));
  border: 1px solid var(--dcl-green-tint-border);
  border-radius: var(--dcl-radius-card);
  padding: 30px;
  height: 360px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 22px;
}

.dcl-device {
  background: var(--dcl-ink);
  box-shadow: 0 6px 22px rgba(51, 5, 58, 0.24);
}
.dcl-device img {
  display: block;
  height: 100%;
  width: auto;
}

.dcl-device--tablet {
  flex: 0 1 auto;
  min-width: 0;
  border-radius: 10px;
  padding: 8px;
}
.dcl-device--tablet img {
  border-radius: 4px;
  max-width: 100%;
}

.dcl-device--phone {
  flex: 0 0 auto;
  border-radius: 16px;
  padding: 6px;
  box-shadow: 0 6px 22px rgba(51, 5, 58, 0.28);
}
.dcl-device--phone img {
  border-radius: 12px;
}

.dcl-shot__caption {
  margin: 12px 2px 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--dcl-text-muted);
}

/* ---------- three points ---------- */
.dcl-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  padding: 48px 0;
  border-bottom: 1px solid var(--dcl-border);
}

.dcl-point {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dcl-point .bi {
  font-size: 2.25rem;
  line-height: 1;
  color: var(--dcl-green);
}
.dcl-point h2 {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--dcl-ink);
}
.dcl-point p {
  margin: 0;
  color: var(--dcl-text-soft);
}

/* ---------- testsheets / issuers ---------- */
.dcl-tests {
  padding: 48px 0;
  border-bottom: 1px solid var(--dcl-border);
}

.dcl-tests__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
}

.dcl-tests h2 {
  margin: 0;
  font-size: 2.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--dcl-ink);
}

.dcl-count {
  font-variant-numeric: tabular-nums;
  color: var(--dcl-green);
}

.dcl-tests__lede {
  margin: 12px 0 0;
  max-width: 46em;
  color: var(--dcl-text-soft);
}

/* The issuer grid comes from testsheets/include_issuer_logos.html, which is
   shared with the public testsheet list - restyle it here only. */
.dcl-issuers .card {
  height: 100%;
  border: 1px solid var(--dcl-border);
  border-radius: var(--dcl-radius-card);
  background: #fff;
  transition: border-color 150ms var(--dcl-ease), box-shadow 150ms var(--dcl-ease), transform 150ms var(--dcl-ease);
}
.dcl-issuers .card:hover {
  border-color: var(--dcl-green-mint);
  box-shadow: 0 2px 8px rgba(51, 5, 58, 0.1);
  transform: translateY(-2px);
}
.dcl-issuers .card img {
  object-fit: contain;
  max-height: 84px;
}
.dcl-issuers .card-body {
  padding: 12px 14px 14px;
}
.dcl-issuers {
  /* Above the include's own md breakpoint the logo stacks over the text. Issuers
     without a logo would then leave their card top-heavy and the row ragged, so
     reserve a fixed logo area and push the body to the bottom - every title and
     Tests link in a row then lines up. */
}
@media (min-width: 768px) {
  .dcl-issuers .card > .row {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .dcl-issuers {
    /* :not(:only-child) so this only fires on the logo column - issuers with no
       logo render a single column, which is the body. */
  }
  .dcl-issuers .card > .row > [class*=col-]:first-child:not(:only-child) {
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .dcl-issuers .card > .row > [class*=col-]:last-child {
    margin-top: auto;
    width: 100%;
  }
}
.dcl-issuers .card-title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 6px;
  color: var(--dcl-ink);
}
.dcl-issuers .card-link {
  font-size: 0.9375rem;
  font-weight: 600;
}

/* ---------- Skorie strip ---------- */
.dcl-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 48px 0;
  border-bottom: 1px solid var(--dcl-border);
}
.dcl-strip h2 {
  margin: 0 0 12px;
  font-size: 2.125rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--dcl-ink);
}
.dcl-strip p {
  margin: 0;
  color: var(--dcl-text-soft);
}

/* ---------- follow us ---------- */
.dcl-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  padding: 28px 0 8px;
}

.dcl-social__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dcl-text-muted);
}

.dc-landing .dcl-social__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 1.0625rem;
}
.dc-landing .dcl-social__link .bi {
  font-size: 1.375rem;
}

/* ---------- who builds it ---------- */
.dcl-maker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  padding: 32px 0 40px;
}
.dcl-maker p {
  margin: 0;
  flex: 1 1 24em;
  font-size: 0.9375rem;
  color: var(--dcl-text-muted);
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .dcl-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding: 24px 0 36px;
  }
  /* screenshots first on narrow screens - they explain the product faster than
     the copy does */
  .dcl-hero__shot {
    order: -1;
  }
  .dcl-hero h1 {
    font-size: 2.625rem;
  }
  .dcl-hero__lede {
    font-size: 1.1875rem;
  }
  .dcl-shot {
    height: 260px;
    padding: 18px;
    gap: 14px;
  }
  .dcl-points {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding: 36px 0;
  }
  .dcl-tests,
  .dcl-strip {
    padding: 36px 0;
  }
  .dcl-tests h2,
  .dcl-strip h2 {
    font-size: 1.6875rem;
  }
}
@media (max-width: 560px) {
  .dcl-hero h1 {
    font-size: 2.125rem;
  }
  .dcl-shot {
    height: 220px;
  }
  .dcl-hero__actions,
  .dcl-hero__actions--secondary {
    width: 100%;
  }
  .dcl-hero__actions .dcl-btn,
  .dcl-hero__actions .dcl-btn--text {
    width: 100%;
  }
  .dcl-strip .dcl-btn {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dc-landing * {
    transition: none !important;
  }
  .dcl-btn:active {
    transform: none;
  }
  .dcl-issuers .card:hover {
    transform: none;
  }
}