/*
Theme Name:   Kasper Child
Theme URI:    https://www.kasperconnect.com/
Description:  Astra child theme for Kasper (Kripa Electronics India Pvt. Ltd.). Wires the Kasper brand into Astra's global colour and typography system, and adds the component classes Spectra blocks cannot produce on their own.
Author:       Soham Dighe
Version:      1.0.0
Template:     astra
Text Domain:  kasper-child
*/

/* ==========================================================================
   1. BRAND TOKENS  ->  ASTRA GLOBAL COLOURS

   Astra exposes its palette as --ast-global-color-0..8, and Spectra blocks
   inherit those same variables. Mapping the brand here means every Astra
   component and every Spectra block picks up Kasper colours automatically,
   with no per-block styling.

   Set the matching swatches in Appearance > Customize > Global > Colors so
   the editor palette shows them too. See README.md.
   ========================================================================== */

:root,
body {
  /* Kasper brand, per KASPER Brand Guidelines */
  --kas-red:        #E53935;   /* primary  - logo, highlights, actions */
  --kas-red-dark:   #C62828;   /* hover / pressed (derived)            */
  --kas-dark:       #2B2B2B;   /* text and dark backgrounds            */
  --kas-white:      #FFFFFF;   /* primary background                   */
  --kas-light:      #E5E5E5;   /* secondary surfaces, dividers         */

  /* derived neutrals - not in the guidelines, needed for real interfaces */
  --kas-ink-soft:   #5A5A5F;   /* secondary text                       */
  --kas-muted:      #8A8A90;   /* meta, captions                       */
  --kas-hairline:   #DCDCE0;   /* fine borders                         */
  --kas-panel:      #F5F5F6;   /* subtle fills                         */
  --kas-black:      #141415;   /* deepest background                   */

  /* type */
  --kas-ff-display: "Orbitron", "Eurostile Extended", sans-serif;
  --kas-ff-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* rhythm */
  --kas-sec-pad:    clamp(48px, 6vw, 96px);
}

/* Astra's global palette is set in the Customizer, scripted by
   scripts/astra-config.php, so it is NOT redefined here. Overriding those
   variables in the stylesheet would silently beat the Customizer and leave
   the client unable to change colours through the interface.

   For reference, Astra's slot convention is:
     0 primary   1 primary hover   2 headings   3 body text
     4 page background   5 alt background   6 dark sections   7 borders   8 spare

   Note slot 4 is the page background. The Kasper light grey lives in slot 8;
   putting it in 4 would tint every page. */

/* ==========================================================================
   2. TYPOGRAPHY

   Orbitron for display, Inter for body, per the brand guidelines' stated
   digital alternates. Both are Google Fonts and free for commercial use.
   Orbitron is geometric and wide; it needs tighter sizing and open tracking
   to stay legible, and should never be used for running text.
   ========================================================================== */

body,
.ast-container {
  font-family: var(--kas-ff-body);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.kas-display {
  font-family: var(--kas-ff-display);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--kas-dark);
}

/* Orbitron has no true italic and reads poorly below ~13px. Small headings
   fall back to Inter so labels stay readable. */
h5, h6 {
  font-family: var(--kas-ff-body);
  letter-spacing: .1em;
}

/* Model numbers, spec values, anything that should read as engineered. */
.kas-mono {
  font-family: var(--kas-ff-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
}

/* ==========================================================================
   3. HEADER / NAVIGATION

   Astra's Header Builder supplies the structure. This restyles it to the
   reference behaviour: uppercase labels, and a bar that sweeps under the
   label on hover while the label itself changes colour.
   ========================================================================== */

.main-header-menu > .menu-item > .menu-link,
.ast-header-break-point .main-header-menu > .menu-item > .menu-link {
  font-family: var(--kas-ff-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  position: relative;
  border-bottom: 3px solid transparent;
  transition: color .3s ease-in-out, border-color .3s ease-in-out;
}

.main-header-menu > .menu-item > .menu-link::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 3px;
  background: var(--kas-red);
  transition: width .3s ease-in-out;
}

.main-header-menu > .menu-item:hover > .menu-link,
.main-header-menu > .menu-item.current-menu-item > .menu-link {
  color: var(--kas-red);
  border-bottom-color: var(--kas-red);
}

.main-header-menu > .menu-item:hover > .menu-link::before,
.main-header-menu > .menu-item.current-menu-item > .menu-link::before {
  width: 100%;
}

/* Dropdowns: no fade, accent divider per item. */
.main-header-menu .sub-menu {
  border-top: 2px solid var(--kas-red);
  box-shadow: 0 18px 25px rgba(0, 0, 0, .15);
}

.main-header-menu .sub-menu .menu-link {
  font-size: 13px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--kas-hairline);
}

