@charset "utf-8";
/* ==========================================================================
   In-content blocks
   --------------------------------------------------------------------------
   The client's pages are built from custom Gutenberg blocks
   (rahdar-rasa/hero-section, red-section, product-catalog, grid-gallery,
   timeline, product-grid, slider-new) whose markup carries Tailwind utility
   classes. The Tailwind build that styled them is not part of the child theme,
   so this file does two jobs:

     1. styles each block properly in the industrial-precision language;
     2. provides a small utility layer for only the Tailwind classes those blocks
        actually use, scoped under .prose so nothing leaks into the theme.

   Everything is scoped to `.prose` — this is content styling, not global CSS.
   ========================================================================== */

/* ---------- Utility layer (scoped) --------------------------------------- */
.prose .container { width: 100%; max-width: none; padding-inline: 0; }
.prose .mx-auto { margin-inline: auto; }
.prose .max-w-5xl { max-width: 64rem; }
.prose .w-full { width: 100%; }
.prose .h-full { height: 100%; }
.prose .h-48 { height: 12rem; }
.prose .h-96 { height: 24rem; }
.prose .relative { position: relative; }
.prose .absolute { position: absolute; }
.prose .inset-0 { inset: 0; }
.prose .overflow-hidden { overflow: hidden; }
.prose .object-cover { object-fit: cover; }
.prose .inline-block { display: inline-block; }
.prose .block { display: block; }
.prose .flex { display: flex; }
.prose .flex-col { flex-direction: column; }
.prose .items-center { align-items: center; }
.prose .items-start { align-items: flex-start; }
.prose .justify-center { justify-content: center; }
.prose .text-center { text-align: center; }
.prose .text-left { text-align: start; }  /* logical: RTL-correct */
.prose .text-right { text-align: end; }
.prose .font-bold { font-weight: 800; }
.prose .font-semibold { font-weight: 700; }
.prose .rounded { border-radius: var(--radius); }
.prose .rounded-lg,
.prose .rounded-xl { border-radius: var(--radius-lg); }
.prose .rounded-full { border-radius: 999px; }

.prose .text-sm { font-size: var(--fs-sm); }
.prose .text-lg { font-size: 1.05rem; }
.prose .text-xl { font-size: 1.15rem; }
.prose .text-3xl { font-size: var(--fs-h2); line-height: 1.25; }
.prose .text-4xl { font-size: var(--fs-h1); line-height: 1.2; }

.prose .mt-2 { margin-top: .5rem; }
.prose .mt-4 { margin-top: 1rem; }
.prose .mt-6 { margin-top: 1.5rem; }
.prose .mt-10 { margin-top: 2.5rem; }
.prose .mb-4 { margin-bottom: 1rem; }
.prose .mb-10 { margin-bottom: 2.5rem; }
.prose .p-4 { padding: 1rem; }
.prose .p-6 { padding: 1.5rem; }
.prose .px-4 { padding-inline: 1rem; }
.prose .px-8 { padding-inline: 2rem; }
.prose .py-2 { padding-block: .5rem; }
.prose .py-3 { padding-block: .75rem; }
.prose .py-10 { padding-block: 2.5rem; }
.prose .py-12 { padding-block: 3rem; }
.prose .gap-6 { gap: 1.5rem; }
.prose .gap-8 { gap: 2rem; }

.prose .grid { display: grid; }
.prose .grid-cols-1 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  .prose .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prose .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .prose .md\:flex-row { flex-direction: row; }
  .prose .md\:w-1\/2 { width: 50%; }
  .prose .md\:row-span-2 { grid-row: span 2; }
  .prose .md\:col-span-2 { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .prose .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Colour utilities remapped to the dark palette. Light-theme values would be
   invisible or garish on the charcoal canvas. */
.prose .bg-white { background: var(--ink-2); }
.prose .bg-gray-100,
.prose .bg-gray-200 { background: var(--ink-3); }
.prose .bg-red-600 { background: var(--red); }
.prose .bg-red-500 { background: var(--red); }
.prose .bg-black { background: var(--ink); }
.prose .text-white { color: #fff; }
.prose .text-gray-900 { color: var(--fg); }
.prose .text-gray-600,
.prose .text-gray-700 { color: var(--fg-muted); }
.prose .text-red-600 { color: var(--red-hi); }
.prose .border { border: 1px solid var(--line); }
.prose .border-gray-300 { border-color: var(--line); }
.prose .shadow,
.prose .shadow-lg { box-shadow: 0 12px 32px -18px rgba(0, 0, 0, .8); }
.prose .opacity-50 { opacity: .5; }

/* ---------- Tables ------------------------------------------------------- */
/* Spec tables are the densest information on these pages. */
.prose .table-auto,
.prose table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  border: 1px solid var(--line);
  margin-block: 2rem;
  font-size: var(--fs-sm);
}
.prose table th,
.prose table td {
  border: 1px solid var(--line);
  padding: .7rem 1rem;
  text-align: start;
  vertical-align: top;
  min-width: 7rem;
}
.prose table thead th,
.prose table tr:first-child th {
  background: var(--ink-3);
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}
.prose table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .018); }
.prose table tbody tr:hover { background: rgba(212, 42, 30, .07); }

