/*2. The CSS (style.css)

This file applies the layout logic and exact dimensions from your sketch. To see how it works, I’ve used subtle borders and light gray backgrounds for clarity.
*/
/* =========================================
  1. Basic Reset
  ========================================= */
* {
   box-sizing: border-box; /* Crucial for including borders in total size */
   margin: 0;
   padding: 0;
}

body {
   font-family: sans-serif;
   background-color: #f4f4f4; /* Subtle background for visibility */
   color: #333;
   line-height: 1.6;
}

/* =========================================
  2. Key Layout Rule: 20% Margins L/R
  ========================================= */
/* The sketch asks for "20% margin right and left".
  This means the CONTENT area (including the internal parts of
  the header/footer) should only occupy 60% of the screen width.
  We achieve this by creating a centered inner-container. */
.inner-container {
   width: 80%; /* Total width available (100% - 20% - 20%) */
   max-width: 1400px; /* Optional: adds a limit for extremely wide screens */
   margin-left: auto; /* Centers the container */
   margin-right: auto;
   /* Sketch lines suggest padding around the content */
   padding: 20px 0;
}

/* =========================================
  3. Header and Footer (Full Width)
  ========================================= */
.page-header, .page-footer {
   width: 100%; /* Stretches across the entire body */
   background-color: #fff; /* White background for the header area */
   border-bottom: 2px solid #ddd;
   border-top: 2px solid #ddd;
}

/*.page-header h1, */
.page-footer h3 {
   text-align: center;
   color: #555;
   /* Sketch implies the header content sits within the margin area */
}

/* =========================================
  4. The Main Layout Area (Flexbox)
  ========================================= */
.page-main {
   display: flex; /* Makes the columns sit side-by-side */
   gap: 30px; /* Space between the left column and the center column */
   background-color: #f4f4f4;
}

/* =========================================
  5. .LEFTCOL (150px Width)
  ========================================= */
.left-col {
   width: 130px; /* *EXACT* width as requested* */
   min-width: 130px; /* Prevents shrinking on smaller viewports */
   flex-shrink: 0;
   background-color: transparent;
   padding: 10px 0;
}

/* .THUMB elements (100x100px) */
.thumb-list {
   display: flex;
   flex-direction: column; /* Thumbs stack vertically */
   align-items: center; /* Centers thumbs within the 150px column */
   gap: 15px; /* Spacing between thumbs */
}

.thumb {
   width: 100px; /* *EXACT* size requested* */
   height: 100px;
   background-color: #ddd;
   border: 1px solid #ccc;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.8rem;
   color: #777;
   border-radius: 4px; /* Slight roundness for style */
}

/* =========================================
  6. .CENTERCOL (CSS Grid)
  ========================================= */
.center-col {
   flex-grow: 1; /* Takes up all remaining space */
   
   /* Using CSS Grid is perfect for your specific 400px panels */
   display: grid;
   /* Automatically creates as many 400px columns as will fit *
      within the .center-col's available width. */
   grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
   gap: 30px; /* Spacing between the 400px panels */
}

/* .PANEL elements (400x400px) */
.main-panel {
   width: 100%; /* Spans the available grid cell width (which is at least 400px) */
   height: 400px; /* *EXACT* size requested* */
   max-width:400px; /*CK added when pane showed up wider after adding images and CSS at bottom of this file */
   background-color: #fff;
   border: 2px solid #ddd;
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.2rem;
   color: #444;
}

/* =========================================
  7. Responsive Design (A bonus!)
  ========================================= */
/* The sketch layout will start breaking when the screen is too narrow *
  to hold the 20% margins, the 150px column, and the 400px panel. *
  This makes it look better on phones. */

@media (max-width: 1024px) {
   /* Reduce the margins on smaller desktops/tablets */
   .inner-container {
       width: 90%;
   }
}

@media (max-width: 650px) {
   /* Stack the left and center columns vertically on small phones */
   .page-main {
       flex-direction: column;
   }
   
   /* Let the columns take full width */
   .left-col {
       width: 100%;
       min-width: 100%;
   }
   
   /* Orient thumbs horizontally when stacked on top */
   .thumb-list {
       flex-direction: row;
       justify-content: center;
       flex-wrap: wrap;
   }

   /* Force the main panels to fit full width *
      (CSS will naturally reduce their size to fit the screen) */
   .center-col {
       grid-template-columns: 1fr;
   }
}

.thumb img, .main-panel img {
   width: 100%;
   height: 100%;
   object-fit: cover; /* Prevents stretching by auto-cropping the edges */
}
.main-panel img {
   object-fit: cover;
   object-position: top center; /* Good for portraits or tall subjects */
}

/* =========================================
  Panel Card Image Overlay Styles
  ========================================= */

/* The card container fills the 400x400px grid slot */
.panel-card {
   position: relative; /* Crucial: Acts as the anchor for the absolute positioned caption */
   width: 100%;
   height: 100%;
   overflow: hidden; /* Hides the caption when it slides below the frame */
   border-radius: 8px;
   box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* 1. Perfect Image Fit */
.panel-card img {
   width: 100%;
   height: 100%;
   object-fit: cover; /* Prevents warping, auto-crops the square */
   transition: transform 0.4s ease; /* Smooth zoom effect on hover */
}

/* 2. The Invisible Caption Container */
.panel-card .panel-caption {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   
   /* Dark semi-transparent background so text is highly legible */
   background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 100%);
   color: #ffffff;
   padding: 20px;
   
   /* Animation state: slide it down slightly and hide it */
   transform: translateY(100%);
   opacity: 0;
   transition: transform 0.35s ease, opacity 0.35s ease;
}

/* Typography styles inside the caption */
.panel-caption h4 {
   margin-bottom: 5px;
   font-size: 1.1rem;
   font-weight: 600;
   letter-spacing: 0.5px;
}

.panel-caption p {
   font-size: 0.9rem;
   opacity: 0.85;
   line-height: 1.4;
}

/* =========================================
  3. Hover Interactions
  ========================================= */

/* Slide the caption up and fade it in when hovering anywhere on the card */
.panel-card:hover .panel-caption {
   transform: translateY(0);
   opacity: 1;
}

/* Subtle cinematic zoom on the background image when hovered */
.panel-card:hover img {
   transform: scale(1.05);
}

/* old ck */

.page-header h1{/*display:inline;*/font-size:30px;font-weight:100;font:tahoma,inconsolata,verdana,sans;text-align:center;font-stretch:50%;font-variant:small-caps;
   color: #555;}
.page-header h2{font:tahoma,inconsolata,verdana,sans;text-align:center;font-size:22px;font-weight:400;}
a{text-decoration:none;color:navy;font-weight:200;}
.editor{transform:scaleY(1.5);z-index:-1;/*font-stretch:50%;*/position:relative;margin-top:4px;height:50px;border:#ccc solid 1px;background-color:#eee;font:tahoma,inconsolata,verdana,sans;text-align:center;line-height:95%;letter-spacing:1.2;text-decoration:none;color:black;align:center;font-size:110%;font-weight:200;}
.kopf{background:lightblue/*wheat*/;height:24px;text-align:center;}
.content{font-family:verdana,sans-serif;font-size:18px;}
br{clear:both}
.smcaps{font-variant:small-caps;}