/* Resources: landing, archive, search, article cards */
.res-feature {
  display:grid;
  gap:0;
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-radius:14px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
}
.res-feature:hover .rf-t {
  color:var(--color-accent);
}
.rf-img {
  min-height:200px;
}
.rf-body {
  padding:var(--space-6) 22px 26px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.rf-kick {
  font-size:var(--font-size-xs);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--color-secondary);
}
.rf-t {
  font-family:var(--font-heading);
  font-size:var(--font-size-xl);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.02em;
  color:var(--color-text);
  text-wrap:balance;
}
.rf-d {
  font-size:var(--font-size-md);
  color:var(--color-text-mid);
}
.rf-meta {
  font-size:var(--fs-14_5);
  color:var(--color-muted);
}
.rf-go {
  margin-top:6px;
  font-weight:600;
  font-size:var(--fs-16_5);
  color:var(--color-accent);
}
.res-tools {
  display:grid;
  gap:14px;
  margin-bottom:26px;
}
.searchbox {
  position:relative;
}
.searchbox .inp {
  padding-left:var(--space-12);
}
.searchbox svg {
  position:absolute;
  left:16px;
  top:17px;
  color:var(--color-muted);
  pointer-events:none;
}
.catrow {
  display:flex;
  gap:var(--space-2);
  overflow-x:auto;
  padding:2px 2px var(--space-2);
  margin:0 -20px;
  padding-inline:var(--space-5);
  scrollbar-width:thin;
}
.catrow :is(button,a) {
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  min-height:var(--tap-size);
  padding:0 var(--space-4);
  border-radius:var(--radius-lg);
  border:1.5px solid var(--color-border-strong);
  background:var(--color-white);
  font:600 var(--font-size-sm)/1 var(--font-body);
  color:var(--color-text-soft);
  cursor:pointer;
}
.catrow :is(button,a) span {
  font-weight:500;
  color:var(--color-muted-soft);
}
.res-count {
  font-size:var(--font-size-sm);
  color:var(--color-muted);
  margin-bottom:var(--space-4);
}
.res-grid {
  display:grid;
  gap:var(--space-4);
}
.rcard {
  display:flex;
  flex-direction:column;
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  overflow:hidden;
  text-decoration:none;
  color:inherit;
}
.rcard:hover {
  border-color:var(--color-primary);
}
.rcard:hover .rc-t {
  color:var(--color-accent);
}
.rc-body {
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  padding:18px 18px var(--space-5);
  flex:1;
}
.rc-cat {
  font-size:var(--fs-12_5);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--color-secondary);
}
.rc-t {
  font-family:var(--font-heading);
  font-size:var(--fs-22);
  font-weight:600;
  line-height:1.18;
  letter-spacing:-.01em;
  color:var(--color-text);
  text-wrap:balance;
}
.rc-m {
  margin-top:auto;
  padding-top:6px;
  font-size:var(--fs-14);
  color:var(--color-muted-soft);
}
.more {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-top:30px;
}
.more p {
  font-size:var(--fs-14_5);
  color:var(--color-muted);
}
.res-empty {
  padding:var(--space-8) 22px;
  border:1.5px dashed var(--color-line-strong);
  border-radius:var(--radius-xl);
  background:var(--color-surface-warm);
  text-align:center;
}
.res-empty strong {
  display:block;
  font-family:var(--font-heading);
  font-size:var(--fs-26);
  color:var(--color-text);
}
.res-empty p {
  margin-top:6px;
  font-size:var(--fs-16_5);
  color:var(--color-text-mid);
}
.start4 {
  display:grid;
  gap:var(--space-3);
}
.start4 a {
  display:flex;
  gap:var(--space-4);
  align-items:flex-start;
  padding:18px;
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  text-decoration:none;
  color:var(--color-text);
}
.start4 a:hover {
  border-color:var(--color-primary);
}
.start4 b {
  flex:none;
  font-family:var(--font-heading);
  font-size:var(--fs-34);
  line-height:1;
  font-weight:600;
  color:var(--color-accent);
  width:30px;
}
.start4 strong {
  display:block;
  font-size:var(--fs-18);
  line-height:1.3;
}
.start4 span {
  display:block;
  font-size:var(--fs-14_5);
  color:var(--color-muted);
  margin-top:3px;
}
.rf-img .tl {
  font-size:var(--fs-52);
}
@media (min-width:860px){
  .res-feature {
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  }
  .rf-body {
    padding:44px 44px var(--space-10);
    justify-content:center;
  }
  .rf-t {
    font-size:var(--font-size-xxl);
  }
  .res-tools {
    grid-template-columns:minmax(0,1fr);
    gap:var(--space-4);
  }
  .res-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:var(--space-6);
  }
  .rc-body {
    padding:22px 22px var(--space-6);
  }
  .rc-t {
    font-size:var(--fs-24);
  }
  .start4 {
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:var(--space-5);
  }
  .start4 a {
    flex-direction:column;
    gap:10px;
    padding:var(--space-6);
  }
  .rf-img {
    min-height:380px;
  }
  .catrow {
    flex-wrap:wrap;
    overflow:visible;
    margin:0;
    padding:0;
  }
}

/* Search field (the design's .inp, limited to the search box) */
.searchbox .inp {
  display:block;
  width:100%;
  height:var(--control-height);
  padding:0 16px 0 var(--space-12);
  border:1.5px solid var(--color-input-border);
  border-radius:var(--radius-lg);
  background:var(--color-white);
  font:400 var(--font-size-md)/1.2 var(--font-body);
  color:var(--color-text-body);
  appearance:none;
  -webkit-appearance:none;
  margin:0;
}
.searchbox .inp::placeholder {
  color:var(--color-placeholder);
}
.searchbox .inp:focus {
  outline:none;
  border-color:var(--color-primary);
  box-shadow:var(--shadow-focus);
}