/* =========================================================
   CaliPetConnect + CanAction — Mobile Responsive Layer
   =========================================================
   This file is 100% ADDITIVE. It is loaded AFTER all original
   plugin styles (inline and enqueued) and only adds extra rules
   for small screens. It never removes, overrides desktop layout,
   or changes any breed/dog/cat content, wording, or data — only
   how things reflow and scale on phones/tablets.
========================================================= */

/* ---------- Global safety net (all screen sizes) ----------
   IMPORTANT: we only set max-width here, never height:auto.
   This plugin deliberately sets exact pixel widths/heights with
   object-fit on many thumbnails (breed circles, comparison
   photos, quiz cards, etc.) — forcing height:auto would stretch
   or shrink those into inconsistent, mismatched sizes. max-width
   alone is enough to stop genuinely unconstrained images from
   overflowing their container. */
.cpc-breed-page img,
.cpc-browse-page img,
.cpc-compare-page img,
.cpc2-wrap img,
.cpcca-hub img,
[class^="ca-"] img,
[class*=" ca-"] img {
	max-width: 100%;
}

/* Prevent horizontal page scroll caused by any fixed-width element */
.cpc-breed-page,
.cpc-browse-page,
.cpc-compare-page,
.cpc2-wrap,
.cpcca-hub,
.ca-dashboard-wrap,
.ca-bp-page {
	max-width: 100%;
	overflow-x: hidden;
}

/* Any plain HTML table inside these plugins scrolls horizontally
   instead of squashing/breaking the page on narrow screens */
.cpc-breed-page table,
.cpc-compare-page table,
.ca-dashboard-wrap table,
.ca-bp-page table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ---------- Re-affirm known fixed-size thumbnails ----------
   Belt-and-suspenders: explicitly restate the original plugin's
   own sizing for its round/card thumbnails, so they always stay
   uniform no matter what order stylesheets load in. Values here
   match the original plugin CSS exactly — nothing changed. */
.cpc-compare-images img{ width:84px; height:84px; object-fit:cover; }
.cpc-cmp-photo img{ width:120px; height:120px; object-fit:cover; }
.cpc2-modal-item img{ width:34px; height:34px; object-fit:cover; }
.cps4-footer-img img{ width:100%; height:100%; object-fit:cover; }
.cpc-card img{ width:100%; height:180px; object-fit:contain; }
.cpc-dyk img{ width:100%; height:180px; object-fit:contain; }
.cpc2-photo-card img{ width:100%; height:220px; object-fit:contain; }
.cpq3-opt-photo img{ width:100%; height:180px; object-fit:cover; }

/* ---------- Tablets (<=1024px) ---------- */
@media (max-width: 1024px) {
	.cpc-cmp-ratings-grid { grid-template-columns: repeat(2, 1fr) !important; }
	.ca-col-4, .ca-col-3 { flex: 0 0 50% !important; max-width: 50% !important; }
}

/* ---------- Tablets / large phones (<=782px, WP admin breakpoint) ---------- */
@media (max-width: 782px) {

	/* Generic multi-column grids used across CanAction templates
	   (ca-col-2 ... ca-col-8, ca-bp-grid, ca-boost-stats-row, etc.)
	   stack into a single readable column */
	.ca-col-2, .ca-col-3, .ca-col-4, .ca-col-5, .ca-col-6, .ca-col-8,
	.ca-bp-grid,
	.ca-boost-stats-row,
	.ca-fb-benefits,
	.ca-breeder-benefits {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}

	.ca-bp-grid { display: block !important; }

	/* Modals / popups never exceed viewport width */
	.ca-breeder-modal-box,
	.cpc2-modal-box {
		width: 92vw !important;
		max-width: 92vw !important;
		max-height: 80vh !important;
	}

	/* Buttons become easier to tap and full-width where they were
	   already block-level action buttons */
	.ca-btn-large,
	.ca-btn-full,
	.ca-fb-cta-btn,
	.ca-bp-submit-btn,
	.cpc-eb-compare-btn {
		width: 100%;
		text-align: center;
		box-sizing: border-box;
	}

	/* Comfortable base font size + tap targets on touch screens */
	.cpc-breed-page, .cpc-browse-page, .cpc-compare-page, .cpc2-wrap, .cpcca-hub,
	.ca-dashboard-wrap, .ca-bp-page {
		font-size: 15px;
	}
	.cpc-breed-page a, .cpc-browse-page a, .cpc-compare-page a,
	.ca-dashboard-wrap a.button, .ca-btn {
		min-height: 40px;
	}
}

