/* =============================================================================
   Custom content blocks — rs/before-after, rs/callout, rs/commentary.
   Loaded on the front end and in the block editor (inc/rs-blocks.php).

   Every value here is a getComputedStyle reading taken off the live
   pages at a 1440 viewport, not an estimate:
     Before/After light  — instytut-matki-dziecka, moliera2, vufinder-studios
     Before/After teal   — grecos (the only teal instance of the five)
     callout / commentary— Figma 30369-30324 / 30369-30393, already signed off
   ========================================================================== */

/* ---- Before / After (C2) -------------------------------------------------
   Re-measured 2026-08-20 against Figma "Case Studies" node 1:4422 (the card in
   1:4420). The gutter is a 60px flex GAP with no column padding — it used to be
   30px of padding on each column, justified by "the decorative waves sit behind
   the padding". That reason no longer exists: the waves are children of the CARD
   in Figma, not of the columns (see .rs-ba--light), so the padding trick bought
   nothing and only made the columns 503 -> 500 wide. Card padding is a uniform
   40 (was 40 40 50) and the row is top-aligned, not stretched: Figma's two
   columns hug at 380 and 412 respectively.
   Width 1146 to match Figma (was 1140); it is also what makes the two 558px wave
   halves leave the designed 30px seam, since 558 + 30 + 558 = 1146 exactly.
   -------------------------------------------------------------------------- */
.rs-ba{
	display:flex;
	align-items:flex-start;
	gap:60px;
	border-radius:4px;
	padding:40px;
	overflow:hidden;
	/* Inside the 950px article column this would be 950, so break it out and
	   re-centre on the viewport. */
	width:min(1146px,calc(100vw - 40px));
	margin-left:50%;
	transform:translateX(-50%);
}
.rs-ba-col{
	flex:1 1 0;
	min-width:0;
	display:flex;
	flex-direction:column;
	gap:30px;
}
.rs-ba .rs-ba-h{
	font-family:Montserrat,sans-serif;
	font-weight:700;
	font-size:24px;
	line-height:34px;
	margin:0;
}
/* Figma: list gap 20 between items; each item is icon(20 wide) + 20 gap + text,
   both top-aligned at y=0. Was a 45px icon box with 20px right padding, a 5px
   text inset and a 10px+10px padding/margin pair standing in for the gap — a
   50px icon-to-text offset where the design has 40, and an 8px icon nudge the
   design does not have. */
.rs-ba-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px;}
.rs-ba-list li{display:flex;align-items:flex-start;gap:20px;margin:0;padding:0;}
.rs-ba-icon{flex:0 0 20px;width:20px;padding:0;margin:0;font-size:20px;line-height:1.6;}
.rs-ba-text{
	font-family:"Hind Madurai",sans-serif;
	font-weight:400;
	font-size:20px;
	line-height:32px;
}

/* White skin — instytut-matki-dziecka, moliera2, vufinder-studios, go2market.
   Two-layer shadow, dark headings, coral frown + teal check. */
