/*
 * Page bodies from content/pages/ (inc/page-content.php, parts/content/).
 *
 * Reproduces the Elementor layouts the files were exported from: sections that hold columns,
 * columns that wrap their items in a flex row, 20px between items unless a column says
 * otherwise, column padding from the section gap, Elementor's line-height of 1 on headings.
 * Per-item values arrive as inline styles; tablet (≤1024px) and phone (≤767px) variants arrive as
 * custom properties switched on by the pg-*-t / pg-*-m classes below.
 */

/* ==== Sections and columns ================================================================= */

/* Astra's body line-height was 1.65em, so every text without its own line-height inherited a
   fixed 26.4px whatever its font size (a 20px text line is 26.4px high, not 33px). */
.pg {
	line-height: 26.4px;
}

@media (max-width: 921px) {
	.pg {
		line-height: 24.0768px; /* 1.65em of Astra's 14.592px phone body text */
	}
}

.pg-section {
	position: relative;
}

/* A section with a minimum height: its content fills it, so valign can centre it. */
.pg-section--min-h {
	display: flex;
}

.pg-section--min-h > .pg-container {
	flex: 1 1 auto;
	width: 100%;
}

.pg-container {
	display: flex;
	margin-right: auto;
	margin-left: auto;
}

.pg-valign-middle > .pg-container {
	align-items: center;
}

.pg-valign-bottom > .pg-container {
	align-items: flex-end;
}

.pg-col {
	display: flex;
	width: var(--w, 100%);
	min-height: 1px;
}

.pg-col__inner {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	width: 100%;
}

/* Elementor gave an empty column no padding or margin (they belonged to "populated" columns), so
   a stacked empty column takes no room on phones. */
.pg-col__inner:empty {
	margin: 0 !important;
	padding: 0 !important;
}

/* Elementor's column "vertical align" placed both the lines of items and the items in a line. */
.pg-col-valign-center > .pg-col__inner {
	align-content: center;
	align-items: center;
}

.pg-col-valign-bottom > .pg-col__inner {
	align-content: flex-end;
	align-items: flex-end;
}

.pg-col-justify-center > .pg-col__inner {
	justify-content: center;
}

.pg-col-justify-end > .pg-col__inner {
	justify-content: flex-end;
}

.pg-self-start {
	align-self: flex-start;
}

.pg-self-center {
	align-self: center;
}

.pg-self-end {
	align-self: flex-end;
}

.pg-col--linked > .pg-col__inner {
	position: relative;
}

.pg-col__link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.pg-col--linked .pg-item a {
	position: relative;
	z-index: 2;
}

/* Column padding from the section's gap setting, as Elementor's elementor-column-gap-*.
   "Default" is 0: custom CSS on the old footer template (unscoped, so it applied site-wide)
   removed Elementor's 10px. The home page had no footer, so it kept the 10px. */
.pg-gap-default > .pg-container > .pg-col > .pg-col__inner {
	padding: 0;
}

.is-splash .pg-gap-default > .pg-container > .pg-col > .pg-col__inner {
	padding: 10px;
}

.pg-gap-narrow > .pg-container > .pg-col > .pg-col__inner {
	padding: 5px;
}

.pg-gap-extended > .pg-container > .pg-col > .pg-col__inner {
	padding: 15px;
}

.pg-gap-wide > .pg-container > .pg-col > .pg-col__inner {
	padding: 20px;
}

.pg-gap-wider > .pg-container > .pg-col > .pg-col__inner {
	padding: 30px;
}

.pg-gap-no > .pg-container > .pg-col > .pg-col__inner {
	padding: 0;
}

/* ==== Items ================================================================================ */

.pg-item {
	position: relative;
	width: 100%;
}

.pg-item:not(:last-child) {
	margin-bottom: var(--space, 20px);
}

/* Elementor spaced widgets only; a nested section takes no gap after it. */
.pg-item.pg-item--section:not(:last-child) {
	margin-bottom: 0;
}

/* Nor after a widget given its own width (Elementor's width-auto / width-initial widgets). */
.pg-item.pg-iw:not(:last-child) {
	margin-bottom: 0;
}

.pg-iw {
	width: var(--iw);
	max-width: var(--iw);
}

/* Elementor gave its headings line-height 1, but Astra's 1.3 on h1–h6 won on the old site. */
.pg-heading {
	margin: 0;
	padding: 0;
	color: var(--sky);
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1;
}

.pg-heading:where(h1, h2, h3, h4, h5, h6) {
	line-height: 1.3;
}

.pg-heading a {
	color: inherit;
	font-size: inherit;
	line-height: inherit;
	text-decoration: inherit;
}

