:root {
  --breakpoint-narrow: 760px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

.idx-grid {
  display: grid;
  gap: 15px;
  padding: 66px 5px 15px 5px;
  min-height: 100vh;
}

/* ===== WIDE SCREEN LAYOUT (≥ 768px) ===== */
@media (min-width: 760px) {
  .idx-grid {
    grid-template-columns: 1.8fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "photo slide"
      "nav   nav"
      "menu  menu";
  }

  .idx-photo {
    grid-area: photo;
  }

  .idx-slide {
    grid-area: slide;
    align-self: start;
    padding-top:12px;
  }

  .idx-nav {
    grid-area: nav;
  }

  #menu {
    grid-area: menu;
  }
}

/* ===== NARROW SCREEN LAYOUT (< 768px) ===== */
@media (max-width: 760px) {
  .idx-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "photo"
      "slide"
      "nav"
      "menu";
  }
}

/* ----- big photo (left on wide screens, top on narrow) ----- */
.idx-photo {
  display: flex;
  flex-direction: column;
  min-width: 0; /* Grid items need min-width: 0 explicitly to shrink below content size.*/
  max-width:100vw;
}

#bigPhoto {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content:center;
  text-align: center;
}

#bigPhoto img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

#descr {
  min-height: 2rem;
  padding: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-align:center;
}

/* ----- thumbnails (right on wide screens, stacked on narrow) ----- */
.idx-slide {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.idx-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 2px;
  width: 100%;
}

.idx-thumbs .slideSm {
  aspect-ratio: 1 / 1;
  border: 1px solid #cbcbcb;
  overflow: hidden;
  display: block;
  text-decoration: none;
  background-color: #fff;
}

.idx-thumbs .slideSm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.idx-thumbs .slideSm:hover {
  border-color: #999;
}

/* ----- navigation bar (always full width, bottom) ----- */
.idx-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  min-height: 20px;
  flex-wrap: wrap;
  max-width:100vw;
}

.idx-nav img {
  display: block;
  height: auto;
}

/* ----- menu bar ----- */
#menu {
  width: 100%;
  border-top: 1px solid #e0e0e0;
  display:flex;
  align-items:center;
  justify-content:center;
  max-width:100vw;
  flex-wrap:wrap;
  padding-top:1rem;
  margin-bottom:1rem;
}

#menu a {
  text-decoration: none;
	display:block;
	padding:7px 13px;
	color:#7f7f7f;
}

#menu a:hover {
  text-decoration: underline;
}

/* from the old theme.css */
body {
	color:#7f7f7f;
	text-align:left;
}
a {
	color:#7f7f7f;
}
a.fancy {
	display:block;
	height:auto;
	color:#7f7f7f;
	padding-left:30px;
	background:#ffffff url('graphics/arrowR.png') no-repeat scroll center left;
}
a.fancy:hover {
	background-position:2px 3px;
}
input,textarea {
	border:1px solid #7f7f7f;
	max-width:100%;
}
.cursiv {
	font-style:italic;
	line-height:145%;
}

#container {
	margin:0 auto;
	width:100%;
	max-width:990px;
	text-align:left;
	background:#ffffff url('graphics/bgr.jpg') no-repeat scroll top left;
	min-height:650px;
	border:1px solid #dcdcdc;
	margin-bottom:20px;
	overflow:hidden;
}
.leftColWide {
	width:395px;
	max-width:100%;
	padding:135px 0px 15px 15px;
	float:left;
	overflow:hidden;
}
.rightColNarrow {
	width:575px;
	max-width:100%;
	padding:15px 5px 5px 5px;
	float:left;
	overflow:hidden;
}