/*
  style.css
  Jon's Planes - single responsive stylesheet.
  Mobile-first: base rules are the small-screen styles, then media queries
  widen things up for tablet and desktop. Replaces the old
  myplanes.css / tablet-layout.css / mobile-layout.css trio.
*/

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 12px;
  font: 1em/1.4 "Droid Sans", sans-serif;
}

h1, h2, h3 {
  font-family: "Droid Serif", serif;
  color: #0066CC;
  margin: 0.4em 0;
}

p, legend, td, label, span {
  font: 1em "Droid Sans", sans-serif;
}

a.planeLink, .planeLink a {
  color: #0066CC;
  text-decoration: none;
}
a.planeLink:hover, .planeLink a:hover { text-decoration: underline; }

h2 {
  font-size: 1.4em;
  color: #444;
  border-bottom: 2px solid #eee;
  padding-bottom: 4px;
  margin-top: 1.5em;
}

/* --- Gallery grid --- */
.categorySection {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.imageBox {
  width: 100%;
  max-width: 20em;
  text-align: center;
  padding: 6px;
  background-image: url("/css/blanks/emptybox.jpg");
  background-size: cover;
  border-radius: 4px;
}

.imageBox img.planeImage {
  width: 100%;
  height: auto;
  max-height: 14em;
  object-fit: cover;
  border-radius: 3px;
}

.tileLabel {
  margin-top: 4px;
  font-size: 0.9em;
  color: #333;
}

.footer {
  clear: both;
  color: #999;
  text-align: center;
  margin-top: 2em;
  padding: 1em 0;
}

.success {
  background-color: lightgreen;
  padding: 5px;
  font-weight: bold;
  font-size: 1.1em;
}

#searchLink { float: right; }
.searchIcon { width: 40px; float: right; }

/* --- Tablet and up --- */
@media (min-width: 600px) {
  body { padding: 20px; }
  h1 { font-size: 2.2em; }
  .imageBox { width: calc(33.333% - 10px); }
}

/* --- Desktop --- */
@media (min-width: 1000px) {
  h1 { font-size: 2.6em; }
  .imageBox { width: calc(20% - 10px); }
  .imageBox img.planeImage { max-height: 11em; }
}