/* KRAND Solutions. Shared rules once; each section owns its responsive rules. */

/* 1. Shared foundation and page heading */
.ks-page, .ks-page * { box-sizing: border-box; }
.ks-page {
  --ks-ink: #161616; --ks-blue: #2b548a; --ks-teal: #003e50;
  color: var(--ks-ink); background: #fff; font: 16px/1.5 Arial, Helvetica, sans-serif;
  padding: 0 0 120px; min-width: 0;
}
.ks-collection { padding-bottom: 360px; }
.ks-page :where(h1,h2,h3,p,ul,li,figure,span,a,button,summary) {
  font-family: Arial, Helvetica, sans-serif; font-size: inherit; line-height: inherit;
}
.ks-page :where(h1,h2,h3,p,ul,figure) { margin: 0; }
.ks-page a { color: inherit; text-decoration: none; }
.ks-page a:focus-visible, .ks-page button:focus-visible, .ks-page summary:focus-visible { outline: 3px solid #d59c15; outline-offset: 4px; }
.ks-container { width: 74%; max-width: 1440px; margin-inline: auto; }
.ks-page .ks-heading {
  position: static; inset: auto; z-index: auto; width: auto; height: auto; padding: 0;
  margin: 56px 0 72px; color: var(--ks-ink); background: none; box-shadow: none; text-align: center;
}
.ks-heading h1 { font-size: 36px; font-weight: 700; line-height: 1.2; }
.ks-heading p { margin-top: 18px; color: #626262; font-size: 18px; }
.ks-button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px;
  padding: 12px 26px; border: 1px solid var(--ks-blue); border-radius: 5px;
  background: var(--ks-blue); color: #fff !important; font-size: 15px; font-weight: 700; line-height: 1.4; text-align: center;
}
.ks-button:hover { background: var(--ks-teal); border-color: var(--ks-teal); }
@media (max-width: 1200px) { .ks-container { width: 88%; } }
@media (max-width: 1024px) { .ks-collection { padding-bottom: 120px; } }
@media (max-width: 640px) {
  .ks-container { width: calc(100% - 32px); }
  .ks-page { padding-bottom: 64px; }
  .ks-page .ks-heading { margin: 32px 0 36px; }
  .ks-heading h1 { font-size: 28px; }
  .ks-heading p { margin-top: 12px; font-size: 15px; }
}

/* 2. Breadcrumb */
.ks-breadcrumb { padding: 9px 0; border-top: 1px solid #d5d5d5; border-bottom: 1px solid #d5d5d5; }
.ks-breadcrumb .ks-container { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 12px; color: #5a5a5a; }
.ks-breadcrumb a:hover { text-decoration: underline; }
@media (max-width: 640px) { .ks-breadcrumb .ks-container { font-size: 11px; } }

/* 3. Environment and grade image shortcuts */
.ks-shortcuts { display: grid; gap: 42px 24px; margin: 0 auto 46px; }
.ks-shortcuts--environment { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ks-shortcuts--grade { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-inline: 80px; margin-bottom: 138px; }
.ks-shortcut { display: flex; flex-direction: column; align-items: center; gap: 15px; text-align: center; min-width: 0; }
.ks-shortcut-image { display: block; width: 160px; max-width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; border-radius: 50%; }
.ks-shortcut span { color: var(--ks-blue); text-decoration: underline; text-underline-offset: 2px; font-size: 16px; font-weight: 700; line-height: 1.4; }
.ks-shortcut:hover span, .ks-shortcut.is-selected span { color: var(--ks-teal); }
.ks-shortcut.is-selected .ks-shortcut-image { outline: 3px solid var(--ks-teal); outline-offset: 4px; }
@media (max-width: 1024px) {
  .ks-shortcuts { gap: 28px 18px; }
  .ks-shortcuts--environment { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ks-shortcuts--grade { padding-inline: 0; margin-bottom: 64px; }
  .ks-shortcut span { font-size: 13px; }
}
@media (max-width: 640px) {
  .ks-shortcuts, .ks-shortcuts--grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; margin-bottom: 36px; }
  .ks-shortcut { gap: 10px; }
  .ks-shortcut-image { width: 110px; }
}

/* 4. Sidebar layout（筛选组件本身是共用的，见主题 style.css 的 SHARED FILTER SIDEBAR） */
.ks-results-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: start; gap: 36px; }
.ks-results { min-width: 0; }
@media (max-width: 1024px) { .ks-results-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; } }
@media (max-width: 640px) { .ks-results-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

/* 5. Cards, pagination and empty result */
.ks-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 26px; }
.ks-card, .ks-card a { display: block; min-width: 0; }
.ks-card-image { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.ks-card h2 { margin-top: 10px; font-size: 14px; font-weight: 400; line-height: 1.4; text-align: center; overflow-wrap: break-word; }
.ks-card a:hover h2 { color: var(--ks-blue); text-decoration: underline; }
.ks-card a:hover .ks-card-image { opacity: .93; }
.ks-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 36px; }
.ks-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 8px 12px; border: 1px solid #d3d3d3; font-size: 14px; }
.ks-pagination .current { color: #fff; background: var(--ks-teal); }
.ks-empty { min-height: 300px; padding: 64px 24px; background: #f7f8fa; text-align: center; }
.ks-empty h2 { font-size: 24px; }
.ks-empty p { margin: 16px 0 24px; font-size: 16px; color: #626262; }
@media (max-width: 1024px) { .ks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; } }
@media (max-width: 640px) { .ks-grid { gap: 24px 16px; } .ks-card h2 { font-size: 13px; } }
@media (max-width: 360px) { .ks-grid { grid-template-columns: minmax(0, 1fr); } .ks-card h2 { font-size: 15px; } }

/* 6. Solution detail: overview, copy and enquiry */
.ks-detail-overview { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; gap: 40px; }
.ks-detail-main img { display: block; width: 100%; height: auto; border-radius: 8px; }
/* The text column is exactly as tall as the main image: its content sits in an absolutely
   positioned box so it cannot stretch the row, and the copy scrolls when it does not fit. */
.ks-detail-info { position: relative; min-width: 0; min-height: 300px; }
.ks-detail-info-inner { position: absolute; inset: 0; display: flex; flex-direction: column; }
.ks-detail-categories { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 14px; }
.ks-detail-categories a { font-size: 14px; color: var(--ks-blue); text-decoration: underline; }
.ks-detail-info h2 { font-size: 28px; line-height: 1.2; margin-bottom: 14px; }
.ks-detail-info p { color: #606060; font-size: 16px; line-height: 1.55; margin-bottom: 16px; }
/* No fixed cap any more — the box takes whatever height the image leaves and scrolls. */
.ks-detail-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 10px; overscroll-behavior: contain; }
.ks-detail-scroll > :last-child { margin-bottom: 0; }
/* Scrollbar: thin rail with a light track + grey thumb. Chromium ignores ::-webkit-scrollbar as soon
   as a non-auto scrollbar-width/scrollbar-color is declared on the same element, so those standard
   properties live in the @supports block below (Firefox only) instead of on the rule above. */
.ks-detail-scroll::-webkit-scrollbar { width: 6px; }
.ks-detail-scroll::-webkit-scrollbar-track { background: #eef1f4; border-radius: 999px; }
.ks-detail-scroll::-webkit-scrollbar-thumb { background: #c2cbd6; border-radius: 999px; }
.ks-detail-scroll::-webkit-scrollbar-thumb:hover { background: #a9b5c3; }
@supports not selector(::-webkit-scrollbar) {
  .ks-detail-scroll { scrollbar-width: thin; scrollbar-color: #c2cbd6 #eef1f4; }
}
/* "Get Started" stays inside the same box, pinned to its bottom edge (= the image's bottom). */
.ks-detail-info-inner .ks-button { flex: 0 0 auto; align-self: flex-start; margin-top: 20px; }
.ks-back { display: block; margin-top: 20px; font-size: 14px !important; text-decoration: underline !important; color: var(--ks-blue) !important; }
.ks-detail-copy { margin-top: 60px; font-size: 17px; line-height: 1.75; }
.ks-detail-copy :where(p,ul,h2,h3) { margin-bottom: 20px; }
.ks-detail-cta { margin-top: 64px; padding: 40px 32px; border: 1px dashed #c5c9ce; text-align: center; }
.ks-detail-cta h2 { font-size: 28px; line-height: 1.3; }
.ks-detail-cta p { max-width: 740px; margin: 16px auto 24px; font-size: 16px; color: #626262; }
@media (max-width: 1024px) { .ks-detail-overview { gap: 28px; } .ks-detail-info h2 { font-size: 24px; } .ks-detail-info { min-height: 260px; } .ks-detail-info-inner .ks-button { margin-top: 16px; } }
@media (max-width: 640px) {
  .ks-detail-overview { grid-template-columns: minmax(0, 1fr); }
  .ks-detail-info p { font-size: 15px; }
  /* Stacked: the copy is no longer tied to the image, so it gets its own capped scroll box. */
  .ks-detail-info { position: static; min-height: 0; }
  .ks-detail-info-inner { position: static; display: block; }
  .ks-detail-scroll { max-height: 360px; padding-right: 8px; }
  .ks-detail-info-inner .ks-button { margin-top: 28px; }
  .ks-detail-copy, .ks-detail-cta { margin-top: 40px; }
  .ks-detail-cta h2 { font-size: 24px; }
  .ks-detail-cta { padding: 28px 20px; }
}


/* 7. Category landing pages (single environment or grade) */
.ks-landing { padding-bottom: 80px; }
.ks-landing-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: center; margin: 48px 0 64px; }
.ks-landing-copy h1 { font-size: 40px; line-height: 1.15; margin-bottom: 18px; }
.ks-landing-copy p { color: #5f5f5f; font-size: 16px; line-height: 1.75; margin-bottom: 28px; }
.ks-landing-actions { display: flex; flex-wrap: wrap; gap: 36px; }
.ks-landing-actions a { display: grid; justify-items: center; gap: 10px; font-size: 14px; color: var(--ks-blue); text-decoration: underline; }
.ks-landing-actions iconify-icon { font-size: 44px; color: #a8bccd; }
.ks-landing-collage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ks-landing-collage figure { margin: 0; }
.ks-landing-collage img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.ks-landing-body { margin-top: 20px; }
.ks-landing-body>h2 { margin-bottom: 30px; font-size: 32px; text-align: center; }
.ks-landing-list { display: grid; gap: 34px; }
.ks-landing-item { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; background: #f3f5f5; }
.ks-landing-item:nth-child(even) { direction: rtl; }
.ks-landing-item:nth-child(even)>* { direction: ltr; }
.ks-landing-item-image img { display: block; width: 100%; height: auto; }
.ks-landing-item-side { display: grid; justify-items: center; gap: 16px; padding: 30px; text-align: center; }
.ks-landing-item-side h3 { font-size: 20px; }
.ks-landing-support { display: grid; justify-items: center; gap: 6px; margin-top: 10px; }
.ks-landing-support iconify-icon { font-size: 38px; color: #2f8f7f; }
.ks-landing-support p { margin: 0; font-weight: 700; }
.ks-landing-support-link { text-decoration: underline; }
@media (max-width: 1024px) {
  .ks-landing-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ks-landing-copy h1 { font-size: 32px; }
}
@media (max-width: 640px) {
  .ks-landing-copy h1 { font-size: 28px; }
  .ks-landing-collage { gap: 10px; }
  .ks-landing-item, .ks-landing-item:nth-child(even) { grid-template-columns: minmax(0, 1fr); direction: ltr; }
  .ks-landing-body>h2 { font-size: 24px; }
}

/* 8. Complete your space (solution detail) */
.ks-complete-space { margin-top: 96px; text-align: center; }
.ks-complete-space h2 { font-size: 32px; line-height: 1.25; }
.ks-complete-space p { max-width: 900px; margin: 16px auto 26px; color: #5f5f5f; font-size: 16px; line-height: 1.75; }
@media (max-width: 640px) { .ks-complete-space { margin-top: 56px; } .ks-complete-space h2 { font-size: 24px; } }

.ks-landing-lead { max-width: 900px; margin: -14px auto 30px; color: #5f5f5f; font-size: 15px; line-height: 1.75; text-align: center; }
.ks-heading h1 iconify-icon { margin-right: 10px; font-size: .82em; vertical-align: -2px; color: #2b548a; }

.ks-space-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0 0 32px; text-align: left; }
.ks-space-card { padding: 22px 24px; border: 1px solid #dfe3e6; border-radius: 8px; background: #fff; }
.ks-space-card h3 { margin-bottom: 12px; font-size: 20px; }
.ks-space-card ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ks-space-card a { color: #2b548a; font-size: 15px; text-decoration: underline; }
/* One line per product: the full name is still available via the link's title attribute. */
.ks-space-card li a { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* The list is a grid: grid items default to min-width:auto, which lets a nowrap line stretch the
   column and spill outside the card instead of showing an ellipsis. min-width:0 keeps the cell at
   the card width so the ellipsis above actually applies. */
.ks-space-card li { line-height: 1.45; min-width: 0; }
.ks-space-card .ks-space-all { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; color: #2b548a; font-size: 14px; text-decoration: none; }
.ks-space-card .ks-space-all iconify-icon { font-size: 16px; vertical-align: -2px; }
.ks-space-card .ks-space-all:hover { text-decoration: underline; }
@media (max-width: 1024px) { .ks-space-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ks-space-cards { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
/* Fewer than three cards: spread them over the row instead of leaving an empty third column. */
@media (min-width: 1025px) {
  .ks-space-cards.ks-cards-1 { grid-template-columns: minmax(0, 1fr); }
  .ks-space-cards.ks-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}