/* ==================================================================
   Dragonchoice 2026: layout (Grid and Flexbox)

   The 2021 theme built every layout from floats and percentage widths.
   The float declarations have been removed from legacy.css and
   responsive.css, and the layout now lives here. The only floats left
   anywhere are the ones that wrap text around an image (alignleft,
   alignright, the dragonet and egg pictures and so on), which is what
   float is still for.

   This file loads after responsive.css and before style.css. Where an
   old rule still sets a width or margin, the rules below reset it with
   a selector of equal or higher specificity.
   ================================================================== */

/* ------------------------------------------------------------------
   1. Page shell. Full-width bands are ordinary blocks now; they no
      longer need to float to contain their children.
   ------------------------------------------------------------------ */
#topContainer, #headerContainer, #navContainer, #contentContainer,
#heroContainer, #gameContainer, #dragonchoiceContainer, #prizeContainer,
#fbContainer, #registerContainer, #weyrlingContainer, #recapContainer,
#otherHomeContainer, #footerContainer {
	width: auto;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* The media queries in responsive.css gave these wrappers a 96% width with
   2% margins. The wrappers keep that behaviour via padding instead (see
   style.css), so reset the margins here. */
#hero, #game, #dragonchoiceContent, #otherHome {
	margin-left: auto;
	margin-right: auto;
	max-width: 1300px;
}
#hero { max-width: 1100px; }

/* Images that were floated to fill their box are plain blocks. */
.gameImage img, .dragonchoiceImage img, .resultImage img,
.sidebarImage img, .dragonetsImage img, .achievements img,
.articleImage img.wp-post-image, .originImage {
	display: block;
}

/* Boxes that hold an image floated for text wrapping must still contain it. */
main, #sidebar, article, .comments, .dragonetMessage, .otherHome,
#homeNews, #dc3art, #dragonflight, #dragonchoice3, #call, .achievement .blurb {
	display: flow-root;
}

/* ------------------------------------------------------------------
   2. Content area: main column and sidebar (Grid)
   ------------------------------------------------------------------ */
#content {
	box-sizing: border-box;
	padding-left: 28px;
	padding-right: 28px;
}

main {
	width: auto;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	min-width: 0;
}

#content:has(> aside#sidebar) {
	display: grid;
	grid-template-columns: minmax(0, 70fr) minmax(0, 25fr);
	column-gap: 5%;
	align-items: start;
}

/* Anything else inside #content (such as a stray script or notice) spans the row. */
#content:has(> aside#sidebar) > :not(main):not(#sidebar) { grid-column: 1 / -1; }
#content:has(> aside#sidebar) > main { grid-column: 1; }

#sidebar {
	grid-column: 2;
	width: auto;
	margin-left: 0;
	margin-right: 0;
	min-width: 0;
}

.home main { max-width: none; }

/* Author pages: the sidebar drops under the profile earlier than elsewhere. */
@media screen and (max-width: 1300px) {
	.author #content:has(> aside#sidebar) { grid-template-columns: minmax(0, 1fr); }
	.author #content:has(> aside#sidebar) > #sidebar { grid-column: 1; }
}

@media screen and (max-width: 780px) {
	#content:has(> aside#sidebar) { grid-template-columns: minmax(0, 1fr); }
	#content:has(> aside#sidebar) > #sidebar { grid-column: 1; }
	#content { padding-left: 16px; padding-right: 16px; }
}

/* ------------------------------------------------------------------
   3. Home and game bands (Grid)
   ------------------------------------------------------------------ */

/* Hero: the two bullet lists sit side by side while there is room for both. */
.gameInfo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 48px;
	width: auto;
}
.gameInfo > p { grid-column: 1 / -1; }

#hero ul, #hero ul:last-of-type {
	width: auto;
	min-width: 0;
	margin-right: 0;
}

/* Three across: the game pitch and the Dragonchoice trilogy. */
#game, #dragonchoiceContent {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: clamp(20px, 5%, 56px);
	align-items: start;
}
#dragonchoiceContent > :not(.dragonchoice) { grid-column: 1 / -1; }

.gameAspect, .dragonchoice {
	width: auto;
	margin-right: 0;
	min-width: 0;
}
.gameImage, .dragonchoiceImage, .gameBlurb, .dragonchoiceBlurb { width: auto; }

