/* =============================================================================
   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 Elementor
   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");
	background-position:left top,right top;
	/* 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;}
}

/* ---- 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.
   ------------------------------------------------------------------------- */

.post-content 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);
}

.post-content 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);
}

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

.post-content figure.wp-block-table th,
.post-content 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;
}

.post-content 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. */
.post-content figure.wp-block-table tbody > tr:nth-child(odd) > td{
	background:var(--rs-white-pure,#FFFFFE);
}
.post-content 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. */
.post-content figure.wp-block-table tbody > tr:hover > td{
	background:var(--rs-grey-light-40,#EBF2F2);
}

/* Teal-header variant — Figma 24567-31990. */
.post-content 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);
}
.post-content figure.wp-block-table.is-style-rs-table-teal th:last-child{
	box-shadow:none;
}

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

/* WP core's style.min.css (.wp-block-table td/th) and a plugin reset.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. */
.post-content figure.wp-block-table > table > thead > tr > th,
.post-content figure.wp-block-table > table > thead > tr > td,
.post-content figure.wp-block-table > table > tbody > tr > th,
.post-content figure.wp-block-table > table > tbody > tr > td,
.post-content figure.wp-block-table > table > tfoot > tr > th,
.post-content figure.wp-block-table > table > tfoot > tr > td{
	border:0;
	border-style:none;
}