/**
 * /mdr-content/css/public-partials/independent-research.css — Independent-Research page styles
 *
 * Page-specific stylesheet, loaded only on the Independent-Research page (head
 * partial sets pageCss => 'independent-research') as the last layer after
 * public.css so it can override shared rules. Styles the data-driven research
 * listing.
 *
 * Layout: the shared cap-box frame (.ir-row/-cap/-surface — mirrors the
 * content-dispatcher's .cpg-* family) wraps the directory in the landing-tile
 * cap-box geometry around the --content-surface ground; .ir-intro is the
 * left-aligned welcome paragraph at reading width (--w-read) with equal
 * spacing above and below. Themed sections (.section-block) each open with an
 * underlined .section-title and may hold uppercase tomato .subsection-title
 * groupings. Within a section, .research-grid is a responsive auto-fill grid
 * (minimum 400px columns) of .research-card panels, each stacking a .rc-title
 * headline, an optional .rc-preview image (a locally stored 16:9 WebP, hidden
 * by the view's onerror handler when the file is absent so no empty gap
 * remains), a flex-growing .rc-desc blurb, and a .rc-links chip row. Link
 * chips come in two styles: .rc-official (solid accent pill) and .rc-extra
 * (outlined tinted pill). On screens <=600px the surface padding tightens and
 * the card grid collapses to a single column.
 *
 * @package    TaNaSi-MDR
 * @author     Keylam Folker
 * @co-author  Claude (Anthropic)
 * @copyright  2026 TaNaSi
 * @license    proprietary — see RULES.md
 * @link       https://ta-na-si.eu
 * @since      1.0.0
 */

/* ── SHARED CAP-BOX FRAME: the same skeleton the content-dispatcher
      pages use — white cap boxes top/bottom in the home tiles' geometry around
      the content surface. The ir-* copies mirror .cpg-row/-cap/-surface in
      content-page.css (which itself mirrors home.css) — keep all three in sync
      when the home shape changes. ── */
.ir-row { width: var(--w-page); margin: 0 auto; }
.ir-cap {
    background: var(--card);
    display: flex; align-items: center;
    color: var(--navy);
}
.ir-cap-top {
    min-height: 40px; margin-top: 20px;
    border-radius: 20% 20% 0 0;
    padding: 10px 20px 0;
    font-size: 1.05rem; font-weight: 600; line-height: 1.4;
}
.ir-cap-bottom {
    min-height: 30px; margin-bottom: 20px;
    border-radius: 0 0 20% 20%;
    padding: 0 20px;
}
.ir-surface {
    width: var(--w-page); margin: 0 auto;
    background: var(--content-surface);
    padding: 32px 0;
}
/* Inside the surface the shared .container only provides the side padding;
   width/centring come from the surface itself. */
.ir-surface .container { max-width: none; margin: 0; padding: 0 24px; }

/* Welcome paragraph: reading width (--w-read), left-aligned, article serif
   voice; its distance to the cap box above (surface padding) and to the first
   section below (own margin) is the SAME 32px. */
.ir-intro {
    max-width: var(--w-read);
    margin: 0 0 32px;
    font-family: var(--font-serif);
    font-size: var(--fs-body); line-height: 1.82; color: #2c2c2c;
}

/* ── DIRECTORY TOOLBAR — .ir-toolbar: live filter box + one anchor
      chip per section, both generated from the structure JSON. .ir-filter is the
      search input; .ir-chips the wrapping chip row; .ir-chip one jump link with
      its .ir-chip-n entry-count badge. ── */