/* ---------- hero-section ------------------------------------------------- */
/* Full-bleed banner inside the content column. */
.prose .wp-block-rahdar-rasa-hero-section {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 20rem;
  height: auto;
  margin-block: 2.5rem;
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.prose .wp-block-rahdar-rasa-hero-section > .absolute {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* The block ships a flat 50% black wash; a gradient keeps the type legible
     without dulling the machine in the photograph. */
  background: linear-gradient(to top, rgba(20, 23, 26, .92), rgba(20, 23, 26, .55)) !important;
  opacity: 1 !important;
}
/* Deliberately smaller than the page <h1>. At display size this block read as a
   second page title directly under the real one — one page, one title. */
.prose .wp-block-rahdar-rasa-hero-section h2 {
  margin: 0;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -.01em;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}
.prose .wp-block-rahdar-rasa-hero-section { min-height: 15rem; }
.prose .wp-block-rahdar-rasa-hero-section p {
  margin: .65rem 0 0;
  color: var(--steel-100);
  font-size: 1.05rem;
}
.prose .wp-block-rahdar-rasa-hero-section a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.5rem;
  padding: .85rem 1.75rem;
  background: var(--red);
  color: #fff;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.prose .wp-block-rahdar-rasa-hero-section a:hover { background: var(--red-hi); transform: translateY(-1px); }

/* ---------- red-section (in-content CTA) --------------------------------- */
.prose .wp-block-rahdar-rasa-red-section {
  position: relative;
  margin-block: 2.5rem;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.5rem);
  background: var(--ink-2) !important;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-align: center;
  overflow: hidden;
}
/* A red edge instead of a flat red panel: the accent stays a signal. */
.prose .wp-block-rahdar-rasa-red-section::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: var(--red);
}
.prose .wp-block-rahdar-rasa-red-section h2 {
  margin: 0;
  font-size: var(--fs-h3);
  color: #fff;
}
.prose .wp-block-rahdar-rasa-red-section p { margin: .6rem 0 0; color: var(--fg-muted); }
.prose .wp-block-rahdar-rasa-red-section a {
  display: inline-block;
  margin-top: 1.35rem;
  padding: .85rem 1.75rem;
  background: var(--red) !important;
  color: #fff !important;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: background var(--dur) var(--ease);
}
.prose .wp-block-rahdar-rasa-red-section a:hover { background: var(--red-hi) !important; }

/* ---------- product-catalog / product-grid ------------------------------- */
.prose .wp-block-rahdar-rasa-product-catalog,
.prose .wp-block-rahdar-rasa-product-grid {
  margin-block: 2.5rem;
  padding: 0;
  background: transparent !important;
}
.prose .wp-block-rahdar-rasa-product-grid > .container > h2 {
  font-size: var(--fs-h2);
  color: var(--fg);
}
.prose .wp-block-rahdar-rasa-product-catalog .grid,
.prose .wp-block-rahdar-rasa-product-grid .grid {
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  text-align: start;
}
.prose .wp-block-rahdar-rasa-product-catalog .grid > div,
.prose .wp-block-rahdar-rasa-product-grid .grid > div {
  background: var(--ink-2) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  transition: background var(--dur) var(--ease);
}
.prose .wp-block-rahdar-rasa-product-catalog .grid > div:hover,
.prose .wp-block-rahdar-rasa-product-grid .grid > div:hover { background: var(--ink-3) !important; }

/* These cards ship with `overflow-hidden`, which clips the spec table instead of
   letting it scroll — the right-hand columns were simply unreachable. */
