/* F4 version B: the section's cards become plain rows (ext/cardless.js). */
[data-cl="b"] .nc { background: none !important; box-shadow: none !important; border-radius: 0 !important; transform: none !important; filter: none !important;
  border: 0; border-top: 1px solid var(--rule); padding-left: 0; padding-right: 0; }
[data-cl="b"] .nc::before, [data-cl="b"] .nc::after { display: none; }
[data-cl="b"] .corner, [data-cl="b"] .corner-btn { display: none; }
[data-cl="b"] .enab-row, [data-cl="b"] .nw-list, [data-cl="b"] .pj-cards { display: grid; grid-template-columns: 1fr; gap: 0; }
[data-cl="b"] .nw-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
[data-cl="b"] .nw-art { display: none; }
[data-cl="b"] .pe-panel, [data-cl="b"] .ro-box { background: none; box-shadow: none; }
/* enablers: a 3x2 grid split by hairlines that fade at their ends; each cell is icon, title, description, Explore.
   On hover a cell becomes the site's usual card: white, rounded, lifted, with the corner arrow (Shajee, 29 Oct) */
[data-cl="b"] .enab-row { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 0; }
[data-cl="b"] .enab-row::before { content: ""; position: absolute; inset: 0; pointer-events: none; transition: opacity .3s ease;
  background: linear-gradient(var(--rule), var(--rule)) 33.333% 0 / 1px 100% no-repeat, linear-gradient(var(--rule), var(--rule)) 66.667% 0 / 1px 100% no-repeat, linear-gradient(var(--rule), var(--rule)) 0 50% / 100% 1px no-repeat;
  /* top layer: a soft hole round the hovered cell (--hx/--hy, off-grid by default), cut from the lines faded at their ends */
  mask: radial-gradient(ellipse 24% 40% at var(--hx, -50%) var(--hy, -50%), #0000 70%, #000 100%),
    linear-gradient(90deg, #0000, #000 12%, #000 88%, #0000), linear-gradient(#0000, #000 12%, #000 88%, #0000);
  mask-composite: intersect, intersect; }
[data-cl="b"] .ecard, [data-cl="b"] .ecard.is-on { height: auto; display: block; padding: var(--sp-4) !important; border: 0; align-self: stretch; margin: 0; }
#enablers[data-cl="b"] .ecard.nc { border-radius: 24px !important; }
#enablers[data-cl="b"] .ecard.nc::before { display: block; opacity: 0; transition: opacity .25s ease, --nk .5s cubic-bezier(.2, .9, .25, 1); }
#enablers[data-cl="b"] .ecard :is(.corner, .corner-btn) { display: grid; }
#enablers[data-cl="b"] .ecard.nc:is(:hover, :focus-within) { z-index: 1; transform: translateY(-3px) !important; filter: drop-shadow(0 16px 16px rgba(var(--b-shadow), .1)) !important;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
#enablers[data-cl="b"] .ecard.nc:is(:hover, :focus-within)::before { opacity: 1; }
/* while a cell is lifted the dividers fade out, so no line runs into its edges */
/* while a cell is lifted, only the lines round it fade, so none run into its edges (3 columns); narrower grids fade them all */
@media (min-width: 901px) {
  #enablers[data-cl="b"] .enab-row:has(> .ecard:nth-child(1):is(:hover, :focus-within)) { --hx: 16.667%; --hy: 25%; }
  #enablers[data-cl="b"] .enab-row:has(> .ecard:nth-child(2):is(:hover, :focus-within)) { --hx: 50%; --hy: 25%; }
  #enablers[data-cl="b"] .enab-row:has(> .ecard:nth-child(3):is(:hover, :focus-within)) { --hx: 83.333%; --hy: 25%; }
  #enablers[data-cl="b"] .enab-row:has(> .ecard:nth-child(4):is(:hover, :focus-within)) { --hx: 16.667%; --hy: 75%; }
  #enablers[data-cl="b"] .enab-row:has(> .ecard:nth-child(5):is(:hover, :focus-within)) { --hx: 50%; --hy: 75%; }
  #enablers[data-cl="b"] .enab-row:has(> .ecard:nth-child(6):is(:hover, :focus-within)) { --hx: 83.333%; --hy: 75%; }
}
@media (max-width: 900px) { #enablers[data-cl="b"] .enab-row:has(.ecard:is(:hover, :focus-within))::before { opacity: 0; } }
[data-cl="b"] .ec-n { display: none; }
[data-cl="b"] .ec-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
[data-cl="b"] .ec-ic { display: block; margin-bottom: var(--sp-4); }
[data-cl="b"] .ec-t, [data-cl="b"] .ecard.is-on .ec-t { font-size: 21px; }
[data-cl="b"] .ec-more { grid-template-rows: 1fr; opacity: 1; }
[data-cl="b"] .ec-d { width: auto; margin: 0; }
/* Explore sits on one line across each row of the grid */
[data-cl="b"] .ec-body { height: 100%; }
[data-cl="b"] .ec-more { flex: 1; display: flex; }
[data-cl="b"] .ec-more > div { display: flex; flex-direction: column; align-items: flex-start; }
[data-cl="b"] .ec-more .d-cnt { margin-top: auto; padding-top: var(--sp-2); }
[data-cl="b"] .d-cnt .ico { display: none; }
@media (max-width: 900px) {
  [data-cl="b"] .enab-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-cl="b"] .enab-row::before { background: linear-gradient(var(--rule), var(--rule)) 50% 0 / 1px 100% no-repeat, linear-gradient(var(--rule), var(--rule)) 0 33.333% / 100% 1px no-repeat, linear-gradient(var(--rule), var(--rule)) 0 66.667% / 100% 1px no-repeat; }
}
@media (max-width: 600px) {
  [data-cl="b"] .enab-row { grid-template-columns: minmax(0, 1fr); }
  [data-cl="b"] .enab-row::before { background: linear-gradient(var(--rule), var(--rule)) 0 16.667% / 100% 1px no-repeat, linear-gradient(var(--rule), var(--rule)) 0 33.333% / 100% 1px no-repeat, linear-gradient(var(--rule), var(--rule)) 0 50% / 100% 1px no-repeat, linear-gradient(var(--rule), var(--rule)) 0 66.667% / 100% 1px no-repeat, linear-gradient(var(--rule), var(--rule)) 0 83.333% / 100% 1px no-repeat; }
}
/* latest: each row leads with its picture on the left, text beside it (Shajee, 29 Oct) */
#latest[data-cl="b"] :is(.nw-feat, .nw-item) { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); align-items: center; column-gap: var(--sp-4); padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
#latest[data-cl="b"] .nw-art { display: block; position: relative; width: 100%; height: auto; aspect-ratio: 16 / 10; margin: 0; border-radius: 16px; overflow: hidden; }
#latest[data-cl="b"] .nw-art .lat-id { display: none; }
/* the pale pictures sit on the page ground: a hairline edge and a soft shadow lift them off it */
#latest[data-cl="b"] .nw-art { box-shadow: 0 0 0 1px rgba(var(--b-shadow), .1), 0 14px 28px -16px rgba(var(--b-shadow), .4); }
#latest[data-cl="b"] .nw-body { padding: 0; }
@media (max-width: 720px) {
  #latest[data-cl="b"] :is(.nw-feat, .nw-item) { grid-template-columns: 112px minmax(0, 1fr); column-gap: var(--sp-2); align-items: start; }
  #latest[data-cl="b"] .nw-art { aspect-ratio: 1; }
  #latest[data-cl="b"] .nw-art .lat-cap { display: none; }
}
#latest[data-cl="b"] .nw-feat { border-top: 0; }  /* no rule under the section head; rules only between rows */
#latest[data-cl="b"] :is(.nw-feat, .nw-item) { overflow: visible; }  /* rows have no side padding: clipping cut off the picture's left edge and shadow */
