/* ============================================================
   262-php-05-tile-card — Kachelreihe ohne Bild

   [7] Kachel = eigene Fläche + Kontur. Ohne Bild wäre sie sonst
   überhaupt nicht als Element erkennbar.

   Vorbild ist Notions „KombiBlock" (Notion for Education, die
   fünf Vorlagen-Kacheln). Zwei Dinge machen ihn aus:

   1. DER AUFRUF ERSCHEINT ERST BEIM ÜBERFAHREN.
      Solange die Maus weg ist, steht auf der Kachel nur, worum
      es geht — Titel und ein Satz. „Ansehen" ist eine Handlung,
      keine Information; fünfmal nebeneinander ist es fünfmal
      dasselbe Wort und lenkt vom Inhalt ab.

   2. EINE REIHE, DIE SCHIEBT STATT UMBRICHT.
      Passen die Kacheln nicht nebeneinander, wird die Reihe
      seitlich verschiebbar statt zweizeilig. Die Einstiegsreihe
      bleibt so immer EINE Zeile.

   Aus Notions Markup übernommen: die drei Zonen header /
   content / blockCta.

   Bewusst NICHT übernommen:
     • Die zweite, inerte Kopie des Links, mit der Notion die
       Höhe reserviert. Deckkraft 0 auf dem einen Link tut
       dasselbe — halb so viel Markup und kein doppelter Text
       für Screenreader.
     • --kombi-blocks-count / --kombi-blocks-width. Die braucht
       Notions JavaScript, um die aktive Kachel zu zentrieren.
       Hier rechnet das CSS-Raster, also wären beide totes Gewicht.
   ============================================================ */

/* ---- Karussell: Reihe + Pfeile -------------------------------- */
.x262-tiles-carousel {
    display: grid;
    gap: .75rem;
}

.x262-tiles {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(min(100%, 12.5rem), 1fr);
    gap: 1rem;
    align-items: stretch;

    /* Passt die Reihe nicht, wird sie geschoben — nie umgebrochen. */
    overflow-x: auto;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;

    /* Die Rollleiste zöge unter der Reihe eine graue Linie.
       Geschoben wird mit Finger, Rad oder Tastatur. */
    scrollbar-width: none;
}
.x262-tiles::-webkit-scrollbar { display: none; }