.prose .wp-block-rahdar-rasa-product-catalog .grid > div,
.prose .wp-block-rahdar-rasa-product-grid .grid > div { overflow: visible !important; }
.prose .wp-block-rahdar-rasa-product-catalog table,
.prose .wp-block-rahdar-rasa-product-grid table {
  margin-block: 1rem 0;
  font-size: var(--fs-xs);
}
.prose .wp-block-rahdar-rasa-product-catalog table th,
.prose .wp-block-rahdar-rasa-product-catalog table td,
.prose .wp-block-rahdar-rasa-product-grid table th,
.prose .wp-block-rahdar-rasa-product-grid table td {
  min-width: 0;
  padding: .5rem .7rem;
}
/* Keep the photo's rounded top corner even though the card no longer clips. */
.prose .wp-block-rahdar-rasa-product-catalog .relative,
.prose .wp-block-rahdar-rasa-product-grid .relative { overflow: hidden; }
.prose .wp-block-rahdar-rasa-product-catalog img,
.prose .wp-block-rahdar-rasa-product-grid img {
  width: 100%;
  height: 13rem;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
}
.prose .wp-block-rahdar-rasa-product-catalog h3,
.prose .wp-block-rahdar-rasa-product-grid h3 {
  margin: 0 0 .75rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
}
.prose .wp-block-rahdar-rasa-product-catalog .p-6,
.prose .wp-block-rahdar-rasa-product-grid .p-6 { padding: 1.35rem; }
.prose .wp-block-rahdar-rasa-product-catalog a,
.prose .wp-block-rahdar-rasa-product-grid a {
  color: var(--red-hi);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-decoration: none;
}
.prose .wp-block-rahdar-rasa-product-catalog a:hover,
.prose .wp-block-rahdar-rasa-product-grid a:hover { color: var(--red); text-decoration: underline; }

/* ---------- grid-gallery ------------------------------------------------- */
.prose .wp-block-rahdar-rasa-grid-gallery {
  gap: 1px !important;
  background: var(--line);
  border: 1px solid var(--line);
  margin-block: 2.5rem;
}
.prose .wp-block-rahdar-rasa-grid-gallery > div { background: var(--ink-2); border-radius: 0 !important; box-shadow: none !important; }
.prose .wp-block-rahdar-rasa-grid-gallery img {
  width: 100%;
  height: 100%;
  min-height: 14rem;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
  transition: transform .6s var(--ease);
}
.prose .wp-block-rahdar-rasa-grid-gallery > div:hover img { transform: scale(1.04); }

/* Decorative corner marker used throughout the client's galleries. */
.prose .triangle-plus {
  position: absolute;
  inset-inline-end: 0;
  bottom: 0;
  width: 2.25rem; height: 2.25rem;
  background: var(--red);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}
.prose .triangle-plus::after {
  content: "+";
  position: absolute;
  inset-inline-end: .3rem;
  bottom: -.1rem;
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1;
}

/* ---------- timeline ----------------------------------------------------- */
.prose .wp-block-rahdar-rasa-timeline {
  background: transparent !important;
  padding: 0 !important;
  margin-block: 2.5rem;
}
/* The block draws its spine with an absolutely positioned centre bar; on a
   single-column measure a start-aligned rail reads better and never collides
   with the copy. */
.prose .wp-block-rahdar-rasa-timeline > div > .absolute {
  inset-inline-start: .5rem !important;
  left: auto !important;
  transform: none !important;
  width: 2px !important;
  background: var(--line-strong) !important;
}
.prose .wp-block-rahdar-rasa-timeline > div > div {
  position: relative;
  padding-inline-start: 2.25rem;
  margin-bottom: 1.5rem !important;
  flex-direction: column !important;
  align-items: stretch !important;
}
.prose .wp-block-rahdar-rasa-timeline > div > div > div { width: 100% !important; padding: 0 !important; }
.prose .wp-block-rahdar-rasa-timeline .bg-gray-100 {
  position: relative;
  background: var(--ink-2) !important;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.35rem !important;
  box-shadow: none !important;
}
.prose .wp-block-rahdar-rasa-timeline .bg-gray-100::before {
  content: "";
  position: absolute;
  inset-inline-start: -2rem;
  top: 1.6rem;
  width: .7rem; height: .7rem;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 4px var(--ink);
}
.prose .wp-block-rahdar-rasa-timeline span {
  position: static !important;
  display: block;
  margin: 0 0 .35rem !important;
  color: var(--red) !important;
  font-weight: 800;
  font-size: var(--fs-sm);
}

