/* =========================================================
   websites.css
   Websites page layout
   Two-column rows: image left, text right
   Button styling lives in ug.css (uses .portfolio-link)
   Dreamweaver-safe
   ========================================================= */

/* --- Intro block --- */
.websites-intro{
  margin-top: 4px;
  margin-bottom: 10px;
}

.websites-intro p{
  margin: 0;
}

/* --- List wrapper --- */
.websites-list{
  margin-top: 10px;
}

/* --- Each row --- */
.site-row{
  display: flex;
  align-items: flex-start;
  gap: 24px;              /* was 12px */
  padding-top: 14px;     /* was 4px */
  padding-bottom: 18px;  /* was 4px */
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.site-row:last-child{
  border-bottom: none;
}


/* --- Image column --- */
.site-media{
  width: 260px;
  flex: 0 0 260px;
}

.site-thumb-link{
  display: block;
  text-decoration: none;
}

.site-img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.12);
}

/* --- Text column --- */
.site-body{
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 6px;
}

.site-title{
  margin-top: 0;
  margin-bottom: 6px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-url{
  margin-bottom: 10px;
  font-size: 0.95em;
  opacity: 0.8;
}

/* Copy */
.site-copy{
  margin: 0;
  max-width: 62ch;
}

/* Visit pill placement (styling from ug.css via .portfolio-link) */
.site-link{
  float: right;
  margin-top: 10px;
  margin-left: 20px;
}

/* --- Back button wrapper (centred) --- */
.websites-back{
  text-align: center;
  margin: 2.5rem 0 0;
}

/* =========================================================
   Mobile: stack image above text
   ========================================================= */
@media (max-width: 780px){

  .site-row{
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  .site-media{
    width: 100%;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }

  .site-body{
    text-align: center;
  }

  .site-link{
    float: none;
    display: inline-block;
    margin: 14px auto 0;
  }

  .site-copy{
    max-width: none;
  }
}