/* Global Styles */
body, main, div {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
	display: flex;
  	justify-content: center; 
	flex-direction: column;
	width:100%;
}
section, footer, header {padding-left:50px; padding-right:50px; width:100%; box-sizing:border-box;}
.doctor-list-background {padding:50px; width:100%; box-sizing:border-box; background-color: #ebecec; display:flex; justify-content:center; }

.content-column {
	display: flex;
	flex-direction:column;
	width:100%;
	max-width:900px;
}
.content-row {
	display: flex;
	flex-direction:row;
	width:100%;
	max-width:900px;
}
.flex-end {display:flex;justify-content: flex-end; }
.flex-center {display:flex;align-items: center;justify-content:center;align-items:center;margin-left:auto;margin-right:auto;}
.full-width {
	display: flex;
	width:100%;
}
h2 {
	font-size: clamp(9px, 4vw + 4px, 22px);
    margin-top: 0;
	color: #5D5C5C;
	align-items:flex-start;
}


/* Hero Section */
.hero {
    background: url('images/header-image-wide.jpg') no-repeat center center/cover;
	background-color:darkslategray;
   	height: 250px; 
   	position: relative;
   	color: white;
	width:100%;
	align-content:center;
	margin:auto;
	padding:50px 50px 30px 50px;
	margin-bottom:50px;
}
.hero-content {
  	flex: 1; 
	height:100%;
	width:100%;
	max-width:900px;
	margin:auto;
	display:flex;
	flex-direction:row;
	box-sizing: border-box;
}
.header-left {
	display:flex;
	flex-direction: column;
	flex-basis:80%;
	justify-content: flex-end;
	height:100%
}
.title {
	max-width:300px;
	align-self:flex-end;
	object-fit:cover;
	margin-bottom:-10px;
}

/* Hide h1 for accessibility */
.hidden {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Right Side: Logo and Date */
.header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between; 
  	padding: 0 0 0 40px; 
	flex-basis:20%;
	height:100%
}

.logo {
    max-width: 150px; 
	object-fit:cover;
}

.date {
	font-size: clamp(9px, 4vw + 4px, 16px);
    margin-top: 5px;
}

/* Articles */
.articles {
   gap: 30px;
	margin-bottom:50px;
}

article {
    display: flex;
    align-items: flex-start;
    background: white;
    overflow: hidden;
    padding: 20px 0;		
}
article img {
    width: 100%;
    max-width: 300px; /* Max width */
    height: auto;
    object-fit: cover;
    flex-shrink: 0;
	margin-right:40px;
}

.article-text {
    flex: 1;
	align-items:flex-start;

}

article h2 {	
	font-size: clamp(9px, 4vw + 4px, 19px);
    margin-top: 0;
	color: #5D5C5C;
	justify-content:flex-start;

}

article p {
    margin: 10px 0;
	font-size: clamp(9px, 4vw + 4px, 17px);
	line-height: 1.3em;
	color: #393939;
}

article a {
    display: inline-block;
    color: #666666;
    text-decoration: none;
    margin-top: 10px;
    font-weight: bold;
	font-size: clamp(9px, 4vw + 4px, 14px);
}
.ocsv {max-width:64px; width:64px; margin-top:10px;}

/* Physicians Section */
.physicians {
    text-align: left;
	padding-top:80px;
	padding-bottom:180px;
}

.doctor-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
	gap:5%;
	width:100%;
}
.doctor h3 {
	font-size: clamp(9px, 4vw + 4px, 19px);
	color: #5D5C5C;
	margin-bottom:5px;
	align-items:flex-start;

}
.doctor-list p {
	margin-bottom:5px;
	margin-top:0;
	font-size: clamp(9px, 4vw + 4px, 17px);
	line-height: 1em;
	color: #393939;
}

.doctor {
    width: calc((100% - 10%) / 3);
	row-gap:0;
			align-items:flex-start;

}

.doctor img {
    width: 100%;
}

/*override blue links*/
a {
    color: #393939;
}

a:hover {
    color: #000; 
    text-decoration: underline; 
}

a:active {
    color: #393939;
}
a:visited {
    color: #393939; 
}