/* ---------- slider-new --------------------------------------------------- */
/* Without its script this block is a stack of slides; a scroll-snap strip makes
   that usable rather than broken. */
.prose .wp-block-rahdar-rasa-slider-new {
  display: flex;
  gap: 1px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  background: var(--line);
  border: 1px solid var(--line);
  margin-block: 2.5rem;
}
.prose .wp-block-rahdar-rasa-slider-new > * {
  flex: 0 0 min(100%, 34rem);
  scroll-snap-align: start;
  background: var(--ink-2);
}
.prose .wp-block-rahdar-rasa-slider-new img { width: 100%; height: 18rem; object-fit: cover; margin: 0; }

/* ---------- Yoast FAQ ---------------------------------------------------- */
.prose .schema-faq-section {
  border-top: 1px solid var(--line);
  padding-block: 1.15rem;
}
.prose .schema-faq-question {
  display: block;
  font-weight: 700;
  color: #fff;
  font-size: 1.02rem;
  margin-bottom: .5rem;
}
.prose .schema-faq-answer { margin: 0; color: var(--fg-muted); }

/* ---------- Images in content -------------------------------------------- */
.prose .wp-block-image { margin-block: 1.75rem; }
.prose .wp-block-image img { border-radius: var(--radius); }
.prose figure { max-width: 100%; }

/* ---------- Light sections inside content -------------------------------- */
/* Some blocks declare a white canvas; keep their inner type readable if the
   background survives. */