.main-header-menu .sub-menu .menu-item:last-child .menu-link {
  border-bottom: 0;
}

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */

.wp-block-button__link,
.ast-button,
.button,
input[type="submit"] {
  font-family: var(--kas-ff-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

/* Outlined variant. Add "kas-btn-outline" to a Spectra/Core button block. */
.kas-btn-outline .wp-block-button__link,
a.kas-btn-outline {
  background: transparent;
  color: var(--kas-dark);
  border: 1px solid var(--kas-dark);
}

.kas-btn-outline .wp-block-button__link:hover,
a.kas-btn-outline:hover {
  background: var(--kas-dark);
  color: var(--kas-white);
}

/* On dark sections. */
.kas-on-dark .kas-btn-outline .wp-block-button__link,
.kas-on-dark a.kas-btn-outline {
  color: var(--kas-light);
  border-color: rgba(255, 255, 255, .55);
}

.kas-on-dark .kas-btn-outline .wp-block-button__link:hover,
.kas-on-dark a.kas-btn-outline:hover {
  background: var(--kas-light);
  color: var(--kas-dark);
}

/* Text link with a drawn arrow. No image asset needed. */
.kas-link-explore {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kas-red);
  transition: gap .25s ease;
}

.kas-link-explore::after {
  content: "";
  width: 26px;
  height: 9px;
  background: currentColor;
  clip-path: polygon(0 40%, 78% 40%, 78% 0, 100% 50%, 78% 100%, 78% 60%, 0 60%);
}

.kas-link-explore:hover { gap: 16px; }

/* ==========================================================================
   5. SECTION HEADINGS
   ========================================================================== */

.kas-head { text-align: center; }

.kas-eyebrow {
  font-family: var(--kas-ff-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--kas-red);
  margin-bottom: 10px;
}

.kas-on-dark,
.kas-on-dark p { color: rgba(255, 255, 255, .72); }

.kas-on-dark h1,
.kas-on-dark h2,
.kas-on-dark h3,
.kas-on-dark h4 { color: var(--kas-white); }

/* ==========================================================================
   6. CARD STACK

   Full-width cards that pin and scale down as later ones slide over them.
   Reference used GSAP ScrollTrigger; this is CSS sticky plus a small
   scroll handler in kasper.js.

   Spectra: a parent Container with class "kas-card-stack", holding child
   Containers each with class "kas-card".
   ========================================================================== */

.kas-card-stack .kas-card {
  position: sticky;
  top: 0;
  min-height: 452px;
  margin-bottom: 45px;
  border-radius: 2px;
  background: var(--kas-dark);
  color: var(--kas-white);
  will-change: transform;
}

.kas-card-stack .kas-card:last-child { margin-bottom: 0; }

@media (max-width: 921px) {
  .kas-card-stack .kas-card {
    position: static;
    min-height: 0;
    transform: none !important;
  }
}

/* ==========================================================================
   7. LOGO MARQUEE

   Continuous horizontal scroll. kasper.js duplicates the row so the loop
   is seamless. Add "kas-marquee" to a Container holding a single row of
   logo images.
   ========================================================================== */

.kas-marquee { overflow: hidden; }

.kas-marquee .kas-marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: kas-scroll 40s linear infinite;
}

.kas-marquee.kas-reverse .kas-marquee-track { animation-direction: reverse; }
.kas-marquee:hover .kas-marquee-track { animation-play-state: paused; }

.kas-marquee .kas-marquee-track > * { flex: 0 0 auto; }

@keyframes kas-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ==========================================================================
   8. CENTRE-MODE SLIDER

   Three across, active slide in colour, neighbours desaturated.
   Add "kas-slider" to a Container of "kas-slide" children.
   ========================================================================== */

