/* @media screen and (max-width: 20rem) {
	article.external {
		margin: 0.3rem !important;
	}
} */

/* @container contents (max-width: 40rem) {
	div.imgcontainer {
		font-size: 0.75rem !important;
	}
} */


@container contents (max-width: 35rem) {
	div.imgcontainer {
		font-size: 0.5rem !important;
	}

	h2 {
		font-size: 2.5rem !important;
	}
}

@container contents (max-width: 20rem) {
	h2 {
		font-size: 2rem !important;
		margin-bottom: 0.5rem !important;
	}

	h3 {
		margin-bottom: 0.5rem !important;
	}
}

@container contents (max-width: 22rem) {
	div.imgcontainer {
		display: none;
	}
}

@container article (min-width: 50rem) {
	div.article {	
		grid-template-areas: 
			'a b'
			'a c' !important;
		grid-template-columns: 1fr max-content !important;
		grid-template-rows: max-content max-content !important;
	}
}

@media screen and (max-width: 22rem) {
	article {
		& section {
			border-radius: 0 !important;
			& div.section_inner {
				border-radius: 0 !important;
			}
		}

		margin-bottom: 0rem !important;
	}
}

& *.fs_system { font-family: system-ui, sans-serif; }
& *.fs_transitional { font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif; }
& *.fs_old { font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif; }
& *.fs_humanist { font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif; }
& *.fs_geometric { font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif; }
& *.fs_classical { font-family: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif; }
& *.fs_grotesque { font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;; }
& *.fs_serif { font-family: 'Nimbus Mono PS', 'Courier New', monospace; }
& *.fs_code { font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; }
& *.fs_industrial { font-family: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif; }
& *.fs_sans { font-family: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif; }
& *.fs_slab { font-family: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif; }
& *.fs_antique { font-family: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif; }
& *.fs_didone { font-family: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif; }
& *.fs_handwritten { font-family: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive; }