.pg-text {
	color: var(--text);
	font-family: var(--font-text);
}

/* As Astra spaced them on the old site: no space above a paragraph, 1.6em below (kept inside the
   item, which as a flex item does not collapse margins); lists 1em above and below, 20px indent. */
.pg-text p {
	margin: 0 0 1.6em;
}

.pg-text :where(ul, ol) {
	margin: 1em 0;
	padding-left: 20px;
}

.pg-text img {
	height: auto;
}

/* Centred unless the file says otherwise, as Elementor's image widget. */
/* As in Elementor, the picture is an inline box on a text line (26.4px), centred on it: a small
   picture (a flag) gets a line-high box, a tall one is exactly its own height. */
.pg-image {
	margin: 0;
	text-align: center;
}

.pg-image__img {
	display: inline-block;
	max-width: 100%;
	vertical-align: middle;
}

/* As in Elementor, a linked image's link shrinks to the picture, so a percentage width is a share
   of the picture's own width, not of the column (the portraits on «Ιστορικά πρόσωπα»). */
.pg-image > a {
	display: inline-block;
}

.pg-image figcaption {
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
}

.pg-spacer {
	width: 100%;
}

/* ==== Image box, icon box ================================================================== */

.pg-imagebox {
	text-align: center;
}

/* Elementor's picture sat on a text line, which left about 7px under it before the caption. */
.pg-imagebox__figure {
	margin: 0 0 7px;
	line-height: 0;
}

.pg-imagebox__img {
	display: inline-block;
	max-width: 100%;
	height: auto;
}

.pg-imagebox__title {
	margin: 0 0 15px;
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}

.pg-imagebox__text {
	margin: 0;
}

.pg-iconbox {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	color: inherit;
	text-align: center;
	text-decoration: none;
}

.pg-iconbox--left {
	flex-direction: row;
	align-items: flex-start;
	text-align: left;
}

.pg-iconbox__icon {
	color: var(--crimson);
	line-height: 0;
}

.pg-iconbox__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pg-iconbox__title {
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}

/* On phones Elementor put a side icon on top: centred, 18px above the text. */
@media (max-width: 767px) {
	.pg-iconbox--top-m {
		flex-direction: column;
		align-items: center;
		gap: 18px;
		text-align: center;
	}

	.pg-iconbox--top-m .pg-iconbox__body {
		gap: 5px;
		width: 100%;
	}
}

/* ==== Galleries ============================================================================ */

.pg-gallery {
	display: grid;
	grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
	gap: var(--gap);
}

.pg-gallery__item {
	display: block;
	overflow: hidden;
	line-height: 0;
}

.pg-gallery__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.pg-gallery__item:hover .pg-gallery__img {
	transform: scale(1.04);
}

.pg-gallery--grid .pg-gallery__item {
	aspect-ratio: var(--ratio, auto);
}

/* Justified rows: each picture grows from the row height in proportion to its own shape. The
   script (assets/js/site.js) then sets the exact sizes Elementor's gallery used. */
.pg-gallery--justified {
	--row: var(--row-d, 200px);
	display: flex;
	flex-wrap: wrap;
}

@media (max-width: 1024px) {
	.pg-gallery--justified {
		--row: var(--row-t, 150px);
	}
}

@media (max-width: 767px) {
	.pg-gallery--justified {
		--row: var(--row-m, 100px);
	}
}

.pg-gallery--justified .pg-gallery__item {
	flex: calc(var(--ar) * 100) 1 calc(var(--ar) * var(--row));
	height: var(--row);
}

.pg-gallery--justified::after {
	content: "";
	flex-grow: 999;
}

.pg-gallery--masonry {
	display: block;
	columns: var(--cols);
	column-gap: var(--gap);
}

.pg-gallery--masonry .pg-gallery__item {
	margin-bottom: var(--gap);
	break-inside: avoid;
}

/* WordPress's own gallery: equal cells with 10px padding, each picture at its size, centred. */
.pg-gallery--basic {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}

.pg-gallery--basic .pg-gallery__item {
	flex: 0 0 calc(100% / var(--cols));
	max-width: calc(100% / var(--cols));
	padding: 10px;
	text-align: center;
}

.pg-gallery--basic .pg-gallery__img {
	display: inline-block;
	width: auto;
	max-width: 100%;
	height: auto;
}

.pg-gallery--basic .pg-gallery__item:hover .pg-gallery__img {
	transform: none;
}

/* ==== Tables =============================================================================== */

.pg-table {
	width: 100%;
}

.pg-table__scroll {
	overflow-x: auto;
}

.pg-table table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--font-display);
}