/* Two across: the Weyrling, Recap, Register, Facebook, Prize bands. */
div#weyrling, div#recap, div#register, div#fb, div#prize {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 10%;
	align-items: start;
}
.weyrlingLeft, .weyrlingRight, .recapLeft, .recapRight, .registerLeft, .registerRight,
.fbLeft, .fbRight, .prizeLeft, .prizeRight, .teaserLeft, .teaserRight {
	width: auto;
	margin-right: 0;
	min-width: 0;
}

/* Teaser page (the two halves sit inside the page content). */
article:has(> .teaserLeft) {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 10%;
	align-items: start;
}
article:has(> .teaserLeft) > :not(.teaserLeft):not(.teaserRight) { grid-column: 1 / -1; }

/* Two across: the news column and the featured art. */
#otherHome {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 4%;
	align-items: start;
}
.otherHome { width: auto; margin-right: 0; min-width: 0; }

/* Older home template: main column with a narrower column beside it. */
main:has(> #homeLeft) {
	display: grid;
	grid-template-columns: minmax(0, 65fr) minmax(0, 32fr);
	column-gap: 3%;
	align-items: start;
}
#homeLeft, #homeRight { width: auto; margin-left: 0; min-width: 0; }
#homeLeft > :not(#dragonflight):not(#dragonchoice3):not(#dragonchoice):not(#dragonchoice2) { min-width: 0; }

#dragonchoice, #dragonchoice2 { width: auto; margin-right: 0; }
#homeLeft:has(> #dragonchoice) {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 2%;
	align-items: start;
}
#homeLeft:has(> #dragonchoice) > :not(#dragonchoice):not(#dragonchoice2) { grid-column: 1 / -1; }

/* Gallery thumbnails in the home sidebar. */
main #homeRight ul.wGallery {
	display: flex;
	flex-wrap: wrap;
	gap: 5px 2%;
	margin: 0;
	padding: 0;
}
main #homeRight ul li.wGallery {
	width: 112px;
	max-width: 112px;
	margin: 0;
	padding: 0;
}
main #homeRight li.wGallery img { display: block; float: none; }

/* ------------------------------------------------------------------
   4. Lists of posts: chapter and news rows (Grid)
   ------------------------------------------------------------------ */
article.chapter:has(> .articleImage),
article.news:has(> .articleImage) {
	display: grid;
	grid-template-columns: min(100px, 30%) minmax(0, 1fr);
	column-gap: 2%;
	align-items: start;
}
article.chapter .articleImage, article.news .articleImage {
	width: auto;
	max-width: none;
	margin-right: 0;
}
article.chapter .articleImage img.wp-post-image,
article.news .articleImage img.wp-post-image { width: 100%; height: auto; }
article.chapter > :not(.articleImage):not(.articleExcerpt),
article.news > :not(.articleImage):not(.articleExcerpt) { grid-column: 1 / -1; }

/* Tag lists on search results. */
article.search ul { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; padding: 0; }
article.search li { margin-right: 0; }

/* ------------------------------------------------------------------
   5. Achievements and badges (Grid with Flexbox cards)
   ------------------------------------------------------------------ */
.achievements {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: 25px;
	width: auto;
	align-items: start;
}
.achievements > h1, .achievements > h2, .achievements > h3, .achievements > p { grid-column: 1 / -1; }

.achievement {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	width: auto;
	max-width: none;
	margin: 0;
	min-width: 0;
	box-sizing: border-box;
}
.achievement .image { flex: 0 0 95px; width: 95px; margin: 0; }
.achievement .blurb { flex: 1 1 0; width: auto; min-width: 0; }

.badge { width: 100px; margin: 0 20px 10px 0; display: inline-block; vertical-align: top; }

/* ------------------------------------------------------------------
   6. Small repeated pieces (Flexbox)
   ------------------------------------------------------------------ */

/* Page numbers and previous/next links. */
#wp_page_numbers { width: auto; }
#wp_page_numbers ul, .nav-links ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 0;
	list-style: none;
}
#wp_page_numbers li, .nav-links ul li { display: block; }
.nav-links ul li { margin: 0 10px 0 0; }

