.clickable-parent {
	position: relative;
	isolation: isolate;
	
	& a:before {
		content: "";
		inset: 0;
		position: absolute;
	}
}

.card {
	will-change: transform,background,box-shadow; // eg, cards from: <https://stefanmatei-11ty.netlify.app>
}

// <https://endtimes.dev/you-can-use-css-to-remove-the-double-tap-zoom-feature-on-ios/>
button { touch-action: manipulation; }

.dirty-dark-mode {
 filter: invert(1) hue-rotate(180deg);
}

::root { /* from vite.js demo css */
	font-synthesis: none;
  text-rendering: optimizeLegibility;
}

h2,h3, { 
	text-wrap: balance; 
}
p {
	text-wrap: pretty; // prevent widows and orphans
}

// <https://web.dev/6-css-snippets-every-front-end-developer-should-know-in-2023/>
.circle {
  inline-size: 25ch;
  aspect-ratio: 1;
  border-radius: 50%;
}

/* <https://ishadeed.com/article/defensive-css/> */
.card__thumb {
    object-fit: cover;
}
.modal__content {
    overscroll-behavior-y: contain;
    overflow-y: auto;
}
.element {
    scrollbar-gutter: stable;
}

/* 2023 reset css */

/* make 1rem = 10px */
html {
  font-size: 62.5; /* (62.5/100) * 16px = 10px */
}

*,*:before, *:after { box-sizing: inherit; }
body { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: none; /* for iOS Safari */
  text-size-adjust: none; /* for other mobile browsers */
}

@media (prefers-reduced-motion: no-preference) {
  html {
        scroll-behavior: smooth;
  }
}

a {
    /* Places underlines below the descenders */
    text-underline-position: under;
    /* Sets the thickness as a percentage of the font size */
    text-decoration-thickness: 8;
}

:focus:not(:focus-visible) {
    outline: none;
}

label, button, select, summary, [type=radio], [type=submit], [type=checkbox] {
    cursor: pointer;
	/* <https://piccalil.li/quick-tip/link-button/> */
  display: inline;
  padding: 0;
  border: 0;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
  background: transparent;
  color: currentColor;
  -webkit-appearance: none;
}

/* <https://piccalil.li/quick-tip/safe-viewport-height/> */
html {
  height: -webkit-fill-available;
}
body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
} /* from jul 2020 */

/* <https://piccalil.li/quick-tip/add-scroll-margin-to-all-elements-which-can-be-targeted/> */
[id] {
  scroll-margin-top: 2ex;
}

/* aspect-ratio on images*/
img {
	inline-size: 100%;
  block-size: auto; 
  //aspect-ratio: 375/250;
  object-fit: cover;
}

// clamp lines
.card__preview-text {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;

	line-clamp: 3;
	overflow: hidden;
}

.relatively-positioned-bg {
	background-position: top 50% right .75em;
}

// <https://ishadeed.com/article/conditional-border-radius/>
.conditional-border-radius {
  border-radius: .25rem;
  border-radius: max(0px, min(0.25rem, calc((100vw - 0.125rem - 100%) * 9999))) / 0.25rem;
}

.backdrop { 
  position: relative;
  isolation: isolate; /* probably */
}
.backdrop::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  background: lime;
}

// eg for above:
// add a cool planet bg 🌏
.tdbc-hero {
	isolation: isolate;
	position: relative;
}
.tdbc-hero::after {
  background-image: url(<https://images.unsplash.com/photo-1643330683233-ff2ac89b002c?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjA2NTg3ODg&ixlib=rb-1.2.1&q=80>);
  background-size: cover;
  background-repeat: no-repeat;
	background-position: center bottom;
  /* background-position-y: 84%; */
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  filter: invert(1);
  opacity: 0.25;
}

// Truncate Lines 
// (works in chrome) 
// <https://twitter.com/_georgemoller/status/1533885921996820481/photo/1>

.trunkate-lines-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

// <https://www.youtube.com/watch?v=sNYVqfRwX1A>

.isolation {
	isolation: isolate;
}

// 👆can be used for gradient shadows

//
::marker {
	color: red;
}

//
.counters-section {
	counter-reset: section;
}
.counters-section .section-title {
	counter-increment: section;
}
.counters-section .section-title::before {
	content: "Section " counter(section) ": ";
}