/* Footer */
footer {
    background: #ebecec;
	align-content: center;
	color: #5D5C5C;
	padding-bottom:30px;
	padding-top:50px;
	width:100%;
	min-width:100%;
	
}
footer div {
	justify-content: space-between;
	width:100%;
}
.awards {
	display:flex;
	align-self:center;
	justify-content:flex-start;
	column-gap:30px;
	flex-direction:row;}
.awards img {
    max-width: 108px;
	object-fit:contain;
    margin: 0;
	align-self:start;
	justify-self:start;
}
.awards img .icon-3 {max-width:89px;object-fit:contain; }
.footer-info {font-size: clamp(9px, 4vw + 4px, 14px);
}
.footer-info a {
    color: #5D5C5C;
    text-decoration: none;	
}
.footer-info {align-items:flex-end;}
.footer-info p {padding-left:34px;}
 .footer-info a.providence-url {
    color: #0054a6;
    text-decoration: none;	
}

/*article pages*/

.article-image img, .article-image {width:100%; max-width:100%; height:auto; max-height:500px; object-position: center center; object-fit:cover;}
.article-title {padding-top:50px;}
article h1 {	
	font-size: clamp(18px, 4vw + 4px, 28px);
	color: #5D5C5C;
	align-items:flex-start;
}
.button-div {box-sizing: border-box;}
button {
			border-style: none;
			box-shadow: none;
			align-self:flex-start;
			margin:0;
			background-color:  #0054a6;
            color: white;
            font-size: 16px;
            padding: 10px 20px;
            border: none;
            border-radius: 0;
            cursor: pointer;
            transition: background-color 0.3s;
			text-decoration: none;
}
button a {text-decoration: none;
}
button:hover, button > a:hover {
            background-color: #002F5D;
			text-decoration: none;
			color:white;
        }
button:visited, button > a:visited {
			text-decoration: none;
			color: white;
}
button > a {color:white;}
.button-div {margin-top:100px;margin-bottom:50px;}
.body-urls {font-size: clamp(9px, 4vw + 4px, 17px);
}

/* Responsive Design */
@media (max-width: 768px) {

.logo {
    max-width: 110px; 
	object-fit:cover;
}

/* Right Side: Logo and Date */
.header-right {
  	padding: 0 0 0 5%; 
	flex-basis:15%;
}
    .title {
        width: 100%; 
		margin-bottom:-3px;
		box-sizing:border-box;
    }
    .title img {width:100%;}

    /* Stack article image on top of h2 and p */
    article {
        flex-direction: column;
        align-items: center;
    }

    article img {
        width: 100%; /* Full width for images */
        max-width: none; 
        height: auto; 
		margin-bottom:20px;
    }
    

    /* Make article text (h2 and p) centered below image */
    .article-text {
        padding-left: 0;
        padding-right: 0;
    }

    /* Stack physicians 2 per row instead of 1 */
    .doctor {
        width: calc(50% - 10px); /* Two items per row with gap */
		align-content: flex-start;
		align-items:flex-start;

    }
    .doctor p {display: inline-block;
        color: #666666;
        text-decoration: none;
    	font-size: 12px;}
	.doctor a {display: inline-block;
        color: #666666;
        text-decoration: none;
    	font-size: 10px;}

    .doctor-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 50px 10px; 
        justify-content: flex-start;
    }
    .doctor img {
        width: 100%;
    }
    .doctor h3 {
	font-size:13px;

    }


    article img {
        max-width: 100%;
        height: auto;
		aspect-ratio:2/1.5;
		max-height:300px;
    }

    article {
        width: 100%;
    }
/* Footer Layout */
    footer {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
		flex-wrap:wrap;
    }
	footer .content-row {flex-direction:column;}
	footer div {justify-content:flex-start;align-content: flex-start;}
	.awards {margin-bottom:50px;}
	footer .footer-info {align-items:flex-start;}
	.awards {
	column-gap:10px;
	flex-direction:row;
	    flex-wrap:wrap;
	}
	.footer-info p {padding-left:0;}

.awards img {
    max-width: 85px;
}
.awards img.icon-3 {max-width:70px;object-fit:contain; height:auto;}
}
}