/* ---------- Phones (<=600px) ---------- */
@media (max-width: 600px) {

	/* Breed detail page: tighter side padding so content isn't cramped */
	.cpc-breed-page-inner { padding: 14px 14px !important; }

	/* Compare page cards + fact rows: already 1-column upstream at
	   1000px, but tighten spacing further for small phones */
	.cpc-cmp-cards { gap: 12px !important; }
	.cpc-fact-row, .cpc2-row { font-size: 12px !important; }

	/* Pet planner grid: drop to 2 columns then 1 on very small screens */
	.cpp-grid { grid-template-columns: repeat(2, 1fr) !important; }

	/* Sticky elements shouldn't eat too much vertical space on phones */
	#cpc-compare-bar { padding: 10px !important; }

	/* CanAction dashboard stat boxes / listing grids stack cleanly */
	.ca-listings-grid,
	.ca-dashboard-stats,
	.cpcca-stat-row {
		display: block !important;
	}
	.ca-listings-grid > *,
	.ca-dashboard-stats > * {
		width: 100% !important;
		margin-bottom: 10px;
	}

	/* Conversation / inbox layout: stack list above the open thread
	   instead of squeezing two columns side by side */
	.ca-conv-pane { flex-direction: column !important; }
	.ca-conv-pane > * { width: 100% !important; }
}

/* ---------- Very small phones (<=380px) ---------- */
@media (max-width: 380px) {
	.cpp-grid { grid-template-columns: 1fr !important; }
	.cpcca-hub-tab { font-size: 13px !important; padding: 12px 6px !important; }
}

/* =========================================================
   CanAction admin dashboard — mobile polish
   (targets the native .ca-stats-grid / .ca-stat-card / quick
   actions classes so the SAME CanAction dashboard just looks
   noticeably nicer on a phone — nothing structural changes)
========================================================= */
@media (max-width: 782px) {
	.ca-admin-wrap { padding: 0 6px; }
	.ca-admin-title { font-size: 1.25rem; }

	.ca-stats-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 10px !important;
	}
	.ca-stat-card {
		padding: 14px 10px !important;
	}
	.ca-stat-number { font-size: 1.6rem !important; }
	.ca-stat-label { font-size: 0.72rem !important; }

	.ca-admin-quick-links,
	.ca-admin-wrap > div[style*="flex-wrap"] {
		gap: 8px !important;
	}
	.ca-admin-quick-links a.button,
	.ca-admin-wrap a.button {
		flex: 1 1 45%;
		text-align: center;
	}
}

@media (max-width: 480px) {
	.ca-stats-grid { grid-template-columns: 1fr !important; }
	.ca-admin-quick-links a.button,
	.ca-admin-wrap a.button { flex: 1 1 100%; }
}

/* Smooth, modern tap feedback + rounded corners everywhere our own
   plugin renders buttons/cards, so the merged UI feels cohesive and
   polished on touch screens without altering original desktop CSS. */
@media (max-width: 782px) {
	.cpc-eb-card, .cpc-cmp-card, .ca-stat-card, .cpcca-link-card {
		border-radius: 14px !important;
	}
	.cpc-btn, .ca-btn, .button, .ca-stat-card a {
		transition: opacity .15s ease;
	}
	.cpc-btn:active, .ca-btn:active, .button:active {
		opacity: .75;
	}
}