/*
 * Landing page layout for content/main/modules/ROOT/pages/index.adoc.
 *
 * The page sets `:role: landing-page`; ui/supplemental/layouts/default.hbs copies
 * the page role onto the body element (`<body class="article landing-page">`),
 * and every rule below is scoped to that class, so no other page is affected.
 * The stylesheet is linked from ui/supplemental/partials/head-styles.hbs and
 * loads after owncloud.css, so its custom properties (--oc-navy, --oc-link-hover)
 * are available and equal-specificity rules win on source order.
 *
 * Goal: the whole landing page fits on one desktop screen. The six product
 * sections render as cards in a responsive grid (three columns on wide
 * screens, fewer on narrow ones, one on phones), the getting-started
 * highlights as a compact card row, and each product's generated version list
 * as inline chips instead of a vertical list. Everything is wrapped in
 * @media screen: print keeps the stock stacked layout.
 */

@media screen {
  /* Wider article column: the stock UI caps .doc at 46rem (two card columns);
     60rem fits exactly three. The intro paragraph below keeps the narrower
     46rem measure for readability. */
  body.landing-page .doc {
    max-width: 60rem;
  }

  /* Tighter page header, intro and section headings. */
  body.landing-page .doc > h1.page:first-child {
    font-size: 1.7rem;
    margin: 0.4rem 0 0.2rem;
  }

  body.landing-page #preamble .paragraph {
    margin: 0.25rem 0 0;
    max-width: 46rem;
  }

  body.landing-page .doc h2 {
    font-size: 1.3rem;
    margin: 1.1rem 0 0.4rem;
  }

  body.landing-page #preamble + .sect1,
  body.landing-page .doc .sect1 + .sect1 {
    margin-top: 1.1rem;
  }

  /* No table of contents on the landing page. Dropping the :toc: attribute only
     removes the inline AsciiDoc TOC; the stock UI then builds a sidebar TOC from
     the page headings client-side (the toc routine in site.js) and clones it
     into an embedded in-body copy for narrow screens. Hide both, scoped to this
     page -- the sidebar would otherwise also reserve its 9rem column at >= 1024px. */
  body.landing-page aside.toc.sidebar,
  body.landing-page aside.toc.embedded {
    display: none;
  }

  /* Getting-started highlights: drop the admonition icon and grey content box,
     turn the three bullets into an equal-width card row. */
  body.landing-page #get-started + .sectionbody .admonitionblock {
    margin: 0.4rem 0 0;
  }

  body.landing-page #get-started + .sectionbody .admonitionblock td.icon {
    display: none;
  }

  body.landing-page #get-started + .sectionbody .admonitionblock td.content {
    background: transparent;
    padding: 0;
  }

  body.landing-page #get-started + .sectionbody .ulist ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 0.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  body.landing-page #get-started + .sectionbody .ulist li {
    margin: 0;
    padding: 0.55rem 0.7rem;
    background: #f7f8f7;
    border: 1px solid #e3e6ea;
    border-radius: 0.4rem;
    font-size: 0.9rem;
    line-height: 1.45;
  }

  /* Product sections: responsive card grid. The section body that follows the
     "Documentation by Product" heading holds exactly the six .sect2 cards. */
  body.landing-page h2#documentation-by-product + .sectionbody {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 0.8rem;
  }

  body.landing-page .sect2 {
    margin: 0;
    padding: 0.8rem 0.95rem 0.85rem;
    background: #fff;
    border: 1px solid #d9dee5;
    border-top: 3px solid var(--oc-navy);
    border-radius: 0.4rem;
  }

  body.landing-page .sect2 h3 {
    margin: 0 0 0.35rem;
    font-size: 1.02rem;
  }

  body.landing-page .sect2 .paragraph {
    margin: 0.35rem 0 0;
  }

  body.landing-page .sect2 .paragraph p {
    font-size: 0.9rem;
    line-height: 1.45;
  }

  /* the "Open the ... documentation" link is the only anchor in a card body */
  body.landing-page .sect2 .paragraph a {
    font-weight: 600;
  }

  /* Generated version list: inline chips instead of a vertical list. */
  body.landing-page .sect2 .ulist {
    margin: 0.5rem 0 0;
  }

  body.landing-page .sect2 .ulist ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.45rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  body.landing-page .sect2 .ulist li {
    margin: 0;
    padding: 0;
  }

  body.landing-page .sect2 .ulist li a {
    display: inline-block;
    padding: 0.05rem 0.55rem;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--oc-link-hover);
    background: #fff;
    border: 1px solid #b6c6dd;
    border-radius: 1rem;
    text-decoration: none;
  }

  body.landing-page .sect2 .ulist li a:hover {
    color: #fff;
    background: var(--oc-navy);
    border-color: var(--oc-navy);
    text-decoration: none;
  }
}