.prose .bg-white h2,
.prose .bg-white h3,
.prose .bg-white h4 { color: #fff; }


/* ==========================================================================
   Corrections after review
   ========================================================================== */

/* ---------- Spec tables inside product cards ------------------------------
   These are two-column label/value tables sitting in a ~250px card. As a table
   the value column had nowhere to go: text was clipped mid-word and rows fell
   out of alignment. Below the card breakpoint each row becomes a label above
   its value, which cannot clip and reads better on a phone anyway. */
.prose .wp-block-rahdar-rasa-product-catalog table,
.prose .wp-block-rahdar-rasa-product-catalog tbody,
.prose .wp-block-rahdar-rasa-product-catalog tr,
.prose .wp-block-rahdar-rasa-product-catalog td,
.prose .wp-block-rahdar-rasa-product-grid table,
.prose .wp-block-rahdar-rasa-product-grid tbody,
.prose .wp-block-rahdar-rasa-product-grid tr,
.prose .wp-block-rahdar-rasa-product-grid td {
  display: block;
  width: 100%;
  border: 0 !important;
  overflow: visible;
}
/* The header row holds the model's descriptor; show it as a caption. */
.prose .wp-block-rahdar-rasa-product-catalog thead,
.prose .wp-block-rahdar-rasa-product-grid thead { display: block; }
.prose .wp-block-rahdar-rasa-product-catalog thead tr,
.prose .wp-block-rahdar-rasa-product-grid thead tr { display: block; }
.prose .wp-block-rahdar-rasa-product-catalog thead th,
.prose .wp-block-rahdar-rasa-product-grid thead th {
  display: block;
  background: transparent !important;
  border: 0 !important;
  padding: 0 0 .5rem !important;
  color: var(--red) !important;
  font-size: var(--fs-xs) !important;
  font-weight: 800;
  letter-spacing: .08em;
  white-space: normal !important;
}
.prose .wp-block-rahdar-rasa-product-catalog thead th + th,
.prose .wp-block-rahdar-rasa-product-grid thead th + th { display: none; }

.prose .wp-block-rahdar-rasa-product-catalog tbody tr,
.prose .wp-block-rahdar-rasa-product-grid tbody tr {
  padding: .7rem 0;
  border-top: 1px solid var(--line) !important;
}
.prose .wp-block-rahdar-rasa-product-catalog tbody tr:hover,
.prose .wp-block-rahdar-rasa-product-grid tbody tr:hover { background: transparent; }
.prose .wp-block-rahdar-rasa-product-catalog tbody td,
.prose .wp-block-rahdar-rasa-product-grid tbody td { padding: 0 !important; }
.prose .wp-block-rahdar-rasa-product-catalog tbody td:first-child,
.prose .wp-block-rahdar-rasa-product-grid tbody td:first-child {
  color: var(--steel-400);
  font-size: var(--fs-xs);
  margin-bottom: .2rem;
}
.prose .wp-block-rahdar-rasa-product-catalog tbody td:last-child,
.prose .wp-block-rahdar-rasa-product-grid tbody td:last-child {
  color: var(--fg);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

/* Two columns, not three: these cards carry a full spec sheet each. */
.prose .wp-block-rahdar-rasa-product-catalog .grid,
.prose .wp-block-rahdar-rasa-product-grid .grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
@media (max-width: 720px) {
  .prose .wp-block-rahdar-rasa-product-catalog .grid,
  .prose .wp-block-rahdar-rasa-product-grid .grid { grid-template-columns: 1fr !important; }
}
/* Cards without a photo (most model cards are spec-only) should not reserve
   an empty image band. */
.prose .wp-block-rahdar-rasa-product-catalog .grid > div > .p-6,
.prose .wp-block-rahdar-rasa-product-grid .grid > div > .p-6 { padding: 1.5rem; }
.prose .wp-block-rahdar-rasa-product-catalog h3,
.prose .wp-block-rahdar-rasa-product-grid h3 {
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--line);
  font-size: 1.1rem;
}

/* ---------- Gallery mosaic ------------------------------------------------
   The block's own row/column spans produced mismatched crops and, with an odd
   number of images, a visible empty cell. A uniform grid removes both. */
.prose .wp-block-rahdar-rasa-grid-gallery {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
@media (max-width: 720px) {
  .prose .wp-block-rahdar-rasa-grid-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
.prose .wp-block-rahdar-rasa-grid-gallery > div {
  grid-row: auto !important;
  grid-column: auto !important;
  min-height: 0 !important;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.prose .wp-block-rahdar-rasa-grid-gallery img {
  min-height: 0 !important;
  height: 100% !important;
  width: 100% !important;
  object-fit: cover;
}
/* The decorative corner marker added visual noise at every crop; keep it only
   as a small hover affordance. */
.prose .triangle-plus { opacity: 0; transition: opacity var(--dur) var(--ease); }
.prose .wp-block-rahdar-rasa-grid-gallery > div:hover .triangle-plus,
.prose .wp-block-rahdar-rasa-product-catalog .relative:hover .triangle-plus { opacity: 1; }

/* ---------- In-content hero: a brand strip, not a second page banner ------ */
.prose .wp-block-rahdar-rasa-hero-section {
  min-height: 0;
  padding: clamp(1.5rem, 3vw, 2.25rem) 1.5rem;
  text-align: start;
}
.prose .wp-block-rahdar-rasa-hero-section > .relative { width: 100%; }
.prose .wp-block-rahdar-rasa-hero-section p { font-size: var(--fs-sm); }
.prose .wp-block-rahdar-rasa-hero-section a { margin-top: 1rem; padding: .7rem 1.35rem; }

/* ---------- Timeline ------------------------------------------------------
   Rebuilt as a single-column rail: the block's centred spine assumed a
   full-width canvas and collapsed into the copy inside a measured column. */
.prose .wp-block-rahdar-rasa-timeline > div { max-width: none; }
.prose .wp-block-rahdar-rasa-timeline .bg-gray-100 {
  padding: 1.15rem 1.35rem !important;
}
.prose .wp-block-rahdar-rasa-timeline .bg-gray-100 p { margin: 0; font-size: var(--fs-sm); }
.prose .wp-block-rahdar-rasa-timeline .bg-gray-100 h3,
.prose .wp-block-rahdar-rasa-timeline .bg-gray-100 h4 {
  margin: 0 0 .35rem;
  font-size: 1rem;
  color: #fff;
}
.prose .wp-block-rahdar-rasa-timeline img {
  margin: .85rem 0 0;
  border-radius: var(--radius);
  max-height: 14rem;
  width: 100%;
  object-fit: cover;
}

/* The block's spine is an absolutely positioned bar sized with `h-full`, which
   collapses to zero once the layout is single-column. Draw it on the container
   instead so the entries actually read as one continuous timeline. */
.prose .wp-block-rahdar-rasa-timeline > div { position: relative; }
.prose .wp-block-rahdar-rasa-timeline > div::before {
  content: "";
  position: absolute;
  inset-block: .5rem;
  inset-inline-start: .84rem;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--line-strong) 6%, var(--line-strong) 94%, transparent);
}
.prose .wp-block-rahdar-rasa-timeline > div > .absolute { display: none !important; }
.prose .wp-block-rahdar-rasa-timeline .bg-gray-100::before { inset-inline-start: -1.9rem; }