.councillors-wrap {
	width:100%; 
	display:inline-block;
}

.councillors-list {
	display:block;
	margin:0 5px 20px 0;
	float:left;
	padding:5px 5px 20px 5px;
	width:100%;
	border-bottom:1px solid #CCC;
}

.councillor-thumb {
	width:22%;
	float: left;
	margin:0;
}

.councillors-list .councillor-data {
	width:78%;
	float: left;
	padding-left:3%;
    padding-top: 4px;
}

.councillor-thumb-clickable {
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.councillor-thumb-clickable:hover {
    opacity: 0.8;
    transform: scale(1.02);
}

.councillor-thumb-clickable img {
    border-radius: 4px;
    transition: box-shadow 0.2s ease;
}

.councillor-thumb-clickable:hover img {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.councillors-list h3{
	margin:2px 0px 0px 0px;
}

.councillors-list .councillor-desc {
	margin:0px 0px 10px 0px;
	font-weight: 500;
}

.councillor-info p {
}

img.document-icon {
    margin-right: 5px;
}

@media only screen and (max-width:640px){
	.councillors-list .councillor-data {
		width: 100%;
		padding: 0 4%;
		float: none;
	}
	.councillor-thumb{
		width:100%;
		float: none;
	}
	.councillor-thumb img {
	    display: block;
	    margin: 0 auto 24px;
	}
}

/* Shared item styles */
.councillors-wrap.grid .councillor-thumb {
    width: 100%;
    float: none;
    margin: 0;
}
.councillors-wrap.grid .councillor-thumb img {
    width: 100%;
}
.councillors-wrap.grid .councillor-data {
    width: 100%;
    float: none;
    padding: 5px 15px 20px;
}
.councillors-wrap.grid .councillors-list {
    padding: 0;
    margin-right: 0;
    margin-bottom: 35px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
                rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}

/* ===== 2 columns: class="grid  2cg" ===== */
.councillors-wrap.grid.\32 cg {
    display: grid;
    grid-template-columns: 48% 48%;
    grid-column-gap: 4%;
}
@media (max-width: 567px) {
    .councillors-wrap.grid.\32 cg {
        grid-template-columns: 100%;
        grid-column-gap: 0;
    }
}

/* ===== 3 columns: class="grid  3cg" ===== */
.councillors-wrap.grid.\33 cg {
    display: grid;
    grid-template-columns: 30% 30% 30%; /* 3x30% + 2x5% gap = 100% */
    grid-column-gap: 5%;
}
@media (max-width: 992px) {
    .councillors-wrap.grid.\33 cg {
        grid-template-columns: 48% 48%;
        grid-column-gap: 4%;
    }
}
@media (max-width: 567px) {
    .councillors-wrap.grid.\33 cg {
        grid-template-columns: 100%;
        grid-column-gap: 0;
    }
}

/* ===== 4 columns: class="grid  4cg" ===== */
.councillors-wrap.grid.\34 cg {
    display: grid;
    /* 4 cols with 3 gaps of 5% => (100 - 15) / 4 = 21.25% each */
    grid-template-columns: 21.25% 21.25% 21.25% 21.25%;
    grid-column-gap: 5%;
}
@media (max-width: 992px) {
    .councillors-wrap.grid.\34 cg {
        grid-template-columns: 48% 48%;
        grid-column-gap: 4%;
    }
}
@media (max-width: 567px) {
    .councillors-wrap.grid.\34 cg {
        grid-template-columns: 100%;
        grid-column-gap: 0;
    }
}

/* 1) Allow grid items to shrink within their tracks */
.councillors-wrap.grid .councillors-list { 
  min-width: 0;          /* critical for CSS Grid */
  overflow: hidden;      /* optional: prevents visual bleed */
}

/* 2) Wrap long strings (emails/urls/unbroken words) */
.councillors-wrap.grid .councillor-data,
.councillors-wrap.grid .councillor-data p,
.councillors-wrap.grid .councillor-data a {
  overflow-wrap: anywhere;  /* modern, best */
  word-break: break-word;   /* legacy fallback */
}

/* If you want email links to wrap nicely but not brutally break every char: */
.councillors-wrap.grid .councillor-data a[href^="mailto:"] {
  word-break: normal;        /* prefer natural wrap first */
  overflow-wrap: anywhere;   /* still allow break if needed */
}