/**
 * iPad Homepage Styles
 * Fixes display issues for iPad screens (1024px width)
 * styles/ipad-homepage.css
 */

/* Target iPad screens - both portrait and landscape */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
	
	/* Highlight Section - Fix overflow on iPad */
	#highlight-section {
		height: 500px !important;
		overflow: hidden;
	}
	
	.highlight {
		width: 100% !important;
		max-width: 1024px;
		height: 500px !important;
	}
	
	.highlight .stretch-width {
		width: 100% !important;
		max-width: 1024px;
	}
	
	.highlight .stretch-height {
		height: 500px !important;
	}
	
	.highlight-dark {
		height: 500px !important;
	}
	
	.highlight-message {
		font-size: 32px;
	}
	
	.highlight-message div {
		width: 80%;
	}
	
	/* Home Stats Section - Better column sizing for iPad */
	.home-stats {
		margin: 40px auto;
		padding: 0 20px;
		width: 100%;
		max-width: 1024px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	/* Center Explore/Learn More button below home-stats grid - override ids_responsive_style position:absolute */
	.home-stats > .button-large,
	.home-stats > .home-button-mobile {
		position: static !important;
		left: auto !important;
		width: auto !important;
		display: block !important;
		margin: 20px auto !important;
		min-width: auto !important;
		max-width: 100%;
		text-align: center !important;
	}
	
	.home-stats .content {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: stretch;
		gap: 16px 20px;
		width: 100%;
	}
	
	.home-stats-col {
		width: calc((100% - 40px) / 3) !important; /* 3 columns with gap */
		min-width: 0;
		flex: 0 0 calc((100% - 40px) / 3);
		margin: 0 !important;
		padding: 12px 8px;
		box-sizing: border-box;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
	}
	
	.home-stats-col img {
		width: 50% !important;
		max-width: 80px;
		height: auto;
	}
	
	.home-stats-col h3 {
		font-size: 13px;
		margin: 8px 0 4px;
		line-height: 1.3;
	}
	
	.home-stats-col h2 {
		font-size: 22px;
		margin: 0;
	}
	
	/* Favs Section (Volunteering Projects) */
	#favs-section {
		padding: 30px 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	/* Center volunteer button below home-project-list - override ids_responsive_style position:absolute */
	#favs-section .button-large.center,
	#favs-section .home-button-mobile,
	#favs-section > .button-large {
		position: static !important;
		left: auto !important;
		width: auto !important;
		display: block !important;
		margin: 20px auto 20px auto !important;
		text-align: center !important;
		min-width: auto !important;
		max-width: 100%;
	}
	
	.favs-area {
		width: 100%;
		max-width: 1024px;
		margin: 0 auto;
	}
	
	.home-project-list {
		width: 95% !important;
		max-width: 1024px;
	}
	
	/* Project Slide Cards - Consistent Sizing */
	.home-project-slide,
	.home-project-slide-2,
	.home-news-slide,
	.report-cell-slide {
		width: 300px !important;
		height: 370px !important;
		margin-right: 20px !important;
		margin-left: 0 !important;
	}
	
	.home-project-cover,
	.home-news-cover {
		height: 300px !important;
	}
	
	.home-project-cover img,
	.home-news-cover img {
		width: 300px !important;
		height: auto;
		object-fit: cover;
	}
	
	.home-project-progress {
		width: 250px !important;
	}
	
	/* Stories Section */
	#stories-section {
		padding: 15px 20px;
	}
	
	.home-story-slide {
		width: 300px !important;
		height: 370px !important;
		margin-right: 20px !important;
		margin-left: 0 !important;
	}
	
	.home-story-slide.wide,
	.home-story-slide.wide-1 {
		width: 300px !important;
	}
	
	.home-story-slide.margin {
		margin-left: 0 !important;
	}
	
	.home-story-cover {
		height: 300px !important;
	}
	
	.home-story-cover img {
		width: 300px !important;
		height: auto;
		object-fit: cover;
		margin: 0 !important;
	}
	
	.home-story-list {
		width: 95% !important;
		max-width: 1024px;
	}
	
	/* Symbolic Project Container */
	.symbolic-project-container {
		padding: 40px 20px 0 20px !important;
	}
	
	.symbolic-project-container .flex-layout.flex-dir-h {
		flex-wrap: wrap;
	}
	
	.symbolic-project-container .flex-layout.flex-dir-v[style*="flex-basis: 29%"] {
		flex-basis: 100% !important;
		margin-bottom: 30px;
	}
	
	.symbolic-project-container .flex-layout.flex-dir-v[style*="flex-basis: 67%"] {
		flex-basis: 100% !important;
	}
	
	.symbolic-project-container .flex-layout.flex-dir-v[style*="flex-basis:33%"] {
		flex-basis: 30% !important;
		margin: 10px 5px;
	}
	
	/* Buttons */
	.button-large {
		font-size: 16px;
		padding: 12px 24px;
		min-width: 280px;
	}
	
	.home-button-mobile {
		width: auto !important;
		min-width: auto !important;
		max-width: fit-content !important;
		margin: 20px auto !important;
		text-align: center !important;
	}
	
	/* Footer adjustments for iPad */
	.footer-content {
		padding: 0 20px;
	}
	
	.footer-menu {
		flex-wrap: wrap;
	}
	
	.footer-list {
		width: 48% !important;
		margin-bottom: 20px;
	}
	
	.conatiner-logos {
		flex-wrap: wrap;
		justify-content: center;
	}
	
	.partner-logos {
		width: 30% !important;
		margin: 10px;
	}
	
	/* Header adjustments */
	.header-container {
		padding: 0 20px;
        background: #fff;
	}
	
	.header-menu a {
		font-size: 14px;
		padding: 0 8px;
	}
	
	/* Content container adjustments */
	.content {
		max-width: 1024px;
		margin: 0 auto;
		padding: 0 20px;
	}
	
	/* Title adjustments */
	.title-grey {
		font-size: 28px;
		padding: 0 20px;
	}
	
	/* Separator line */
	.separator-line1 {
		margin: 0 20px;
	}
}

