/* Perustyylit */
.domain-haku-wrap{
  text-align:center;
  margin:20px 0;
}
.domain-input, .domain-select{
  padding:10px;
  border:1px solid #ccc;
  border-radius:6px;
  width:300px;
  max-width:90%;
}
.domain-select{ width:auto; margin-left:10px; }
.domain-btn{
  margin-left:10px;
  padding:10px 20px;
  background:#d6111e;
  color:#fff;
  border:none;
  border-radius:6px;
  cursor:pointer;
}
.domain-btn:hover{ opacity:.9; }

.domain-count{
  text-align:center;
  font-weight:700;
  margin-bottom:15px;
}

.domain-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:20px;
  box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.3);

  max-width:1100px;
  margin:0 auto;
}
.domain-card-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    transition: transform 0.3s ease;
}

.domain-card-image:hover {
    transform: scale(1.03);
}

.domain-modal-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 15px;
    object-fit: cover;
}

/* Kortin perusilme */
.domain-card {
    background: #ffffff; /* valkoinen tausta */
    border-radius: 12px; /* pyöristetyt kulmat */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* pehmeä varjo */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

/* Hover-animaatio kortille */
.domain-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    transform: translateY(-3px);
}

/* Kortin kansikuva */
.domain-card-image {
    width: 100%;
    height: 180px;
box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.3);

    object-fit: cover;
    display: block;
}

/* Kortin sisältö */
.domain-card-content {
    padding: 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Otsikko */
.domain-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #000;
}

/* Lyhyt kuvaus */
.domain-card-excerpt {
    font-size: 0.95rem;
    color: #000;
box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.3);

    margin-bottom: 15px;
    line-height: 1.4;
}

/* Lue lisää -painike */
.domain-card-button {
    background-color: #d6111e;
    color: #fff;
    text-align: center;
    padding: 10px 14px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.domain-card-button:hover {
    background-color: #b50e19;
}

/* Responsiivisuus */
@media (max-width: 768px) {
    .domain-card-image {
        height: 150px;
    }
}

/* Pagination */
.domain-pagination{
  text-align:center;
  margin:20px;
}
.domain-pagination .page-btn{
  margin:0 3px;
  padding:6px 12px;
  border:none;
  border-radius:5px;
  background:#ccc;
  color:#333;
  cursor:pointer;
}
.domain-pagination .page-btn.active{
  background:#d6111e;
  color:#fff;
}

/* Modal */
.domain-modal{
  display:none;
  position:fixed;
  top:0;left:0;
		color: #000;

  width:100vw;height:100vh;
  background:rgba(0,0,0,.7);
  justify-content:center;
  align-items:center;
  z-index:9999;
}
.domain-modal.open{ display:flex; }
.domain-modal-content{
  background:#fff;
  border-radius:12px;
  max-width:650px;
  width:100%;
	color: #000;
  max-height:90vh;
  overflow-y:auto;
  position:relative;
  padding:20px;
  box-shadow:0 6px 20px rgba(214,17,30,0.4);
}
.close-modal{
  position:absolute;
  top:10px;
  right:20px;
  font-size:28px;
  color:#333;
  cursor:pointer;
  background:transparent;
  border:none;
}
.domain-modal-title{ margin-top:35px; }
.domain-modal-image{
  width:100%;
  max-height:300px;
  object-fit:cover;
  border-radius:8px;
  margin-bottom:20px;
}