/* ============================================================
   KNOWLEDGE CENTER  (knowledge-center.html only)

   Built to the approved design reference:
     Website Media/Website Design References/
       APPROVED-Knowledge-Center-Design-Reference.png

   SCOPE: every selector below is prefixed .kc- and lives in this
   file alone, so the frozen Gallery / Reviews / FAQ pages and the
   shared header + footer can never be affected by edits here.
   Colours, radii and shadows come from the existing site tokens.
   ============================================================ */

/* ---------- Hero ---------- */
.kc-hero{
  background:var(--cream);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.kc-hero-grid{
  display:grid; grid-template-columns:1.7fr 1fr;   /* ~63% text / ~37% portrait */
  gap:52px; align-items:center;
}
.kc-hero-copy{ padding:64px 0; }

.kc-eyebrow{
  font-family:var(--font-sans);
  font-size:0.78rem; font-weight:800; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--orange);
  margin-bottom:16px;
}
.kc-hero-copy h1{
  font-family:var(--font-serif);
  font-size:clamp(2.1rem, 4.2vw, 3.4rem);
  line-height:1.1; color:var(--black); margin-bottom:22px;
}
.kc-lede{
  color:var(--charcoal-soft); font-size:1.02rem;
  line-height:1.75; max-width:52ch; margin-bottom:26px;
}

/* Owner sign-off. Rendered in the site serif italic in the brand orange
   as a stand-in for a handwritten signature - no external font is loaded. */
.kc-signature{
  font-family:var(--font-serif); font-style:italic;
  font-size:1.6rem; color:var(--orange);
  line-height:1.2; margin-bottom:4px;
}
.kc-signature-role{
  font-family:var(--font-sans); font-size:0.92rem;
  color:var(--charcoal); margin-bottom:28px;
}

.kc-hero-actions{ display:flex; flex-wrap:wrap; gap:14px; }
.kc-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; border-radius:999px;
  font-family:var(--font-sans); font-size:0.95rem; font-weight:700;
  border:2px solid var(--orange); cursor:pointer; white-space:nowrap;
  transition:transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.kc-btn svg{ width:19px; height:19px; flex-shrink:0; }
.kc-btn--solid{
  background:var(--orange); color:var(--white);
  box-shadow:0 8px 20px rgba(242,96,12,0.26);
}
.kc-btn--solid:hover{
  background:var(--orange-dark); border-color:var(--orange-dark);
  color:var(--white); transform:translateY(-2px);
}
.kc-btn--outline{ background:transparent; color:var(--orange-dark); }
.kc-btn--outline:hover{
  background:var(--orange); border-color:var(--orange);
  color:var(--white); transform:translateY(-2px);
}

/* Owner photo. Contained, not a full-bleed billboard: capped at 440px and shown
   whole (height:auto, no object-fit) so the face, uniform logo and arms are never
   cropped. Cream shows around it on all sides. */
.kc-hero-photo{ display:flex; justify-content:center; padding:32px 0; }
.kc-hero-photo img{
  width:100%; max-width:440px; height:auto; display:block;
  border-radius:18px;
  box-shadow:0 12px 30px rgba(23,20,18,0.15);
}

/* ---------- Article cards ---------- */
.kc-articles{ background:var(--white); }
.kc-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:26px;
}
.kc-card{
  display:flex; flex-direction:column;
  background:var(--white);
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); overflow:hidden;
  transition:transform 0.18s ease, box-shadow 0.18s ease;
}
.kc-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.kc-card-photo{
  display:block; aspect-ratio:16/9; overflow:hidden; background:var(--cream);
}
.kc-card-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.kc-card-body{
  display:flex; flex-direction:column; flex:1;
  padding:0 24px 24px; position:relative;
}
.kc-card-icon{
  width:46px; height:46px; border-radius:50%;
  background:var(--orange); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  border:3px solid var(--white); box-shadow:var(--shadow-sm);
  margin:-23px 0 14px;
}
.kc-card-icon svg{ width:22px; height:22px; }
.kc-card-body h2{
  font-family:var(--font-serif); font-size:1.18rem;
  color:var(--black); margin-bottom:10px; line-height:1.3;
}
.kc-card-body p{
  font-size:0.93rem; color:var(--charcoal-soft);
  line-height:1.65; flex:1; margin-bottom:16px;
}
.kc-read-more{
  font-family:var(--font-sans); font-size:0.88rem; font-weight:800;
  color:var(--orange-dark); align-self:flex-start;
}
.kc-read-more:hover{ text-decoration:underline; }
.kc-read-more span{ display:inline-block; transition:transform 0.15s ease; }
.kc-card:hover .kc-read-more span{ transform:translateX(3px); }

.kc-foot-note{
  text-align:center; margin-top:34px;
  font-size:0.92rem; color:var(--charcoal-soft);
}
.kc-foot-note a{ color:var(--orange-dark); font-weight:700; }
.kc-foot-note a:hover{ text-decoration:underline; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px){
  .kc-hero-grid{ grid-template-columns:1fr; gap:0; }
  .kc-hero-copy{ padding:52px 0 40px; order:1; }
  .kc-hero-photo{ order:2; padding:0 0 8px; }
  /* One column below desktop: three cards in two columns would leave a hole, and
     a full-width last card would break the equal photo heights. */
  .kc-grid{ grid-template-columns:1fr; gap:22px; max-width:720px; margin-inline:auto; }
}

@media (max-width: 640px){
  .kc-hero-copy{ padding:40px 0 32px; }
  .kc-hero-actions{ flex-direction:column; align-items:stretch; }
  .kc-btn{ justify-content:center; }
  .kc-signature{ font-size:1.4rem; }
}