/* ==========================================================================
   Layout fixes: Experience / Education / Publications rows
   Replaces the float + fixed-height layout (which let text wrap back under the
   logo and pushed long links off the page) with a simple two-column flex row.
   Loaded last; ID selectors are used so the older responsive rules can't override.
   ========================================================================== */
#exprience .exprience,
#education .exprience,
#publications .exprience {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
  margin: 0;
  padding: 20px 0;
  overflow: visible;
}

#exprience .exprience-image,
#education .exprience-image,
#publications .exprience-image {
  float: none;
  flex: 0 0 150px;
  width: 150px;
  height: auto;
  min-height: 0;
  margin: 4px 0 0 0;
  overflow: visible;
}

#exprience .exprience-image img,
#education .exprience-image img,
#publications .exprience-image img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* publication icon is a small glyph, not a wide logo: keep it modest and consistent */
#publications .exprience-image { flex-basis: 90px; width: 90px; }
#publications .exprience-image img { max-width: 70px; margin: 0; }

#exprience .exprience-info,
#education .exprience-info,
#publications .exprience-info {
  flex: 1 1 0;
  min-width: 0;                 /* lets long words / links wrap instead of overflowing */
  margin: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

#exprience .exprience-info h3,
#education .exprience-info h3,
#publications .exprience-info h3 {
  font-size: 22px;
  line-height: 1.3;
  margin: 0 0 6px;
}

#exprience .exprience-info h5,
#education .exprience-info h5,
#publications .exprience-info h5 {
  font-size: 15px;
  line-height: 1.4;
  margin: 0 0 12px;
}

#exprience .exprience-info p,
#education .exprience-info p,
#publications .exprience-info p,
#publications .exprience-info .sec { margin: 0 0 6px; }

#exprience hr, #education hr, #publications hr { margin: 0; }

/* Section headings: Orbitron is very wide, so shrink it where the title column is narrow */
@media (min-width: 768px) and (max-width: 1199px) {
  .home-two .section-title h1 { font-size: 30px; overflow-wrap: anywhere; }
}

/* Medium: smaller logo column */
@media (max-width: 991px) {
  #exprience .exprience-image, #education .exprience-image { flex-basis: 110px; width: 110px; }
}

/* Phones: stack logo above text so nothing is squeezed */
@media (max-width: 575px) {
  #exprience .exprience, #education .exprience, #publications .exprience { flex-direction: column; gap: 10px; }
  #exprience .exprience-image, #education .exprience-image { flex-basis: auto; width: 120px; }
  #publications .exprience-image { flex-basis: auto; width: 60px; }
  #exprience .exprience-info h3, #education .exprience-info h3, #publications .exprience-info h3 { font-size: 19px; }
}

/* Long URLs anywhere in the content must wrap instead of running off the page */
.section-content a, .section-content p, .section-content li { overflow-wrap: anywhere; }
#about a, #about p, #about li, #blog a, #contact a { overflow-wrap: anywhere; }

/* ---- Blog: cards in a row share the same height, so bottom edges line up ---- */
.blog-section .col-sm-6 { display: flex; }
.blog-section .entry-post { flex: 1 1 auto; display: flex; flex-direction: column; width: 100%; }
.blog-section .entry-post .post-content { flex: 1 1 auto; }

/* ---- Contact: "Leave me a Message" = icon column + one content column ---- */
.contact-section .title {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  align-items: start;
  padding-top: 30px;
}
.contact-section .title > .icons { grid-column: 1; grid-row: 1 / span 3; float: none; margin: 0; }
.contact-section .title > h3,
.contact-section .title > .sec,
.contact-section .title > .contact { grid-column: 2; }
.contact-section .title > h3 { margin: 5px 0 0; }
.contact-section .title > .contact { margin-top: 8px; padding-left: 0; }
@media (max-width: 575px) {
  .contact-section .title { grid-template-columns: 1fr; }
  .contact-section .title > .icons, .contact-section .title > h3,
  .contact-section .title > .sec, .contact-section .title > .contact { grid-column: 1; grid-row: auto; }
  .contact-section .title > .icons { margin-bottom: 8px; }
}