/* Search-term chips in the sidebar: a small flex row each. */
#sidebar ul.searchees {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 5px;
}
#sidebar ul.searchees li {
	width: auto;
	margin: 0;
	display: flex;
	align-items: center;
}
#sidebar ul.searchees li a { display: inline-flex; align-items: center; gap: 5px; }
#sidebar ul.searchees li img { margin-right: 0; flex: 0 0 30px; }

/* Little icons in result tables sit in line with the text. */
table.searchResults img, table.results img {
	display: inline-block;
	vertical-align: middle;
	width: 30px;
	margin-right: 5px;
}
table.results { margin-top: 30px; }
.gameResults .resultAchievement {
	display: inline-block;
	vertical-align: middle;
	width: 30px;
	margin: 0 10px 6px 0;
}

/* Radio-button picture lists in the game forms. */
main ul.acf-radio-list {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
main ul.acf-radio-list li { margin: 0; width: 100px; }

/* Full-width boxes that used to float only to contain their children. */
.gameInfo, #heroTitle, #heroBlurb, article, article.entry, article.chapter, article.news,
#homeArt, #homeNews, #dc3art, #dragonflight, #dragonchoice3,
#call, .comments, .sharing, .fullWidthPatreon, .dragonetMessage, .resultImage,
.sidebarImage, .sidebarLeaderboard, .dragonetsImage, .achievements {
	width: auto;
}
.sidebarImage, .sidebarLeaderboard, .dragonetsImage { padding-bottom: 25px; }

.jump { float: none; }

/* ------------------------------------------------------------------
   7. Author profile card (Grid)
   ------------------------------------------------------------------ */
.authorCard {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 325px;
	column-gap: 20px;
	align-items: start;
	width: auto;
}
.authorLeft, .authorRight { width: auto; min-width: 0; }
.authorCard > :not(.authorLeft):not(.authorRight) { grid-column: 1 / -1; }
.authorCard .eyeSwirl { width: 325px; max-width: 100%; }

/* ------------------------------------------------------------------
   8. Footer
   ------------------------------------------------------------------ */
.copyright { width: auto; }

/* ------------------------------------------------------------------
   9. Breakpoints
   ------------------------------------------------------------------ */

/* The trilogy becomes a stack of rows: picture on the left, text on the right. */
@media screen and (max-width: 880px) {
	#dragonchoiceContent { grid-template-columns: minmax(0, 1fr); }
	.dragonchoice {
		display: grid;
		grid-template-columns: 30% minmax(0, 1fr);
		column-gap: 5%;
		align-items: start;
	}
	.dragonchoice > :not(.dragonchoiceImage):not(.dragonchoiceBlurb) { grid-column: 1 / -1; }
	.dragonchoiceImage, .dragonchoiceBlurb { width: auto; margin-right: 0; }

	#otherHome { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
}

@media screen and (max-width: 830px) {
	main:has(> #homeLeft) { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
	#homeRight { margin-top: 10px; }
}

@media screen and (max-width: 1000px) {
	.achievements { grid-template-columns: minmax(0, 400px); }
}

@media screen and (max-width: 650px) {
	.authorCard { grid-template-columns: minmax(0, 1fr); }
	.authorCard .eyeSwirl { width: 312px; margin-left: auto; margin-right: auto; }
}

/* Everything that sat in two or three columns stacks. */
@media screen and (max-width: 630px) {
	#game, div#weyrling, div#recap, div#register, div#fb, div#prize, article:has(> .teaserLeft),
	#homeLeft:has(> #dragonchoice) {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 28px;
	}
	.gameAspect, .teaserLeft, .teaserRight, .prizeLeft, .prizeRight, .fbLeft, .fbRight,
	.registerLeft, .registerRight, .recapLeft, .recapRight, .weyrlingLeft, .weyrlingRight {
		width: auto;
		margin-right: 0;
	}
	#heroTitle, #heroBlurb, #heroImage { width: auto; }
	.gameInfo { grid-template-columns: minmax(0, 1fr); }
}

@media screen and (max-width: 530px) {
	#dragonchoice, #dragonchoice2 { width: auto; margin-right: 0; }
}

@media screen and (max-width: 400px) {
	.rank { float: none; width: 150px; margin-left: auto; margin-right: auto; }
}