.kas-slider { position: relative; overflow: hidden; }

.kas-slider .kas-slider-track {
  display: flex;
  transition: transform .8s cubic-bezier(.4, 0, .2, 1);
}

.kas-slider .kas-slide {
  flex: 0 0 33.3333%;
  padding: 0 15px;
}

.kas-slider .kas-slide img,
.kas-slider .kas-slide .wp-block-image {
  filter: grayscale(100%) brightness(.65);
  transition: filter .5s ease;
}

.kas-slider .kas-slide.is-active img,
.kas-slider .kas-slide:hover img,
.kas-slider .kas-slide.is-active .wp-block-image,
.kas-slider .kas-slide:hover .wp-block-image { filter: none; }

.kas-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  border: 1px solid var(--kas-muted);
  border-radius: 100%;
  background: transparent;
  color: currentColor;
  cursor: pointer;
  z-index: 5;
  display: grid;
  place-items: center;
  transition: background-color .3s ease, color .3s ease;
}

.kas-slider-arrow:hover { background: var(--kas-red); color: var(--kas-white); border-color: var(--kas-red); }
.kas-slider-arrow.kas-prev { left: 24px; }
.kas-slider-arrow.kas-next { right: 24px; }

.kas-slider-dots {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 26px;
}

.kas-slider-dots button {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--kas-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
}

.kas-slider-dots button.is-active { color: var(--kas-red); border-bottom-color: var(--kas-red); }

@media (max-width: 921px) {
  .kas-slider .kas-slide { flex-basis: 100%; }
  .kas-slider-arrow.kas-prev { left: 8px; }
  .kas-slider-arrow.kas-next { right: 8px; }
}

/* ==========================================================================
   9. VALUE TILES

   Three coloured tiles, middle one accented. Add "kas-tiles" to a Container
   of three child Containers.
   ========================================================================== */

.kas-tiles { display: grid; grid-template-columns: repeat(3, 1fr); }

.kas-tiles > * {
  min-height: 238px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background: var(--kas-ink-soft);
  color: var(--kas-white);
}

.kas-tiles > *:nth-child(2) { background: var(--kas-red); }
.kas-tiles > *:nth-child(3) { background: var(--kas-dark); }
.kas-tiles h1, .kas-tiles h2, .kas-tiles h3, .kas-tiles h4, .kas-tiles p { color: var(--kas-white); }

@media (max-width: 921px) {
  .kas-tiles { grid-template-columns: 1fr; }
}

/* ==========================================================================
   10. SPEC TABLE
   ========================================================================== */

.kas-spec-table table { width: 100%; border-collapse: collapse; }

.kas-spec-table th,
.kas-spec-table td {
  text-align: left;
  padding: 13px 16px;
  border: 1px solid var(--kas-hairline);
  font-size: 14px;
}

.kas-spec-table th {
  width: 34%;
  background: var(--kas-panel);
  font-weight: 600;
  color: var(--kas-dark);
}

/* ==========================================================================
   11. MOTION PREFERENCES
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .kas-marquee .kas-marquee-track { animation: none; }
  .kas-slider .kas-slider-track { transition: none; }
  .kas-card-stack .kas-card { transform: none !important; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* ==========================================================================
   12. PLACEHOLDER SLOTS

   Marks where client content is still awaited. Deliberately obvious: these
   must never be mistaken for finished design. Delete this section once real
   copy and imagery land.
   ========================================================================== */

