/* CSS Document */

:root {
  --bg: #f0e8db;          /* jemná písková – hlavní pozadí */
  --surface: #c1beb7;     /* bílá pro boxy a textové bloky */
  --accent: #476C5E;      /* zelenošedá – nadpisy, bannery, zvýraznění */
  --accent-dark: #476C5E; /* zelenošedá – tlačítka, call-to-action */
  --text: #3A3A3A;        /* tmavě šedý text pro čitelnost */
  --text-white: #FFFFFF;        /* tmavě šedý text pro čitelnost */
  --muted: #476C5E;       /* šedofialová – doplňkové texty, ikonky */
  --radius: 18px;
  --container: 1080px;
  --shadow: 0 10px 28px rgba(0,0,0,0.05);
  --button-accent: #ffffff; /* bílý text na tlačítkách */
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
}
body { 
    background: var(--bg); 
    color: var(--text); 
    line-height: 1.7; 
    font-size: 14px;
}
a { 
    color: inherit; 
    text-decoration: none; 
}
.container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 24px;
}

header { 
    background: var(--surface); 
    box-shadow: var(--shadow); 
    position: sticky; 
    top: 10px; 
    z-index: 99; 
}
.nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 24px 15px 24px;
}
.brand {
	display: flex;
	align-items: center;
	gap: 14px;
}
.logo {
	width: 54px;
	height: 54px;
	border-radius: 50%;
    background: linear-gradient(135deg,var(--accent-dark), #d9938e);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	font-size: 22px;
	box-shadow: var(--shadow);
}
nav ul {
	display: flex;
	gap: 20px;
	list-style: none;
	justify-content: right;
}
nav a {
	font-weight: 500;
	color: var(--muted);
	transition: color .2s;
}
nav a:hover {
	color: var(--accent-dark);
}
.cta {
	background: var(--accent-dark);
	padding: 10px 18px;
	border-radius: var(--radius);
	color: var(--text-white);
	font-weight: 600;
	transition: background .2s;
}
.ctb {
	background: var(--accent-dark);
	padding: 20px 5px 10px 5px;
	border-radius: var(--radius);
	color: var(--text-white);
	font-weight: 600;
	transition: background .2s;
}
.ctc {
	padding: 0px 15px 0px 15px;
}
.cta:hover {
	background: #d27c77;
}
h1, h2, h3 {
	color: var(--text);
	font-weight: 600;
	margin-bottom: 10px;
}
h1 {
	font-size: 2rem;
	margin-top: 0;
}
.aheader {
	font-size: 1.6rem;
	color: var(--accent);
}
.aheader2 {
	font-size: 0.97rem;
	color: var(--accent);
}
h2 {
	font-size: 1.6rem;
	margin-top: 10px;
}
h3 {
	font-size: 1.2rem;
	margin-top: 28px;
}
p, li {
	margin-bottom: 20px;
}
.section {
	position: relative;
	margin: 0;
	padding: 10px 5px 10px 5px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px;
}
.section-left .image-placeholder {
	order: 1;
	flex: 1;
}
.section-left .card {
	order: 2;
	flex: 1;
}
.section-right .image-placeholder {
	order: 2;
}
.section-right .card {
	order: 1;
	flex: 1;
	flex: 1;
}
.wave {
	position: absolute;
	width: 100%;
	height: 80px;
	left: 0;
}
.wave-top {
	top: -1px;
	transform: rotate(180deg);
}
.wave-bottom {
	bottom: -1px;
}
.card {
	background: var(--surface);
	padding: 14px;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	z-index: 2;
	flex: 1;
}
ul {
	padding-left: 20px;
}
table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 16px;
	background: var(--surface);
	box-shadow: var(--shadow);
	border-radius: var(--radius);
	overflow: hidden;
	color: var(--text-white);
}
th, td {
	padding: 14px;
	text-align: left;
	border-bottom: 1px solid #f1f1f1;
}
th {
	background: var(--accent);
}
details {
	margin: 14px 0;
	padding: 14px;
	background: var(--surface);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	cursor: pointer;
}
summary {
	font-weight: 600;
	color: var(--accent-dark);
}
form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: var(--surface);
	padding: 24px;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	flex: 1;
}
input, textarea, button {
	padding: 12px 14px;
	border-radius: var(--radius);
	border: 1px solid #e0dcdc;
	font-size: 16px;
	font-family: inherit;
}
textarea {
	resize: vertical;
	min-height: 120px;
}
button {
	background: var(--accent-dark);
	color: var(--text-white);
	border: none;
	font-weight: 600;
	cursor: pointer;
	transition: background .2s;
}
button:hover {
	background: #d27c77;
}
.image-placeholder {
    padding-top: 10px; 
    width: 100%; 
    max-width: 400px; 
    height: 250px; 
    background: var(--bg); 
    border-radius: var(--radius); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: var(--muted); 
    font-style: italic; 
    margin-bottom: 24px;
    margin-top: 10px; 
    z-index:2; 
}
footer {
	padding: 40px 0;
	background: var(--accent);
	color: var(--text);
	text-align: center;
	margin-top: 50px;
	border-top: 1px solid #e7b9b3;
}
@media(max-width:800px) {
    .section {
	   flex-direction: column;
    }
    .image-placeholder {
	   max-width: 100%;
	   height: 200px;
    }
}