article {
	container: article / inline-size;
	position: relative;
	transition: margin 0.5s ease-in-out;
	margin-bottom: 1rem;
	user-select: none;
	break-inside: avoid-column;
	text-align: left;

	& *.tt_smallcaps { font-variant: small-caps; }
	& *.tt_allcaps { text-transform: uppercase; }

	& *.h2_shadow { text-shadow: 0.05rem 0.05rem 0.2rem var(--h2shadowcolor); }
	& *.h3_shadow { text-shadow: 0.05rem 0.05rem 0.2rem var(--h3shadowcolor); }

	& *.h2_outline { -webkit-text-stroke: 0.05rem var(--h2outlinecolor); }
	& *.h3_outline { -webkit-text-stroke: 0.05rem var(--h3outlinecolor); }

	&.external div.article:not(.child) {
		column-gap: 1rem;
		row-gap: 1rem;
	}

	&.info {
		/* background: linear-gradient(180deg, #e4e4e4, #d4d4d4); */
		font-weight: lighter;
		border-radius: 0.45rem;
		padding: 0.5rem;
		/* box-shadow: 0.2rem 0.2rem 0.3rem #0003; */
		hyphens: auto;
		text-align: justify;
		font-size: 90%;
		border: 1px dotted silver;
		background: linear-gradient(180deg, #f8f8f8, #f0f0f0);

		& p {
			padding: 0;
			margin: 0;
		}

		& p ~ p {
			margin-top: 4pt;
		}
	}

	& div.card_body {
		& p.Blockquote {
			font-style: italic;
			padding-left: 0.5rem;

			&::after {
				content: '\201D';
			}
			
			&::before {
				content: '\201C';
			}
		}

		& a.transparent {
			text-decoration: none;
		}

		& p.Sign {
			text-align: right;
			font-weight: bold;
		}

		& p {
			font-size: 1rem;
			line-height: 1.4rem;
			text-align: justify;
			margin-top: 0;
			margin-bottom: 0.5rem;
			font-weight: normal;
			color: var(--pcolor);
			
			&:first-of-type:first-letter {
				text-transform: uppercase;
				font-size: 2rem;
			}

			&:empty {
				overflow: hidden; /* Ez azért kell, hogy a BR nélküli P-kbe is bemenjen a kurzor */
				width: 100%;

				&::before {
					content: '​';
					border-right: 1px dotted hsl(var(--clr_typo_hue), var(--clr_typo_sat), calc(var(--clr_typo_val) + 70%));
					display: inline-block;
					/* Ezek itt azért kellenek, mert különben kimegy a jobb szélére */
					width: 1px;
					margin-left: -1px;
				}
			}
		}
	}

	& div.right_icon {
		position: absolute;
		z-index: 1;
		background-color: #ffffffc0;
		border-radius: 0.2rem;
		height: 2rem;
		width: 2rem;
		padding: 0.2rem;
		box-shadow: 0.2rem 0.2rem 0.4rem #0003;
		left: -1.25rem;
		top: 0.5rem;
		cursor: default;
		fill: #c57000;

		&.pub {
			fill: #478547;
			z-index: 5;
		}

		&.pri {
			fill: #a70b0b;
		}

		& svg {
			width: 1.6rem;
      		height: 1.6rem;
		}
	}

	& div.download_icon {
		position: absolute;
		z-index: 5;
		background-color: #ffffffc0;
		border-radius: 0.2rem;
		height: 2rem;
		width: 2rem;
		padding: 0.2rem;
		box-shadow: 0.2rem 0.2rem 0.4rem #0003;
		left: -1.25rem;
		top: 3rem;
		cursor: default;

		& svg {
			width: 1.6rem;
      		height: 1.6rem;
		}
	}

	& div.article {
		display: grid;
		grid-template-areas: 
			'a'
			'b'
			'c';
		grid-template-columns: 1fr;
		grid-template-rows: max-content max-content max-content;

		&.child {
			/* overflow: hidden; */
			height: calc(100% - 1rem);
			
			& p:not(:first-of-type) {
				display: none;
			}
	
			& section:not(:first-of-type) {
				display: none;
			}

			& section:nth-of-type(1) {
				border-right: none;
			}
		}

		& section {
			/* padding: 1rem; */
			position: relative;
			border-radius: 0.45rem;
		}

		& section.contents {
			grid-area: a;
			container: contents / inline-size;
			hyphens: auto;
			background: var(--img);
			background-color: var(--bgcolor);
			background-blend-mode: var(--blend);
			background-size: 16em;
			box-shadow: 0.1rem 0.1rem 0.3rem #0000003f;

			& div.section_inner {
				padding: 1rem;
				background: linear-gradient(180deg, var(--grad1), var(--grad2));
				border-radius: 0.45rem;
				height: 100%;
				backdrop-filter: var(--contrast);
	
				& div.imgcontainer {
					width: 15em;
					height: 20em;
					padding-bottom: 5em;
					font-size: 1rem;
					transition: font-size 0.5s ease-in-out;
			
					& div.img {
						height: 100%;
						width: max-content;
						transform: rotateY(0deg) rotate(0deg);

						&.clickable {
							cursor: pointer;
							z-index: 2;
							position: relative;
						}

						& img {
							height: 100%;
						}
			
						& div.decor {
							position: absolute;
							inset: 0;
							background: linear-gradient(90deg, transparent 0%, transparent 1%, #0000003f 2%, #ffffff3f 4%, transparent 7%);
						}
					}
				}

				& div.imgcontainer.right30deg {
					shape-outside: polygon(0.34em 12.10em, 5.88em 0.02em, 12.6em 17.75em);
					float: right;
					padding-left: 5em;
					margin-top: -0.5em;
					margin-right: 2em;

					& div.img {
						transform: rotateY(0deg) rotate(25deg);
						box-shadow: 1em 1em 0.5em #0003;
					}
				}

				& div.imgcontainer.right15deg {
					shape-outside: polygon(1.98em 13.81em, 5.88em 0.02em, 15.46em 17.46em);
					float: right;
					padding-left: 5.5em;
					margin-top: -0.5em;
					margin-right: 2em;

					& div.img {
						transform: rotateY(0deg) rotate(15deg);
						box-shadow: 1em 1em 0.5em #0003;
					}
				}

				& div.imgcontainer.rightstraight {
					shape-outside: polygon(4.98em 14.60em, 5.02em 0.09em, 17.32em 14.6em);
					float: right;
					padding-left: 6em;
					margin-top: -1.5em;
					margin-right: 2em;

					& div.img {
						box-shadow: 1em 1em 0.5em #0003;
					}
				}

				& div.imgcontainer.leftcorner {
					shape-outside: polygon(-0.26em 14.62em, 11.19em -0.13em, 11.13em 14.62em);
					float: left;
					margin-top: -1.5em;
					margin-left: -1.5em;
					
					& div.img {
						box-shadow: 0.2em 0.2em 0.4em #0005;
					}
				}

				& div.imgcontainer.leftstraight {
					shape-outside: polygon(0.06em 14.93em, 12.74em 0.12em, 12.75em 14.92em);
					float: left;
					margin-top: -1.5em;
					margin-left: 0em;

					& div.img {
						box-shadow: 0.2em 0.2em 0.4em #0005;
					}
				}

				& div.imgcontainer.left15deg {
					shape-outside: polygon(0.15em 16.42em, 11.31em 0.08em, 15.85em 16.38em);
					float: left;
					padding-right: 5em;
					margin-top: -0.5em;
					margin-left: 0em;

					& div.img {
						transform: rotateY(0deg) rotate(-15deg);
						box-shadow: 0.2em 0.2em 0.4em #0005;
					}
				}

				& :is(h2, h3) a {
					text-decoration: none;
					color: inherit;
					transition: margin 0.5s, padding 0.5s;
					display: block;
		
					&:hover {
						text-decoration: underline;
						margin-top: -0.2rem;
						padding-bottom: 0.2rem;
					}
				}
		
				& h2 {
					color: var(--h2color);
					font-weight: var(--h2weight);
					margin-top: 0;
					margin-bottom: 1rem;
					font-size: var(--h2size);
					letter-spacing: var(--h2letterspc);
					transition: font-size 0.5s;
					line-height: 1em;

					&:empty::before {
						content: '…';
					}

					/* &:focus {
						background-color: hsl(var(--clr_sel_hue), var(--clr_sel_sat), 68%, 30%);
					} */
				}

				/* & div.card_body {
					&:focus {
						background-color: hsl(var(--clr_sel_hue), var(--clr_sel_sat), 68%, 30%);
					}
				} */
		
				& h3 {
					color: var(--h3color);
					font-weight: var(--h3weight);
					font-size: var(--h3size);
					letter-spacing: var(--h3letterspc);
					margin-top: 0;
					margin-bottom: 1rem;
					border-bottom: 0.1rem dotted var(--h3color);
					line-height: 1em;
				}

				&:hover a.read {
					background-color: #ffd381;
					margin-left: 3.5rem;
					margin-top: 3.5em;
					font-size: 100%;
					line-height: 95%;
				}
			}
		}

		& section.tags {
			grid-area: b;
			font-family: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
			font-weight: 200;
			background-color: #ffffff7f;
			padding: 0.5rem;

			& a {
				text-decoration: none;
				color: inherit;
				transition: margin 0.5s, padding 0.5s;
				display: block;

				&:hover {
					text-decoration: underline;
					margin-top: -0.2rem;
					padding-bottom: 0.2rem;
				}
			}

			& span.link {
				display: inline-block;
  				width: 1.2rem;

				& svg {
					height: 0.75rem;
					vertical-align: baseline;
					margin-bottom: -0.075rem;
					fill: #b5b5b5;
				}
			}

			& table {
				width: 100%;

				& tr {
					& *:is(td, th) {
						border-bottom: 1px solid #16223c29;
						padding-top: 0.5rem;
					}

					& th {
						text-align: left;
						font-size: 85%;
						padding-right: 0.5rem;
					}
				}
			}
		}

		& section.downloads {
			grid-area: c;
			text-align: center;
      		padding: 1rem;
			border-top: 0.1rem dotted #00000040;
			border-radius: 0;

			& a:not(.read) {
				display: inline-block;
				text-decoration: none;
				color: black;
				position: relative;
				margin: 0 0.6rem 0.6rem 0;
				background-color: #ffffff7f;
				line-height: 1rem;
				border-radius: 0.3rem;
				padding: 0.3rem 0.6rem 0.3rem 2rem;

				& div.svg {
					position: absolute;
					left: 0.6rem;
					display: inline-block;

					& svg {
						height: 1rem;
						width: 1rem;
					}
				}
			}

			& a:hover {
				background-color: #ffffffff;
			}

			& a:visited {
				color: black;
			}
		}

		& div.readbox {
			position: absolute;
			right: 0;
			bottom: 0;
			overflow: hidden;
			height: 8rem;
			width: 8rem;
			pointer-events: none;

			& a.read {
				display: block;
				color: black;
				background-color: #ffa500;
				text-align: center;
				padding: 0 3rem 0 3rem;
				margin-left: 4.5rem;
				margin-top: 4.5rem;
				text-decoration: none;
				transform: rotate(-45deg);
				height: 6rem;
				width: 12rem;
				transform-origin: bottom center;
				transition: margin 0.2s, background-color 0.2s, font-size 0.2s;
				padding-top: 0.1rem;
				font-size: 75%;
        		line-height: 95%;
				pointer-events: none;
				cursor: pointer;
			}
		}
	}
}