.pg-table td {
	vertical-align: top;
}

/* The decade pages (Essential Addons "Data Table"): centred crimson header, rounded top corners,
   white rows, black 14px text. */
.pg-table--events th {
	padding: 20px 15px;
	background: var(--crimson);
	color: var(--white);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
}

.pg-table--events th:first-child {
	border-top-left-radius: 10px;
}

.pg-table--events th:last-child {
	border-top-right-radius: 10px;
}

.pg-table--events td {
	padding: 20px 15px;
	background: var(--white);
	color: #000;
	font-size: 14px;
	font-weight: 500;
	line-height: 23px;
	text-align: left;
}

.pg-table--events a {
	color: #001aff;
}

/* The Ninja Tables lists (Essential Addons "Advanced Data Table"): crimson header, white body,
   Poppins 14px/500 cells on the inherited body line. «catalogue» is the book list (thin grey
   border, grey text); «chronicle» is the 1924-1950 events list (centred header, roomy black cells). */
.pg-table--catalogue table,
.pg-table--chronicle table {
	margin-bottom: 24px;
}

.pg-table--catalogue table {
	border: 1px solid #eee;
}

.pg-table--catalogue thead,
.pg-table--chronicle thead {
	background: var(--crimson);
}

.pg-table--catalogue tbody,
.pg-table--chronicle tbody {
	background: var(--white);
}

.pg-table--catalogue th,
.pg-table--chronicle th {
	padding: 10px;
	color: var(--white);
	font-size: 15px;
	font-weight: 600;
	line-height: inherit; /* the body line: 26.4px, 24.08px on phones */
	text-align: left;
}

.pg-table--chronicle th {
	text-align: center;
}

.pg-table--catalogue td,
.pg-table--chronicle td {
	padding: 10px;
	color: #666;
	font-size: 14px;
	font-weight: 500;
	line-height: inherit;
	vertical-align: middle;
}

.pg-table--chronicle td {
	padding: 21px;
	color: #000;
}

.pg-table__search {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 0 0 20px;
}

.pg-table__search input {
	width: 400px;
	max-width: 100%;
	height: 50px;
	padding: 1px 12px;
	border: 1px solid #eee;
	border-radius: 0;
	background: var(--white);
	font: inherit;
	font-size: 16px;
}

.pg-table__count {
	color: var(--text);
	font-size: 14px;
}

.pg-table__count:empty {
	display: none; /* no empty second line under the field on phones */
}

.pg-table__pages {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
	margin-top: 20px;
}

.pg-table__pages button {
	padding: 5px 15px;
	border: 0;
	background: none;
	color: #000;
	font: inherit;
	font-size: 18px;
	cursor: pointer;
}

.pg-table__pages button[aria-current="page"] {
	background: #fafafa;
	color: #666;
}

.pg-table__pages span {
	padding: 5px 4px;
	font-size: 18px;
}

/* ==== Map ================================================================================== */

.pg-map {
	position: relative;
	overflow: hidden;
	background: var(--panel);
}

.pg-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.pg-map__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 100%;
	padding: 20px;
	text-align: center;
}

.pg-map__icon {
	color: var(--crimson);
	font-size: 40px;
}

.pg-map__address {
	margin: 0;
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 600;
}

.pg-map__note {
	margin: 0;
	color: var(--text);
	font-size: 14px;
}

/* ==== News list («Νέα») ==================================================================== */

/* The old Posts widget's settings: cards 20/15px padding, 21px corners, 25px apart; cover on the
   right 238px wide at 0.43 of its width, 16px corners, 23px from the text. */
/* The old widget left 25px above the first card. */
.news-list {
	display: grid;
	gap: 25px;
	margin-top: 25px;
}

.news-card {
	display: flex;
	padding: 20px 15px;
	border-radius: 21px;
	background: var(--white);
	box-shadow: 0 0 10px rgba(150, 185, 255, 0.15);
}

.news-card__body {
	flex: 1;
	min-width: 0;
	padding-bottom: 10px; /* the old excerpt's bottom margin, kept when there is no excerpt */
}

.news-card__title {
	margin: 0 0 4px;
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}

.news-card__title a {
	color: var(--crimson);
	text-decoration: none;
}

.news-card__title a:hover {
	text-decoration: underline;
}

.news-card__date {
	display: block;
	color: #8193a7;
	font-family: var(--font-display);
	font-size: 14px;
	line-height: 1.3;
}

.news-card__excerpt {
	margin: 13px 0 0;
	color: #173a50;
	font-family: var(--font-display);
	font-size: 14px;
	line-height: 1.5;
}