.x262-tile {
    display: grid;
    grid-template-rows: auto 1fr auto;   /* Titel · Text · Aufruf */
    gap: .4375rem;
    align-content: start;
    position: relative;
    min-width: 0;
    padding: 1.125rem 1.25rem 1.25rem;
    scroll-snap-align: start;

    background: var(--surface-2, #f4f2ee);
    border: 1px solid var(--border, #dfdbd4);
    border-radius: var(--radius-lg, 6px);

    transition: border-color .14s ease, background-color .14s ease;
}
.x262-tile:hover {
    background: var(--paper, #fff);
    border-color: var(--faint, #a4a8ac);
}

.x262-tile__title {
    margin: 0;
    font-family: var(--font-body, Roboto, sans-serif);
    font-size: var(--fs-h4, 1.25rem);
    font-weight: var(--w-heading, 500);
    line-height: 1.3;
    letter-spacing: var(--tr-h3, -.006em);
    color: var(--text, #14171a);
}
.x262-tile__title a { color: inherit; text-decoration: none; }

/* Die ganze Kachel ist klickbar, aber es bleibt EIN echter Link
   im Markup — gut für Tastatur und Screenreader. Dass der Link
   die Kachel ausfüllt, lässt zugleich :focus-within greifen: wer
   mit der Tastatur ankommt, sieht denselben Aufruf wie mit der Maus. */
.x262-tile__title a::after {
    content: "";
    position: absolute;
    inset: 0;
}
.x262-tile:hover .x262-tile__title { color: var(--brand-strong, #15703a); }

.x262-tile__text {
    margin: 0;
    font-size: var(--fs-small, 1rem);
    line-height: 1.5;
    color: var(--text-2, #3d4247);
}

/* ---- Der Aufruf: da, aber unsichtbar --------------------------
   Er steht IMMER im Fluss und belegt IMMER seine Zeile. Nur die
   Deckkraft wechselt. Darum wächst die Kachel beim Überfahren
   nicht und die Reihe springt nicht. */
.x262-tile__more {
    align-self: end;
    margin-top: .1875rem;
    font: var(--w-heading, 500) var(--fs-meta, 1rem)/1.4 var(--font-body, Roboto, sans-serif);
    color: var(--brand-strong, #15703a);

    opacity: 0;
    transform: translateY(2px);
    transition: opacity .16s ease, transform .16s ease;
}
.x262-tile__more::after { content: " \2192"; }

.x262-tile:hover .x262-tile__more,
.x262-tile:focus-within .x262-tile__more {
    opacity: 1;
    transform: none;
}

/* Auf Geräten ohne Maus gibt es kein Überfahren — dort stünde der
   Aufruf sonst nie da. */
@media (hover: none) {
    .x262-tile__more { opacity: 1; transform: none; }
}

/* ---- Die beiden Pfeile ----------------------------------------
   Unten rechts, klein, in denselben Tönen wie die Kacheln. Sie
   liegen NICHT über den Kacheln: ein Pfeil auf dem Text nimmt
   genau die Ruhe weg, für die die Reihe gebaut ist.

   [hidden] setzt das Stilblatt global auf display:none. Hier steht
   darum kein eigenes Ausblenden — das Attribut allein genügt, und
   das Skript nimmt es weg, sobald wirklich etwas zu rollen ist. */
.x262-tiles__controls {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
}

.x262-tiles__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;

    /* Schaltflächen erben die Schrift NICHT — ohne diese Zeile setzt der
       Browser Arial ein und schmuggelt eine vierte Schriftfamilie in die
       Seite. Muster B, wie jede andere Bedienschrift. */
    font-family: var(--font-body, Roboto, sans-serif);
    font-size: var(--fs-small, 1rem);
    font-weight: var(--w-heading, 500);
    line-height: 1;
    color: var(--text-2, #3d4247);

    background: var(--surface-2, #f4f2ee);
    border: 1px solid var(--border, #dfdbd4);
    border-radius: var(--radius-lg, 6px);
    cursor: pointer;

    transition: color .14s ease, border-color .14s ease, background-color .14s ease;
}
.x262-tiles__nav:hover:not(:disabled) {
    color: var(--brand-strong, #15703a);
    background: var(--paper, #fff);
    border-color: var(--faint, #a4a8ac);
}
.x262-tiles__nav:focus-visible {
    outline: 2px solid var(--brand-strong, #15703a);
    outline-offset: 2px;
}

/* Am Anfang und am Ende: sichtbar, aber erkennbar stumpf. Ganz
   ausblenden liesse die Leiste springen. */
.x262-tiles__nav:disabled {
    color: var(--text-muted, #6d7278);
    opacity: .4;
    cursor: default;
}

@media (prefers-reduced-motion: reduce) {
    .x262-tile,
    .x262-tile__more { transition: none; transform: none; }
}

/* ---- Variant: grid — the entry grid of a landing page (Area soci) --------
   After the design proposal (PAGE 4): an asymmetric grid, numbered — two
   wide tiles on top, the others below. No scrolling, so the arrows of the
   carousel never show. */
.x262-tiles--grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    /* The carousel places tiles column by column and scrolls sideways —
       the grid wraps into rows and never scrolls. */
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow: visible;
    scroll-snap-type: none;
    gap: 1.125rem;
    counter-reset: x262tile;
}
.x262-tiles--grid > .x262-tile {
    grid-column: span 2;
    flex: none;
    width: auto;
    min-width: 0;
    max-width: none;
    counter-increment: x262tile;
}
.x262-tiles--grid > .x262-tile:nth-child(-n + 2) { grid-column: span 3; }
.x262-tiles--grid > .x262-tile::before {
    content: counter(x262tile, decimal-leading-zero);
    display: block;
    margin-bottom: .5rem;
    font-size: var(--fs-label);
    font-weight: var(--w-heading);
    letter-spacing: var(--tr-label);
    color: var(--brand-strong);
}
@media (max-width: 960px) {
    .x262-tiles--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .x262-tiles--grid > .x262-tile,
    .x262-tiles--grid > .x262-tile:nth-child(-n + 2) { grid-column: span 1; }
}
@media (max-width: 560px) {
    .x262-tiles--grid { grid-template-columns: minmax(0, 1fr); }
}