.kas-ph {
  background: repeating-linear-gradient(45deg, #f1f1f2 0 14px, #e9e9ea 14px 28px);
  border: 1px dashed #c7c7cb;
  display: grid;
  place-items: center;
  min-height: 220px;
  color: #9a9aa0;
  font-family: var(--kas-ff-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  padding: 16px;
}

.kas-ph--tall  { min-height: 380px; }
.kas-ph--short { min-height: 150px; }
.kas-ph--video { min-height: 520px; }

.kas-on-dark .kas-ph,
.kas-ph--dark {
  background: repeating-linear-gradient(45deg, #17181a 0 14px, #1e1f22 14px 28px);
  border-color: #3a3b3f;
  color: #6c6d72;
}

/* Placeholder text, so unwritten copy is visibly unwritten. */
.kas-ph-text { opacity: .5; font-style: italic; }

/* ==========================================================================
   13. SECTION RHYTHM
   ========================================================================== */

.kas-section { padding-block: var(--kas-sec-pad); }
.kas-section--dark { background: var(--kas-dark); }
.kas-section--panel { background: var(--ast-global-color-5, #F5F5F6); }
.kas-section--black { background: #000; }

/* Banner: full-bleed media with the heading laid over it. */
.kas-banner { position: relative; }
.kas-banner .kas-ph { min-height: min(76vh, 620px); }
.kas-banner-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.kas-banner-text > * { pointer-events: auto; }

@media (max-width: 921px) {
  .kas-banner .kas-ph { min-height: 380px; }
}

/* ==========================================================================
   14. BLOCK EDITOR RECONCILIATION

   Core blocks add their own vertical margins and constrained-layout widths to
   every child. Inside the components below that fights the intended layout, so
   the margins are reset locally rather than globally, which would break
   ordinary content.
   ========================================================================== */

/* --- banner ---------------------------------------------------------------
   The heading sits over dark media, so it must be light regardless of the
   heading colour set globally. Without this it renders dark-on-dark and is
   effectively invisible. */
.kas-banner-text :where(h1, h2, h3, p) { color: #fff; }
.kas-banner-text .wp-block-group { margin-block: 0; }

/* --- tiles ---------------------------------------------------------------
   Equal thirds. Core groups otherwise size to content and the three tiles
   come out visibly different widths. */
.kas-tiles { align-items: stretch; gap: 0; }
.kas-tiles > * { width: 100%; margin-block: 0; max-width: none; }
.kas-tiles :where(h1, h2, h3, h4, p) { margin-block: 0; color: #fff; }
.kas-tiles h3 { margin-bottom: 6px; }

/* --- card stack ---------------------------------------------------------
   Centre the content. Cards are a fixed height so the stack reads evenly, and
   without this the text sits at the top of a mostly empty card. */
.kas-card-stack .kas-card {
  display: flex;
  align-items: center;
  padding: clamp(24px, 4vw, 56px);
}
.kas-card-stack .kas-card > * { width: 100%; margin-block: 0; }
.kas-card-stack .kas-card .wp-block-columns { align-items: center; margin-block: 0; gap: 40px; }
.kas-card-stack .kas-card .kas-ph { min-height: 240px; }
.kas-card-stack .kas-card :where(h1, h2, h3, h4) { margin-block: 0 12px; }

/* --- marquee -------------------------------------------------------------
   Fixed cell width so every logo occupies the same space and the loop reads
   evenly. Core group margins would otherwise stagger them. */
.kas-marquee { padding-block: 8px; }
.kas-marquee .kas-marquee-track { align-items: stretch; }
.kas-marquee .kas-logo {
  flex: 0 0 190px;
  width: 190px;
  margin-block: 0;
  padding-inline: 8px;
}
.kas-marquee .kas-logo .kas-ph { min-height: 96px; }

/* --- slider --------------------------------------------------------------- */
.kas-slider .kas-slider-track { margin-block: 0; align-items: stretch; }
.kas-slider .kas-slide { margin-block: 0; }
.kas-slider .kas-slide .kas-ph { min-height: 300px; }

/* --- section rhythm ------------------------------------------------------
   Groups carrying a background need their own padding; the constrained layout
   only handles horizontal width. */
.kas-section > .wp-block-group,
.kas-section > .wp-block-columns { margin-block-start: 32px; }
.kas-section > :first-child { margin-block-start: 0; }

/* Full-bleed bands should not inherit the content max-width for their
   background, only for their content. */
.kas-section--dark,
.kas-section--black,
.kas-section--panel { padding-inline: 24px; }

/* Banner placeholder label to the corner, so it does not sit on top of the
   heading laid over the same area. */
.kas-banner > .kas-ph { place-items: start start; padding: 20px 24px; }

/* ==========================================================================
   15. PAGE BANNERS

   One component, five height variants, matching the reference's separate
   banner types.
   ========================================================================== */

.kas-page-banner { position: relative; overflow: hidden; background: var(--kas-black); }
.kas-page-banner-media { position: absolute; inset: 0; }
.kas-page-banner-media img { width: 100%; height: 100%; object-fit: cover; }
.kas-page-banner-media.kas-ph { place-items: start end; padding: 18px 22px; min-height: 0; }

.kas-page-banner-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: inherit;
  height: 100%;
  padding-block: 40px;
}
/* Scrim keeps text legible over any photograph the client supplies. */
.kas-page-banner-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 60%, transparent 100%);
  z-index: -1;
}

.kas-page-banner--inner       { min-height: 340px; }
.kas-page-banner--second      { min-height: 280px; }
.kas-page-banner--blog-pages  { min-height: 260px; }
.kas-page-banner--blog-detail { min-height: 300px; }
.kas-page-banner--form-pages  { min-height: 260px; }

.kas-page-banner-title {
  color: #fff;
  margin: 0;
  max-width: 20ch;
}
.kas-page-banner-sub {
  color: rgba(255,255,255,.75);
  margin: 10px 0 0;
  max-width: 60ch;
}

.kas-crumbs { margin-top: 14px; }
.kas-crumbs ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.kas-crumbs li + li::before { content: "/"; margin-right: 10px; color: rgba(255,255,255,.4); }
.kas-crumbs a, .kas-crumbs span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
}
.kas-crumbs a:hover { color: var(--kas-red); }
.kas-crumbs span { color: var(--kas-red); }

@media (max-width: 921px) {
  .kas-page-banner { min-height: 200px !important; }
  .kas-page-banner-inner::before { background: rgba(0,0,0,.6); }
}

/* ==========================================================================
   16. GRIDS AND CARDS
   ========================================================================== */

.kas-grid { display: grid; gap: 24px; }
.kas-grid--2 { grid-template-columns: repeat(2, 1fr); }
.kas-grid--3 { grid-template-columns: repeat(3, 1fr); }
.kas-grid--4 { grid-template-columns: repeat(4, 1fr); }

.kas-card-item {
  background: var(--kas-white);
  border: 1px solid var(--ast-global-color-8, #DCDCE0);
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.kas-card-item:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(0,0,0,.09); }

.kas-card-media { margin: 0; overflow: hidden; aspect-ratio: 16 / 10; }
.kas-card-media a { display: block; height: 100%; }
.kas-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.kas-card-media .kas-ph { height: 100%; min-height: 0; }
.kas-card-item:hover .kas-card-media img { transform: scale(1.06); }

.kas-card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.kas-card-meta {
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kas-muted);
  margin: 0 0 8px;
}
.kas-card-title { font-size: 16px; line-height: 1.45; margin: 0 0 6px; }
.kas-card-title a:hover { color: var(--kas-red); }
.kas-card-sub { font-size: 13px; color: var(--kas-red); margin: 0 0 8px; }
.kas-card-excerpt { font-size: 14px; margin: 0; flex: 1; }
.kas-card-body .kas-link-explore { margin-top: 16px; align-self: flex-start; }

/* Cards keep a light surface on dark sections, matching the reference. */
.kas-on-dark .kas-card-item { border-color: transparent; }
.kas-on-dark .kas-card-title a { color: var(--kas-dark); }
.kas-on-dark .kas-card-excerpt { color: var(--kas-ink-soft); }

.kas-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--kas-muted);
  border: 1px dashed var(--ast-global-color-8, #DCDCE0);
}

.kas-head-left { margin: 0 0 28px; }

/* Pagination */
.navigation.pagination { margin-top: 40px; }
.nav-links { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.nav-links .page-numbers {
  min-width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ast-global-color-8, #DCDCE0);
  font-size: 14px;
  font-weight: 600;
  transition: all .3s ease;
}
.nav-links .page-numbers:hover,
.nav-links .page-numbers.current { border-color: var(--kas-red); color: var(--kas-red); }

/* ==========================================================================
   17. TERM NAVIGATION (product subcategories)
   ========================================================================== */

.kas-termnav { display: flex; flex-wrap: wrap; gap: 10px; }
.kas-termnav-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--ast-global-color-8, #DCDCE0);
  background: var(--kas-white);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  transition: all .3s ease;
}
.kas-termnav-item:hover { border-color: var(--kas-red); color: var(--kas-red); }
.kas-termnav-count { font-size: 11px; color: var(--kas-muted); }

/* ==========================================================================
   18. APPLICATIONS GRID
   ========================================================================== */

.kas-applications { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.kas-application figure { margin: 0; position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.kas-application img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.kas-application .kas-ph { height: 100%; min-height: 0; }
.kas-application:hover img { transform: scale(1.07); }
.kas-application figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 16px 18px;
  background: linear-gradient(to top, rgba(0,0,0,.85), transparent);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ==========================================================================
   19. PRODUCT DETAIL
   ========================================================================== */

.kas-product-top { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: start; }
.kas-product-title { margin: 0; }
.kas-product-sub { color: var(--kas-red); font-size: 16px; margin: 8px 0 0; text-transform: uppercase; letter-spacing: .06em; }
.kas-product-model { font-size: 13px; color: var(--kas-muted); margin: 6px 0 0; }
.kas-product-info .kas-metrics { margin-top: 26px; }
.kas-product-intro { margin-top: 22px; }
.kas-product-actions { margin-top: 26px; }

.kas-prose > * { max-width: 72ch; }
.kas-prose img, .kas-prose .wp-block-image { max-width: 100%; }

/* ==========================================================================
   20. EDITORIAL (case studies, news)
   ========================================================================== */

.kas-editorial-top { display: grid; grid-template-columns: 7fr 5fr; gap: 40px; align-items: start; margin-bottom: 40px; }
.kas-editorial-media img { width: 100%; height: auto; display: block; }
.kas-editorial-meta {
  background: var(--ast-global-color-5, #F5F5F6);
  padding: 24px 26px;
}
.kas-editorial-meta dl { margin: 0; }
.kas-editorial-meta dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kas-muted);
  margin-top: 16px;
}
.kas-editorial-meta dt:first-child { margin-top: 0; }
.kas-editorial-meta dd { margin: 3px 0 0; font-size: 15px; font-weight: 500; color: var(--kas-dark); }

/* ==========================================================================
   21. RESOURCE LIBRARY
   ========================================================================== */

.kas-resources { display: grid; grid-template-columns: 280px 1fr; gap: 40px; align-items: start; }

.kas-resources-filters form {
  border: 1px solid var(--ast-global-color-8, #DCDCE0);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 100px;
}
.kas-filter select,
.kas-filter input[type="search"] {
  width: 100%;
  font-family: var(--kas-ff-body);
  font-size: 14px;
  padding: 11px 13px;
  border: 1px solid var(--ast-global-color-8, #DCDCE0);
  border-radius: 2px;
  background: var(--kas-white);
  color: var(--kas-dark);
}
.kas-filter select:focus,
.kas-filter input:focus { outline: 2px solid var(--kas-red); outline-offset: 1px; }
.kas-filter-clear { font-size: 12.5px; color: var(--kas-muted); text-align: center; }
.kas-filter-clear:hover { color: var(--kas-red); }

.kas-results-count {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kas-muted);
  margin: 0 0 14px;
}

.kas-doc-list { list-style: none; margin: 0; padding: 0; }
.kas-doc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--ast-global-color-8, #DCDCE0);
}
.kas-doc-main { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.kas-doc-name { font-weight: 500; }
.kas-doc-type {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--kas-muted);
  border: 1px solid var(--ast-global-color-8, #DCDCE0);
  padding: 2px 8px;
}
.kas-doc-missing { font-size: 12.5px; color: var(--kas-muted); font-style: italic; }
.kas-doc .kas-link-explore { flex-shrink: 0; }

/* ==========================================================================
   22. TEMPLATE RESPONSIVE
   ========================================================================== */

@media (max-width: 1100px) {
  .kas-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .kas-applications { grid-template-columns: repeat(2, 1fr); }
  .kas-resources { grid-template-columns: 1fr; }
  .kas-resources-filters form { position: static; }
}

@media (max-width: 921px) {
  .kas-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .kas-product-top,
  .kas-editorial-top { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 600px) {
  .kas-grid--2,
  .kas-grid--3,
  .kas-grid--4 { grid-template-columns: 1fr; }
  .kas-applications { grid-template-columns: 1fr; }
  .kas-doc { flex-direction: column; align-items: flex-start; gap: 10px; }
}