/* At least 0.43 of its width high, and as tall as the card's text (the old cover stretched). */
.news-card__thumb {
	--thumb: 238px;
	position: relative;
	flex: 0 0 var(--thumb);
	min-height: calc(var(--thumb) * 0.43);
	margin-left: 23px;
	line-height: 0;
}

.news-card__thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 16px;
	object-fit: cover;
}

/* Phones (the old page hid the list there): the cover goes above the text, full width, in the
   same 0.43 proportion, instead of a narrow strip stretched beside a long title. */
@media (max-width: 767px) {
	.news-card {
		flex-direction: column;
	}

	.news-card__thumb {
		order: -1;
		flex: none;
		width: 100%;
		min-height: 0;
		aspect-ratio: 100 / 43;
		margin: 0 0 15px;
	}
}

/* ==== Decade buttons («Αναφορές – Δημοσιεύματα») ========================================== */

/* As Elementor's taxonomy filter drew them: a centred 735px block, buttons 25px apart and
   stretched to fill each row. */
.pg-decades {
	max-width: 735px;
	margin: 0 auto;
}

.pg-decades__list {
	display: flex;
	flex-wrap: wrap;
	gap: 25px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pg-decades__list > li {
	flex: 1 1 auto;
}

.pg-decades a {
	display: block;
	padding: 8px;
	text-align: center;
	border-radius: 6px;
	background: var(--crimson);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	color: var(--white);
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 400;
	line-height: 25px;
	text-decoration: none;
}

.pg-decades a:hover {
	background: var(--white);
	color: var(--crimson);
}

/* ==== Lightbox ============================================================================= */

.lightbox {
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	margin: 0;
	padding: 48px 56px;
	border: 0;
	background: rgba(0, 0, 0, 0.9);
}

.lightbox[open] {
	display: flex;
	align-items: center;
	justify-content: center;
}

.lightbox__img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.lightbox__button {
	position: absolute;
	display: flex;
	padding: 10px;
	border: 0;
	background: none;
	color: var(--white);
	font-size: 28px;
	cursor: pointer;
}

.lightbox__close {
	top: 8px;
	right: 8px;
}

.lightbox__prev {
	top: 50%;
	left: 4px;
	transform: translateY(-50%) rotate(180deg);
}

.lightbox__next {
	top: 50%;
	right: 4px;
	transform: translateY(-50%);
}

/* ==== Visibility and responsive values ===================================================== */

@media (min-width: 1025px) {
	.pg-hide-desktop {
		display: none !important;
	}
}

@media (max-width: 1024px) {
	.pg-hide-tablet {
		display: none !important;
	}

	.pg-w-t {
		width: var(--w-t);
	}

	.pg-iw-t {
		width: var(--iw-t);
		max-width: var(--iw-t);
	}

	.pg-margin-t {
		margin: var(--margin-t) !important;
	}

	.pg-padding-t {
		padding: var(--padding-t) !important;
	}

	.pg-font-size-t {
		font-size: var(--font-size-t) !important;
	}

	.pg-line-height-t {
		line-height: var(--line-height-t) !important;
	}

	.pg-text-align-t {
		text-align: var(--text-align-t) !important;
	}

	.pg-width-t {
		width: var(--width-t) !important;
	}

	.pg-height-t {
		height: var(--height-t) !important;
	}

	.pg-max-width-t {
		max-width: var(--max-width-t) !important;
	}
}

@media (max-width: 767px) {
	.pg-hide-mobile {
		display: none !important;
	}

	/* Columns stack on phones unless the file gives them a phone width. */
	.pg-container {
		flex-wrap: wrap;
	}

	.pg-col {
		width: 100%;
	}

	.pg-w-m {
		width: var(--w-m);
	}

	.pg-reverse-m > .pg-container {
		flex-direction: column-reverse;
	}

	.pg-iw-m {
		width: var(--iw-m);
		max-width: var(--iw-m);
	}

	.pg-margin-m {
		margin: var(--margin-m) !important;
	}

	.pg-padding-m {
		padding: var(--padding-m) !important;
	}

	.pg-font-size-m {
		font-size: var(--font-size-m) !important;
	}

	.pg-line-height-m {
		line-height: var(--line-height-m) !important;
	}

	.pg-text-align-m {
		text-align: var(--text-align-m) !important;
	}

	.pg-width-m {
		width: var(--width-m) !important;
	}

	.pg-height-m {
		height: var(--height-m) !important;
	}

	.pg-max-width-m {
		max-width: var(--max-width-m) !important;
	}

	.pg-gallery:not(.pg-gallery--justified) {
		grid-template-columns: repeat(min(var(--cols), 2), minmax(0, 1fr));
	}
}