/* ===========================
   Quick Links Section (isolated)
   =========================== */

/* Fonts (use only provided assets) */
@font-face {
  font-family: "Arizona Flare";
  src: url("../fonts/arizona_flare_300_normal_headings_h1-h6.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Arizona Flare";
  src: url("../fonts/arizona_flare_300_italic_headings_h1-h6.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Helveesti";
  src: url("../fonts/helveesti_400_normal_body_ui.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helveesti";
  src: url("../fonts/helveesti_400_italic_body_ui.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Helveesti";
  src: url("../fonts/helveesti_700_normal_body_labels.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helveesti";
  src: url("../fonts/helveesti_700_italic_body_labels.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Design Tokens (scoped) */
.quicklinks {
  --ql-bg: #F8F2E9;
  --ql-ink: #170B01;
  --ql-accent: #AE1B74;
  --ql-accent-soft1: #ECBDFB;
  --ql-accent-soft2: #FDF18B;

  background: var(--ql-bg);
  color: var(--ql-ink);


  /* neutralize global .section padding; we'll pad the container */
  --section-pad-block: 0;
}

.quicklinks__wrap {
  display: grid;
  grid-template-columns: 1.15fr 1fr; /* left copy larger */
  column-gap: 96px;
  align-items: start;
  margin-top: 40px;
  margin-bottom: 40px;
}

/* Left column */
.quicklinks__title {
  font-family: "Arizona Flare", serif;
  font-weight: 300;
  font-size: 36px;
  line-height: 1.3;
  margin: 0 0 20px 0;
}

.quicklinks__desc {
  font-family: "Helveesti", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.3;
  max-width: 720px;
  margin: 0;
}

/* Right column: lists */
.quicklinks__lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.quicklinks__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.quicklinks__item {
  border-top: 1px solid rgba(23, 11, 1, 0.8);
}
.quicklinks__item:last-child {
  border-bottom: 1px solid rgba(23, 11, 1, 0.8);
}

.quicklinks__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 0;
  text-decoration: none;
  color: var(--ql-ink);
  font-family: "Helveesti", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.3;
}

.quicklinks__link:hover .quicklinks__icon,
.quicklinks__link:focus-visible .quicklinks__icon {
  border-color: var(--ql-accent);
}
.quicklinks__link:hover .quicklinks__svg,
.quicklinks__link:focus-visible .quicklinks__svg {
  transform: translateX(2px);
}

.quicklinks__link:focus-visible {
  outline: 2px solid var(--ql-accent);
  outline-offset: 4px;
  border-radius: 6px;
}

/* Arrow-in-circle icon */
.quicklinks__icon {
  width: 44px;
  height: 44px;
  border: 1.5px solid rgba(23, 11, 1, 0.9);
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  transition: border-color 160ms ease;
}
.quicklinks__svg {
  display: block;
  transition: transform 160ms ease;
}

/* Responsive (match layout feel from reference) */
@media (max-width: 430px) {
  .quicklinks__wrap {
    grid-template-columns: 1fr;
    row-gap: 56px;
  }
  .quicklinks__lists {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .quicklinks__title {
    font-size: 25px;
    line-height: 1.3;
  }
  .quicklinks__desc {
    font-size: 16px;
    line-height: 1.3;
  }
  .quicklinks__link {
    font-size: 16px;
  }
}