.ir-toolbar { margin: 0 0 36px; display: flex; flex-direction: column; gap: 14px; }
.ir-filter {
    width: 100%; max-width: 460px; padding: 10px 14px;
    border: 1px solid #c9c2b6; border-radius: 8px;
    font-size: var(--fs-body); background: #fffdf8; color: #2c2c2c;
}
.ir-filter:focus { outline: 2px solid var(--royal); outline-offset: 1px; }
.ir-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ir-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px; border: 1px solid #c9c2b6; border-radius: 999px;
    background: #fffdf8; text-decoration: none; color: var(--navy);
    font-size: .92rem; font-weight: 600;
}
.ir-chip:hover { border-color: var(--royal); }
.ir-chip-n {
    background: #e9e2d4; border-radius: 999px; padding: 1px 8px;
    font-size: .8rem; font-weight: 400; color: #5a5142;
}

/* ── SECTION HEADERS — one titled band per research theme, with an optional
      coloured sub-heading for groupings inside it. ── */
.section-block { margin-bottom: 50px; }        /* vertical spacing between themed sections */
.section-title {
    font-size: 1.15rem; font-weight: 700; color: var(--navy);
    border-bottom: 3px solid var(--royal); padding-bottom: 10px;
    margin-bottom: 22px;
}
/* .section-title: the main heading of a themed band (underlined accent rule).
   .subsection-title: an uppercase, tomato-coloured group heading inside a band. */
.subsection-title {
    font-size: .95rem; font-weight: 700; color: var(--tomato);
    text-transform: uppercase; letter-spacing: .6px;
    margin: 28px 0 14px; padding-inline-start: 4px;
    border-inline-start: 4px solid var(--tomato); padding-inline-start: 12px;
}

/* ── RESEARCH CARD GRID — the .rc-* family: one card per external research
      resource. .research-grid is the responsive auto-fill wrapper; .research-card
      is a single card holding title, preview image, description and link chips. ── */
.research-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 20px;
}
.research-card {
    background: var(--card); border-radius: 10px;
    border: 1px solid #e8e0cd;   /* paper-tone border on the content surface */
    padding: 18px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    display: flex; flex-direction: column; gap: 12px;
}
.rc-title {                                   /* card headline (the resource name) */
    font-size: 1rem; font-weight: 700; color: var(--navy);
    line-height: 1.3;
}
/* ── Preview image: a locally stored WebP (auto/<id>.webp). If the file is
      missing the view hides the whole link via an onerror handler, so there is
      no placeholder box and no empty gap left behind. ── */
.rc-preview-link { display: block; border-radius: 6px; overflow: hidden; }
.rc-preview {
    width: 100%; height: auto; display: block;
    border-radius: 6px; border: 1px solid #e0e4ed;
    background: #f0f2f5;
    aspect-ratio: 16/9; object-fit: cover;
    transition: opacity .2s;
}
.rc-preview:hover { opacity: .9; }
.rc-desc {                                    /* the resource blurb; flex:1 pushes links to the card bottom */
    font-size: .85rem; color: #444; line-height: 1.7;
    flex: 1; margin: 0;
}
.rc-links {                                   /* row of link chips at the foot of the card */
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto;
}
/* Link chips: .rc-official = the primary/official link (solid accent pill);
   .rc-extra = a secondary link (outlined, tinted pill). */
.rc-official, .rc-extra {
    display: inline-flex; align-items: center;
    padding: 5px 12px; border-radius: 16px;
    font-size: .78rem; font-weight: 600;
    text-decoration: none; white-space: nowrap;
    transition: background .15s;
}
.rc-official {
    background: var(--royal); color: #fff;
}
.rc-official:hover { background: var(--royal-d); }
.rc-extra {
    background: #f0f4ff; color: var(--royal);
    border: 1px solid #c8d4f5;
}
.rc-extra:hover { background: #dce5ff; }

/* Phone layout: tighten the surface padding (kept equal top/bottom) and
   collapse the card grid to one column. */
@media (max-width: 600px) {
    .ir-surface { padding: 20px 0; }
    .ir-surface .container { padding: 0 14px; }
    .ir-intro { margin-bottom: 20px; }
    .research-grid { grid-template-columns: 1fr; }
}