/* prehled */

#programovani img.logo {max-height: 2em; margin-bottom: 0.5em;}
#programovani img.logo2 {max-height: 1em; margin-left: 0.5em;}
.gridProgramovani div p {margin-bottom: 2em;}




    .gridBlockly {grid-area: blockly; }
    .gridScratch {grid-area: scratch; }
    .gridExcel {grid-area: excel; }
    .gridLabview {grid-area: labview; }
    .gridJavascript {grid-area: javascript; }
    .gridPython {grid-area: python; }
    .gridArduino {grid-area: arduino; }
    .gridVyroba {grid-area: vyroba; }


.gridProgramovani {display: grid; text-align: center;}

@media screen and (max-width: 629px) {
.gridProgramovani {
    
    grid-template-areas:
    'scratch blockly'
    'labview javascript'
    'python arduino'
    'excel vyroba';
   }
  }


@media screen and (min-width: 630px) {
.gridProgramovani {
    
    grid-template-areas:
    'scratch blockly labview javascript'
    'python arduino excel vyroba';
   }
  }
  
  
  
/* ¦¦ Webové aplikace (#webapp2) ¦¦ */

#webapp2 {
  //max-width: 860px;
  //margin: 0 auto;
  //padding: 1.5rem 0 3rem;
  //font-family: inherit;
}

#webapp2 h2 {
  //font-size: 200%;
  //margin-bottom: 0.4em;
}

#webapp2 .wa-intro {
  font-size: 14px;
  color: #5f5e5a;
  margin-bottom: 1.5rem;
  line-height: 1.5em;
}

#webapp2 .wa-intro img { height:1.2em; vertical-align:middle; margin-right:0.3em;}

/* Hero blok – základní aplikace */
#webapp2 .wa-hero {
  background: #fff;
  border: 0.5px solid #d3d1c7;
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

#webapp2 .wa-hero-icon {
  width: 70px;
  height: 70px;
  border-radius: 8px;
  background: #e6f1fb;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#webapp2 .wa-hero-title {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a18;
  margin: 0 0 4px;
}

#webapp2 .wa-hero-desc {
  font-size: 14px;
  color: #5f5e5a;
  line-height: 1.55;
  margin: 0 0 10px;
}

#qwebapp2 .wa-hero-links {
  display: flex;
  flex-direction: column;
  gap: 5px;
}


#webapp2 .wa-hero-links span {
  font-size: 14px;
  color: #5f5e5a;
  line-height: 2.5em;
}

#webapp2 .wa-hero-links a:hover { text-decoration: underline; }

#webapp2 .wa-hero-links span img { height:2em; vertical-align:middle; margin-top:0.3em; margin-bottom: 0.3em; margin-right: 0.3em;}



#webapp2 .wa-hero-link-row a:hover { text-decoration: underline; }

/* Nadpis sekce */
#webapp2 .wa-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #888780;
  margin: 2rem 0 0.75rem;
}

/* Grid karet */
#webapp2 .wa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

/* Karta */
#webapp2 .wa-card {
  cursor: pointer;
  background: #fff;
  border: 0.5px solid #d3d1c7;
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
  
}

#webapp2 .wa-card:hover {
  border-color: #b4b2a9;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

#webapp2 .wa-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

#webapp2 .wa-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#webapp2 .wa-card-title {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a18;
  margin: 0;
}

#webapp2 .wa-card-desc {
  font-size: 14px;
  color: #5f5e5a;
  line-height: 1.55;
  flex: 1;
  margin: 0;
}

#webapp2 .wa-card-links {
  margin-top: 0;
  font-size: 14px;
  display: flex;
  justify-content: space-between;  
  padding-right: 1.25rem;
}

#webapp2 .wa-card-links a.primary {
padding-bottom: 0;
}



/* Barvy ikon */
#webapp2 .icon-blue   { background: #e6f1fb; }
#webapp2 .icon-green  { background: #e1f5ee; }
#webapp2 .icon-amber  { background: #faeeda; }
#webapp2 .icon-purple { background: #eeedfe; }

@media screen and (max-width: 500px) {
  #webapp2 .wa-hero { flex-direction: column; }
}