/* Specific adjustments for iPad landscape (1024px width) */
@media only screen and (min-width: 1024px) and (max-width: 1024px) {
	
	/* Ensure content doesn't overflow */
	.main {
		max-width: 1024px;
		margin: 0 auto;
	}
	
	/* Highlight section for exact 1024px */
	.highlight {
		width: 100% !important;
		max-width: 1024px;
	}
	
	.highlight .stretch-width {
		width: 100% !important;
		max-width: 1024px;
	}
	
	/* Home stats - 3 columns per row on landscape */
	.home-stats-col {
		width: 30% !important;
		flex: 0 0 30%;
	}
	
	/* Better spacing for project cards */
	.home-project-list {
		width: 98% !important;
	}
}

/* iPad portrait specific adjustments (768px - 1024px) */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
	
	/* Slightly different layout for portrait */
	.home-stats-col {
		width: 48% !important;
		margin: 10px 1%;
	}
	
	/* Symbolic project - stack vertically in portrait */
	.symbolic-project-container .flex-layout.flex-dir-h {
		flex-direction: column !important;
	}
	
	.symbolic-project-container .flex-layout.flex-dir-v[style*="flex-basis:33%"] {
		flex-basis: 48% !important;
		margin: 10px 1%;
	}
}

/* Fix for exactly 1024px screens - Ensure 3 slides fit without cropping */
@media only screen and (min-width: 1024px) and (max-width: 1024px) {
	
	/* Favs Section Container - minimal side padding so slider has room */
	#favs-section {
		overflow: hidden;
		width: 100%;
		padding: 30px 8px;
		box-sizing: border-box;
	}
	
	.favs-area {
		position: relative;
		overflow: hidden;
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
		padding: 0 8px;
		box-sizing: border-box;
	}
	
	/* Project List Container - content area 976px so 3 slides (970px) fit with 6px margin on right */
	.home-project-list,
	.home-news-list,
	.report-list-slider {
		width: 100% !important;
		max-width: 100% !important;
		height: 370px;
		position: relative;
		margin: 0 auto;
		overflow: hidden !important;
		display: block;
		box-sizing: border-box;
		padding: 0 8px;
	}
	
	/* Ensure parent containers also hide overflow */
	#favs-section .content,
	.favs-area .content {
		overflow: hidden;
		width: 100%;
	}
	
	/* Project Slides - Slightly smaller to fit 3 on 1024px */
	.home-project-slide,
	.home-project-slide-2,
	.home-news-slide,
	.report-cell-slide {
		width: 310px !important;
		height: 370px !important;
		margin-right: 20px !important;
		margin-left: 0 !important;
		float: left;
		position: relative;
	}
	
	/* Project Cover Images */
	.home-project-cover,
	.home-news-cover {
		height: 310px !important;
		overflow: hidden;
	}
	
	.home-project-cover img,
	.home-news-cover img {
		width: 310px !important;
		height: auto;
		object-fit: cover;
	}
	
	/* Progress Bar */
	.home-project-progress {
		width: 270px !important;
	}
	
	/* Navigation Arrows - Adjust for narrower container */
	.home-project-prev {
		left: 0;
		margin-left: -25px;
		z-index: 10;
	}
	
	.home-project-next {
		right: 0;
		margin-right: -25px;
		z-index: 10;
	}
}

