/*
 * The site's own SCSS (_cards.scss etc) only ever added overrides on top of
 * Angular Material's base stylesheet — it never had to define `display` for
 * md-card/md-content/md-card-title-text itself, because Angular Material did.
 * We keep these as inert custom element tags (not real Angular components)
 * purely so the existing CSS selectors (`md-card.landscape-card .img-container`
 * etc) keep matching without rewriting every rule. Unknown elements default
 * to `display: inline` in browsers, which breaks position:absolute
 * containing-block behaviour for .img-container — this file restores just
 * the handful of base display rules that were silently load-bearing.
 *
 * Superseded once the Sass/md-* flattening pass replaces these tags with
 * real elements — see the rebuild plan's dependency-reduction section.
 */
md-card {
    display: flex;
    flex-direction: column;
}
md-content {
    display: block;
    position: relative;
}
md-card-title-text {
    display: flex;
    flex: 1;
    flex-direction: column;
}

/*
 * md-card-content is a distinct tag from md-content (above) — case studies'
 * sidebar card uses it (<md-card><md-card-content>...) but main.css never
 * had to style it, for the same reason as md-content: Angular Material's own
 * stylesheet gave it `padding: 16px` for free. Without it the sidebar's
 * PRODUCTION TEAM/TECH USED/TYPE OF WORK content sits flush against the
 * card's edges instead of inset.
 */
md-card-content {
    display: block;
    padding: 16px;
}
md-card-content > p:first-child {
    margin-top: 0;
}
md-card-content > p:last-child {
    margin-bottom: 0;
}

/*
 * FarmPin's product card used the internal legacy class name "droneclouds"
 * in the original site (static/css/_cards.scss: md-card.droneclouds), not
 * "farmpin". The content collection's tile component keys per-product CSS
 * hooks off the collection entry's own slug (entry.id = "farmpin", the
 * product's real name) rather than carrying that legacy name forward as a
 * separate field — so this one rule needs restating under the new class.
 * Checked: every other product's original CSS class name already matches
 * its content slug (voyc, thundafund, cowabunga, kujakuja, nomanini,
 * gumtree) — this is the only mismatch.
 */
md-card.farmpin md-card-actions {
    background-color: #242c3d;
}

/*
 * The original site's page-level wrapper was <md-content ng-view>, which
 * (per Angular Material's base rule, above) was `position: relative`. That
 * gave every page's own absolutely-positioned decorations (.low-poly,
 * .gradient-sky) a containing block scoped to that page's actual content
 * height. Base.astro's <main> replaces md-content as the per-page wrapper
 * but has no positioning of its own, so those elements fell back to the
 * html/body box — which is pinned to 100vh (`height: 100%` elsewhere in
 * this stylesheet), not real document height — putting `.low-poly`'s
 * `bottom: 0` at the bottom of the first viewport instead of the page.
 */
main {
    position: relative;
}

/*
 * The past-products logo badge used Angular Material's .md-fab class
 * (a circular Floating Action Button) for its white circle + shadow.
 * The site's own main.scss only overrode its size/color (35px, white
 * background) — the shape itself came from Angular Material's own
 * .md-fab rule, dropped along with the rest of AM. Restored here.
 */
.md-fab {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    border-radius: 50%;
    background-clip: padding-box;
    overflow: hidden;
}

/*
 * Angular Material sized every <img> inside a card (other than inside
 * md-card-content) to fill its container at width:100%. This is what
 * scaled the past-products logo badges down to fit their 45px circle —
 * without it, images render at native size (some as large as 60-70px)
 * and get clipped by the badge's overflow:hidden instead of scaled.
 * The site's own .products-logo img { height: auto !important } (in
 * main.css) already correctly overrides the height half of this, which
 * is why aspect ratios were never distorted — only width was missing.
 */
md-card > :not(md-card-content) img,
md-card > img {
    box-sizing: border-box;
    width: 100%;
}