/* ============================================================================
 * tree-art.css — the photograph behind each capability card's root node.
 *
 * A SEPARATE FILE ON PURPOSE. homecards.js and homecards.css are a working
 * module; this needs nothing from either of them, because homecards.js already
 * stamps `data-hc="<deck id>"` on every card (homecards.js:368) and the root
 * node is `.hc-n-in`. That is enough to hang artwork on from the outside, so
 * the module is not touched and this whole feature can be removed by deleting
 * one file and one <link>.
 *
 * THE PICTURES. web/src/assets/tree/*.jpg, generated once by
 * tools/gen-tree-art.mjs and committed. Seven images, 256x256, 1-3 KB each,
 * 15 KB for the set — deliberately in the same matte-studio world as the
 * landing page's props (web/src/assets/props), because the app and the front
 * page should look like one company.
 *
 * WHY THE ROOT NODE AND NOT THE CHILDREN. Each card says "give the app THIS,
 * get THESE back". The picture belongs to the thing the school hands over — the
 * marks register, the admission form — not to the documents that come out of
 * it. A photograph on every child node would also be seven times the bytes to
 * say something the labels already say.
 *
 * LEGIBILITY FIRST. The image sits BEHIND the icon and label at low opacity,
 * never under running text at full strength. The label keeps its own colour and
 * the node keeps its own background; the photograph is a wash, not a backdrop
 * the text has to fight. If a file is missing the rule simply does nothing —
 * there is no broken-image state to design around.
 * ==========================================================================*/

/* The stacking: the wash goes on ::after so it sits over the node's own
   background, and the real content is lifted above it. Without the second rule
   the icon and label would be under the wash rather than over it. */
/* NO `overflow: hidden` HERE. It was the obvious way to keep the wash inside
   the node's rounded corner, and it also clipped the node's CHILDREN " which
   includes the status badge, mounted deliberately at top:-5px right:-5px so it
   straddles the corner. MEASURED: the badge occupied 846..863 x 226..243
   against a node of 742..858 x 231..319, so five pixels of it were cut off two
   edges and it printed as a crescent. REPORTED as "the green dot is
   truncated".
   The thing that needs clipping is the WASH, so the wash is what gets clipped:
   ::after carries the node's own radius and stays inside it, and nothing that
   belongs to the node is cut. */
.hc-n-in { position: relative; }
.hc-n-in > * { position: relative; z-index: 1; }

.hc-n-in::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  border-radius: inherit;                  /* the corner the node has, not a square */
  overflow: hidden;
  pointer-events: none;                    /* never eats the tap on a root node */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0;                              /* nothing until a picture is named */
  transition: opacity .45s ease;
}

/* LOADED WHEN THE NETWORK ALLOWS — the requirement this artwork was asked for
   under. On a metered or data-saver connection no background-image is ever
   declared, so the bytes are never requested; the card falls back to its icon,
   which is exactly the designed no-picture state. */
@media (prefers-reduced-data: no-preference) {
  .hc-card[data-hc="school"]    .hc-n-in::after { background-image: url('../assets/tree/school.jpg');    opacity: .15; }
  .hc-card[data-hc="admission"] .hc-n-in::after { background-image: url('../assets/tree/admission.jpg'); opacity: .15; }
  .hc-card[data-hc="marks"]     .hc-n-in::after { background-image: url('../assets/tree/marks.jpg');     opacity: .15; }
  .hc-card[data-hc="chapter"]   .hc-n-in::after { background-image: url('../assets/tree/chapter.jpg');   opacity: .15; }
  .hc-card[data-hc="staff"]     .hc-n-in::after { background-image: url('../assets/tree/staff.jpg');     opacity: .15; }
  .hc-card[data-hc="fees"]      .hc-n-in::after { background-image: url('../assets/tree/fees.jpg');      opacity: .15; }
  .hc-card[data-hc="money"]     .hc-n-in::after { background-image: url('../assets/tree/money.jpg');     opacity: .15; }
}

/* Dark themes need it fainter: the pictures are shot on a near-white ground, so
   at the light theme's strength they read as a pale patch on a dark node. */
[data-theme="dark"] .hc-n-in::after,
[data-skin="neu-dark"] .hc-n-in::after { opacity: .09; }

/* A wash is decoration. Anyone who has asked for less motion still gets the
   picture — it simply arrives without the fade. */
@media (prefers-reduced-motion: reduce) { .hc-n-in::after { transition: none; } }

/* Printed pages are ink on paper: a grey wash behind a heading is wasted toner
   and, on a laser printer, a muddy band. */
@media print { .hc-n-in::after { display: none; } }