/* Fix for screens larger than 1024px - Prevent 4th slide from showing */
@media only screen and (min-width: 1025px) {
	
	/* Favs Section Container */
	#favs-section {
		overflow: hidden;
		width: 100%;
		padding: 30px 20px 30px 0;
		box-sizing: border-box;
	}
	
	.favs-area {
		position: relative;
		overflow: hidden;
		width: 100%;
		max-width: 1170px;
		margin: 0 auto;
		padding: 0;
		box-sizing: border-box;
	}
	
	/* Project List Container - Slightly narrower so 3 slides fit with clear margin on right */
	.home-project-list,
	.home-news-list,
	.report-list-slider {
		width: 92% !important;
		max-width: 1050px !important;
		height: 370px;
		position: relative;
		margin: 0 auto;
		overflow: hidden !important;
		display: block;
		box-sizing: border-box;
		padding: 0 15px;
	}
	
	/* Ensure parent containers also hide overflow */
	#favs-section .content,
	.favs-area .content {
		overflow: hidden;
		width: 100%;
	}
	
	/* Project Slides - Ensure consistent sizing */
	.home-project-slide,
	.home-project-slide-2,
	.home-news-slide,
	.report-cell-slide {
		width: 326px !important;
		height: 370px !important;
		margin-right: 30px !important;
		margin-left: 0 !important;
		float: left;
		position: relative;
	}
	
	/* Project Cover Images */
	.home-project-cover,
	.home-news-cover {
		height: 326px !important;
		overflow: hidden;
	}
	
	.home-project-cover img,
	.home-news-cover img {
		width: 326px !important;
		height: auto;
		object-fit: cover;
	}
	
	/* Progress Bar */
	.home-project-progress {
		width: 280px !important;
	}
	
	/* Navigation Arrows - Ensure they're visible */
	.home-project-prev {
		left: 0;
		margin-left: -30px;
		z-index: 10;
	}
	
	.home-project-next {
		right: 0;
		margin-right: -30px;
		z-index: 10;
	}
}

/* Buttons: center both homepage CTA buttons (768px up to 830px) - override ids_responsive_style */
@media only screen and (min-width: 768px) and (max-width: 830px) {
	#favs-section {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
	}
	#favs-section .button-large.center,
	#favs-section .home-button-mobile,
	#favs-section > .button-large {
		position: static !important;
		left: auto !important;
		width: auto !important;
		display: block !important;
		margin: 20px auto 20px auto !important;
		text-align: center !important;
		min-width: auto !important;
		max-width: 100%;
	}
	.home-stats {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
	}
	.home-stats > .button-large,
	.home-stats > .home-button-mobile {
		position: static !important;
		left: auto !important;
		width: auto !important;
		display: block !important;
		margin: 20px auto 20px auto !important;
		min-width: auto !important;
		max-width: 100%;
		text-align: center !important;
	}
}

/* At 768px and below: reset button position (override ids_responsive_style .home-button-mobile) */
@media only screen and (max-width: 768px) {
	#favs-section .button-large.center,
	#favs-section .home-button-mobile,
	#favs-section > .button-large,
	.home-stats > .button-large,
	.home-stats > .home-button-mobile {
		position: static !important;
		left: auto !important;
		width: auto !important;
		margin: 20px auto !important;
	}
}

/* Home-stats: optimized layout 768px up to 830px - 3 columns, compact spacing */
@media only screen and (min-width: 768px) and (max-width: 830px) {
	.home-stats {
		margin: 32px auto;
		padding: 0 18px;
	}
	.home-stats .content {
		gap: 14px 18px;
	}
	.home-stats-col {
		width: calc((100% - 36px) / 3) !important;
		flex: 0 0 calc((100% - 36px) / 3) !important;
		padding: 10px 6px;
	}
	.home-stats-col img {
		width: 48% !important;
		max-width: 72px;
	}
	.home-stats-col h3 {
		font-size: 12px;
		margin: 6px 0 2px;
	}
	.home-stats-col h2 {
		font-size: 20px;
	}
}