.rs-ba--light{
	/* The two wave graphics are CARD decorations, not column backgrounds. Figma
	   1:4420 places them as 558x492 groups pinned to the card's top-left and
	   bottom-right, and images/waves-case-{left,right}.svg are intrinsically
	   558x492 — the exact same box. They were previously set on .rs-ba-col with
	   background-size:cover, which rescaled 558x492 art into a 530px-wide column
	   and re-centred it, so both waves rendered visibly dislocated. No cover, no
	   centring: natural size, opposite corners.
	   background-COLOR, not the `background` shorthand — the shorthand resets
	   background-image and would wipe the two layers declared here. */
	background-color:#FFFFFF;
	background-image:url("../images/waves-case-left.svg"),url("../images/waves-case-right.svg");
	/* right BOTTOM, as the comment above says: on a card taller than 492 (KLR) a
	   top-anchored right wave stopped short of the bottom-right corner. Identical
	   on any card exactly 492 tall. */
	background-position:left top,right bottom;
	/* Native 558x492, NOT stretched to 100% height. In Figma the wave frame height
	   equals the card height (both 492) and the mask is pinned v:top, so the
	   exported SVG is a fixed crop of the middle of a 580x862 vector. Scaling that
	   crop to a 529px-tall card is a 7.5% non-uniform stretch — the curves skew,
	   which is what read as "still dislocated". Top-anchored at native size
	   instead: a taller card simply shows less wave at the bottom, which is what
	   the design's own v:top constraint implies. */
	background-size:558px 492px,558px 492px;
	background-repeat:no-repeat,no-repeat;
	/* Same two layers as --rs-shadow-big in rs-design-tokens.css, but written in
	   the opposite order. Deliberately NOT swapped to var(--rs-shadow-big):
	   measured, the swap is pixel-identical over white and differs by 1/255 over
	   a mid-tone backdrop, so it is a (sub-perceptual) rendering change rather
	   than a refactor. See config/_elevation.scss in the html-remotesensei source
	   for the measurement. */
	box-shadow:0 50px 60px -30px rgba(47,47,47,.10),0 20px 20px -10px rgba(47,47,47,.05);
}
.rs-ba--light .rs-ba-h{color:#34383C;}
.rs-ba--light .rs-ba-text{color:#5D636A;}
.rs-ba--light .rs-ba-col--before .rs-ba-icon{color:#F35B54;}
.rs-ba--light .rs-ba-col--after .rs-ba-icon{color:#4B9EB0;}

/* Teal skin — grecos. Single shadow, gold headings, everything else white. */
.rs-ba--teal{
	background:linear-gradient(180deg,#69B9C9 0%,#408897 100%);
	box-shadow:0 20px 20px -10px rgba(47,47,47,.05);
}
.rs-ba--teal .rs-ba-h{color:#FFD87D;}
.rs-ba--teal .rs-ba-text,
.rs-ba--teal .rs-ba-icon{color:#FFFFFF;}
.rs-ba--teal .rs-ba-col{background-image:none;}

@media (max-width:767.98px){
	/* Stacked: the 60px row gap becomes a 30px column gap, and the two wave
	   halves stack top/bottom at full width instead of sitting side by side —
	   558px halves are meaningless at 335px. No mobile frame exists for this
	   card, so this is an adaptation, not a measurement.
	   The old --before/--after paddings and the .rs-ba-h margin are gone: with
	   real gaps in place they no longer stand in for spacing, they add to it. */
	.rs-ba{flex-direction:column;gap:30px;padding:24px 20px 30px;background-size:100% 50%,100% 50%;background-position:left top,left bottom;}
	.rs-ba-col{flex:1 1 auto;max-width:100%;gap:20px;}
	.rs-ba .rs-ba-h{font-size:20px;line-height:28px;}
	.rs-ba-text{font-size:18px;line-height:28px;}
}

/* ---- Callout (Figma 30369-30324) -----------------------------------------
   Identical to the .rs-aus-hl rules the render-time wrapper in
   template-asana-usage-story.php already produces, so a page converted to the
   block and a page still on flat content look the same. Kept unscoped here
   (the wrapper's copy is scoped under .rs-aus-body) so the block also works on
   the case studies and the vs-comparisons.
   -------------------------------------------------------------------------- */
.rs-aus-hl{
	display:flex;
	gap:1.25rem;
	background:#FFFFFE;
	border-radius:4px;
	padding:1.875rem;
	margin:2.5rem 0;
}
.rs-aus-hl-icon{flex:0 0 auto;line-height:0;color:#408897;font-size:24px;}
.rs-aus-hl-icon p{margin:0;}
.rs-aus-hl-icon svg{width:24px;height:24px;display:block;}
.rs-aus-hl-icon i{line-height:1;}
/* ---- Shared body geometry --------------------------------------------------
   The callout and the commentary lay their contents out identically — same
   stacking, same 15px rhythm, same heading and paragraph type ramps. Only the
   colours tell them apart (dark-on-white vs white-on-teal), so the geometry is
   declared once for both and each block states just its own palette below.
   `li` is on the callout only: the commentary is quote + byline, never a list.
   -------------------------------------------------------------------------- */
.rs-aus-hl-body,
.rs-aus-cm-body{min-width:0;flex:1 1 auto;}
.rs-aus-hl-body > *,
.rs-aus-cm-body > *{margin:0;}
.rs-aus-hl-body > * + *,
.rs-aus-cm-body > * + *{margin-top:.9375rem;}
.rs-aus-hl-body h2,
.rs-aus-hl-body h5,
.rs-aus-cm-body h2,
.rs-aus-cm-body h5{
	font-family:Montserrat,sans-serif;
	font-weight:700;
	font-size:1.25rem;
	line-height:1.4;
	margin:0;
}
.rs-aus-hl-body p,
.rs-aus-hl-body li,
.rs-aus-cm-body p{
	font-family:Lora,serif;
	font-size:1.125rem;
	line-height:1.65;
}

/* Callout palette. */
.rs-aus-hl-body h2,
.rs-aus-hl-body h5{color:#408897;}
.rs-aus-hl-body p,
.rs-aus-hl-body li{color:#5D636A;}

/* ---- Commentary (Figma 30369-30393) -------------------------------------- */
.rs-aus-cm{
	display:flex;
	gap:1.25rem;
	background:linear-gradient(135deg,#4B9EB0 0%,#408897 100%);
	border-radius:4px;
	padding:1.875rem;
	margin:2.5rem 0;
	color:#F9FAF4;
}
.rs-aus-cm-icon{flex:0 0 auto;color:#FFFFFE;font-size:1.5rem;line-height:1;}
/* Commentary palette — geometry is up in the shared block above. */
.rs-aus-cm-body h2,
.rs-aus-cm-body h5{color:#FFFFFE;}
.rs-aus-cm-body p{color:#F9FAF4;}
.rs-aus-cm-body img{width:48px;height:48px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #FFFFFE;}
.rs-aus-cm-body a{color:inherit;}
.rs-aus-cm-body h3,
.rs-aus-cm-body h6{
	font-family:"Dancing Script",cursive;
	font-style:italic;
	font-weight:700;
	font-size:1.125rem;
	color:#FFFFFE;
	text-align:left;
	margin:1.25rem 0 0;
}
.rs-aus-cm-body h3::before,.rs-aus-cm-body h3::after,
.rs-aus-cm-body h6::before,.rs-aus-cm-body h6::after{content:none;}
.rs-aus-cm-body h3 + p,
.rs-aus-cm-body h6 + p{margin-top:.25rem;font-size:1rem;font-family:inherit;}

@media (max-width:575.98px){
	.rs-aus-hl,.rs-aus-cm{flex-direction:column;gap:.9375rem;padding:1.25rem;}
}

/* SCOPED TO BOTH ARTICLE WRAPPERS. These rules were written for the blog's
   .post-content, and case studies never consumed them — so a core/table block
   dropped into a case study fell through to whatever the page stylesheet said,
   which is how go2market's four-column metrics table rendered as a bulleted pill
   list and read to Roman as "a table element I never designed". The design
   existed; the case-study body was not wired to it. (2026-09-03) */

/* ---- core/table ----------------------------------------------------------
   The blog and comparison bodies used to carry frozen Ultimate-Addons
   "Advanced Data Table" markup, which shipped its own styling. Converting those
   bodies to core/table dropped it, so the two signed-off Figma tables live here:
     default                 — grey header + zebra rows  (Figma 24567-31837)
     .is-style-rs-table-teal — teal header               (Figma 24567-31990)

   Scoped to .post-content — the class every pure-PHP article template already
   puts on its body wrapper (blog-single, asana-vs, asana-usage-story, legal) —
   so one rule set covers all of them.

   MUST FIT THE COLUMN. blog-single.min.css:475-481 sizes `table > thead/tbody/
   tfoot` at `width:max-content`, which on a 2-column table computed 1370px inside
   a 740px figure and left every cell as one unwrapped line. That is undone below
   on specificity (0,2,3 beats 0,1,2), not load order. Live behaves correctly for
   the same reason: auto layout at width:100%, so the same approach is used here
   rather than table-layout:fixed, which would force equal columns and ignore the
   narrower first column the Figma tables use.
   ------------------------------------------------------------------------- */

:is(.post-content,.rs-cs-body) figure.wp-block-table{
	margin:0 0 18px;
	border-radius:var(--rs-radius-xs,4px);
	overflow:hidden;                 /* clips the corner radius onto the header cells */
	background:var(--rs-grey-light-50,#F9F9F9);
}

:is(.post-content,.rs-cs-body) figure.wp-block-table > table{
	display:table;
	table-layout:auto;
	width:100%;
	max-width:100%;
	min-width:0;
	overflow:visible;                /* the figure owns clipping now, not the table */
	border-collapse:collapse;
	border-spacing:0;
	font-family:Lora,serif;
	font-size:14px;
	line-height:1.4;
	color:var(--rs-black-second,#5D636A);
}
/* Lora above is the BLOG's body face. A case study's is Hind Madurai, so a table
   sitting in one rendered its cells in serif against sans-serif prose either side
   — visible on go2market's metrics table. Only the family is overridden; the 14px
   data-table size is the design's and is the same in both articles. */
.rs-cs-body figure.wp-block-table > table{font-family:"Hind Madurai",sans-serif;}

/* Undo the max-content sizing that made these tables overflow. */
:is(.post-content,.rs-cs-body) figure.wp-block-table > table > thead{display:table-header-group;width:auto;min-width:0;}
:is(.post-content,.rs-cs-body) figure.wp-block-table > table > tbody{display:table-row-group;width:auto;min-width:0;}
:is(.post-content,.rs-cs-body) figure.wp-block-table > table > tfoot{display:table-footer-group;width:auto;min-width:0;}

:is(.post-content,.rs-cs-body) figure.wp-block-table th,
:is(.post-content,.rs-cs-body) figure.wp-block-table td{
	padding:15px;
	border:0;                        /* Figma separates cells with fills, not rules */
	text-align:left;
	vertical-align:top;
	/* Polish compounds are long and do not break where English does; without this a
	   single word can widen a column past the article and reintroduce the scroll. */
	overflow-wrap:anywhere;
	word-break:normal;
	hyphens:auto;
}

:is(.post-content,.rs-cs-body) figure.wp-block-table th{
	background:var(--rs-grey-light-50,#F9F9F9);
	color:var(--rs-black-prime,#34383C);
	font-family:Montserrat,sans-serif;
	font-weight:700;
}

/* Zebra by row; thead excluded so a header never picks up a body stripe. */
:is(.post-content,.rs-cs-body) figure.wp-block-table tbody > tr:nth-child(odd) > td{
	background:var(--rs-white-pure,#FFFFFE);
}
:is(.post-content,.rs-cs-body) figure.wp-block-table tbody > tr:nth-child(even) > td{
	background:var(--rs-grey-light-50,#F9F9F9);
}
/* style.css:1976 paints every hovered row #fff, which would eat the stripe. */
:is(.post-content,.rs-cs-body) figure.wp-block-table tbody > tr:hover > td{
	background:var(--rs-grey-light-40,#EBF2F2);
}

/* Teal-header variant — Figma 24567-31990. */
:is(.post-content,.rs-cs-body) figure.wp-block-table.is-style-rs-table-teal th{
	background:var(--rs-teal-light-10,#4B9EB0);
	color:var(--rs-white-pure,#FFFFFE);
	box-shadow:inset -1px 0 0 var(--rs-teal-light-20,#69B9C9);
}
:is(.post-content,.rs-cs-body) figure.wp-block-table.is-style-rs-table-teal th:last-child{
	box-shadow:none;
}

@media (max-width:767.98px){
	:is(.post-content,.rs-cs-body) figure.wp-block-table th,
	:is(.post-content,.rs-cs-body) figure.wp-block-table td{padding:12px;font-size:13px;}
}

/* WP core's style.min.css (.wp-block-table td/th) and base.css
   (table td/th) both paint 1px cell borders that the Figma tables do not have.
   Beaten on specificity via the full row path rather than !important.

   The SECTION elements are in the list for the same reason, added 2026-09-07:
   core also ships `.wp-block-table thead{border-bottom:3px solid}`, and the row
   paths below never matched `thead` itself — so a 3px grey rule sat under the
   header of every core/table on the site, contrary to this section's own
   "fills, not rules". Measured before the fix: 16 of 22 tables across 12 blog
   posts and the 2 asana-partner pages. The other 6 (the asana-vs comparison
   tables) have no <thead> at all, which is why this went unnoticed.

   Removing it costs no legibility: zebra paints row 1 white (nth-child(odd)),
   so the header's #F9F9F9 always meets #FFFFFE, and the header is Montserrat
   700 against Lora 400 body copy. Confirmed with Oskar 2026-09-07 before
   widening, since it changes 14 published pages. */
:is(.post-content,.rs-cs-body) figure.wp-block-table > table > thead,
:is(.post-content,.rs-cs-body) figure.wp-block-table > table > tbody,
:is(.post-content,.rs-cs-body) figure.wp-block-table > table > tfoot,
:is(.post-content,.rs-cs-body) figure.wp-block-table > table > thead > tr > th,
:is(.post-content,.rs-cs-body) figure.wp-block-table > table > thead > tr > td,
:is(.post-content,.rs-cs-body) figure.wp-block-table > table > tbody > tr > th,
:is(.post-content,.rs-cs-body) figure.wp-block-table > table > tbody > tr > td,
:is(.post-content,.rs-cs-body) figure.wp-block-table > table > tfoot > tr > th,
:is(.post-content,.rs-cs-body) figure.wp-block-table > table > tfoot > tr > td{
	border:0;
	border-style:none;
}

/* ---- Results table (rs/results-table) -------------------------------------
   The block emits figure.wp-block-table, so everything above already applies:
   radius, zebra, cell padding, the 767px step-down, the Hind Madurai override
   inside .rs-cs-body, and the border resets that beat core's own. Only what
   that skin cannot know about this block lives here.
   ------------------------------------------------------------------------- */

.rs-rt-wrap{margin:0 0 18px;}
.rs-rt-h{
	font-family:Montserrat,sans-serif;
	font-weight:700;
	font-size:24px;
	line-height:34px;
	color:var(--rs-black-prime,#34383C);
	margin:0 0 16px;
}

/* auto, not the inherited hidden. A 4-column metric table has to scroll at 375
   rather than crush its columns to one character — `overflow-wrap:anywhere` on
   the shared cell rule makes it FIT, which is not the same as readable. auto
   still clips the corner radius exactly as hidden did, so nothing else moves.
   Specificity (0,3,1) beats the inherited (0,2,1); no !important needed. */
:is(.post-content,.rs-cs-body) figure.wp-block-table.rs-rt{
	overflow:auto;
	-webkit-overflow-scrolling:touch;
}
/* The floor the scroll kicks in at. Below this the before/after pair stops being
   comparable at a glance, which is the only reason the table exists. */
:is(.post-content,.rs-cs-body) figure.wp-block-table.rs-rt > table{min-width:520px;}

/* The metric cell is a <th scope="row"> for screen readers but a BODY cell to
   the eye, so it must not take the teal column-header fill. Zebra is painted on
   `> td` above, so the row header needs its own copy of the same three stripes
   or it would show the figure's flat background through instead. */
:is(.post-content,.rs-cs-body) figure.wp-block-table.rs-rt tbody > tr > th{
	font-family:"Hind Madurai",sans-serif;
	font-weight:400;
	color:var(--rs-black-second,#5D636A);
	box-shadow:none;
}
:is(.post-content,.rs-cs-body) figure.wp-block-table.rs-rt tbody > tr:nth-child(odd) > th{background:var(--rs-white-pure,#FFFFFE);}
:is(.post-content,.rs-cs-body) figure.wp-block-table.rs-rt tbody > tr:nth-child(even) > th{background:var(--rs-grey-light-50,#F9F9F9);}
:is(.post-content,.rs-cs-body) figure.wp-block-table.rs-rt tbody > tr:hover > th{background:var(--rs-grey-light-40,#EBF2F2);}

/* The Change column is the number a reader repeats afterwards, so it gets the
   display face and the brand teal. nowrap: "-53%" breaking across two lines
   reads as two numbers. */
:is(.post-content,.rs-cs-body) figure.wp-block-table.rs-rt .rs-rt-delta{
	font-family:Montserrat,sans-serif;
	font-weight:700;
	color:var(--rs-teal-dark-10,#35717D);
	white-space:nowrap;
}

/* ---- FAQ (rs/faq) ---------------------------------------------------------
   A <dl>, not headings — see the renderer for why that is load-bearing here
   and not a style choice. Always open: the block exists for extraction, and
   an accordion hides the answer from a reader skimming for it.
   ------------------------------------------------------------------------- */
.rs-faq{margin:0 0 18px;}
.rs-faq-h{
	font-family:Montserrat,sans-serif;
	font-weight:700;
	font-size:24px;
	line-height:34px;
	color:var(--rs-black-prime,#34383C);
	margin:0 0 16px;
}
.rs-faq-list{margin:0;padding:0;}
.rs-faq-q{
	font-family:Montserrat,sans-serif;
	font-weight:700;
	font-size:20px;
	line-height:1.4;
	color:var(--rs-black-prime,#34383C);
	margin:0;
}
.rs-faq-a{
	font-family:"Hind Madurai",sans-serif;
	font-weight:400;
	font-size:20px;
	line-height:32px;
	color:var(--rs-black-second,#5D636A);
	/* dd carries a 40px UA indent that would step every answer in from its
	   question; the pairs read as one column. */
	margin:8px 0 0;
}
.rs-faq-a > :first-child{margin-top:0;}
.rs-faq-a > :last-child{margin-bottom:0;}
.rs-faq-q + .rs-faq-a{margin-bottom:0;}
.rs-faq-a + .rs-faq-q{margin-top:24px;}
@media (max-width:767.98px){
	.rs-faq-q{font-size:18px;}
	.rs-faq-a{font-size:18px;line-height:28px;}
}