/* MazanýPes.cz – styl článků magazínu */

.mp-magazine,
.mp-mag-article {
--mp-green: #489a20;
--mp-green-dark: #347514;
--mp-text: #263326;
--mp-muted: #667066;
--mp-bg: #f7f5ef;
--mp-card: #ffffff;
--mp-border: #e5e0d6;

max-width: 980px;
margin: 0 auto;
color: var(--mp-text);
font-family: Helvetica, Arial, sans-serif;
line-height: 1.65;
}

.mp-magazine *,
.mp-mag-article * {
box-sizing: border-box;
}

.mp-magazine img,
.mp-mag-article img {
max-width: 100%;
height: auto;
border-radius: 18px;
}

.mp-magazine h2,
.mp-magazine h3,
.mp-magazine h4,
.mp-mag-article h2,
.mp-mag-article h3,
.mp-mag-article h4 {
color: var(--mp-text);
line-height: 1.25;
margin-top: 1.8em;
margin-bottom: 0.6em;
}

.mp-magazine h2,
.mp-mag-article h2 {
font-size: 30px;
}

.mp-magazine h3,
.mp-mag-article h3 {
font-size: 23px;
}

.mp-magazine p,
.mp-mag-article p {
margin: 0 0 1em;
}

.mp-lead,
.mp-mag-article .mp-lead,
.mp-magazine .mp-lead {
font-size: 18px;
color: var(--mp-text);
line-height: 1.65;
margin-bottom: 1.2em;
}

/* Úvodní boxy článků */

.mp-hero {
background: var(--mp-bg);
border: 1px solid var(--mp-border);
border-radius: 24px;
padding: 18px 28px 28px;
margin: 24px 0 32px;
}

.mp-hero__image {
display: block;
margin-bottom: 22px;
}

.mp-section {
margin: 34px 0;
}

.mp-card {
background: var(--mp-card);
border: 1px solid var(--mp-border);
border-radius: 20px;
padding: 16px 22px 22px;
margin: 22px 0;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

.mp-step {
border-left: 5px solid var(--mp-green);
padding-left: 20px;
margin: 28px 0;
}

.mp-product-box {
background: #f3f8ef;
border: 1px solid #d8e8cf;
border-radius: 20px;
padding: 16px 22px 22px;
margin: 28px 0;
}

.mp-product-box h3 {
margin-top: 0;
}

.mp-product-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 16px;
}

/* Tlačítka */

.mp-btn {
display: inline-block;
background: var(--mp-green);
color: #ffffff !important;
text-decoration: none !important;
padding: 11px 18px;
border-radius: 999px;
font-weight: 700;
}

.mp-btn:hover {
background: var(--mp-green-dark);
color: #ffffff !important;
text-decoration: none !important;
}

.mp-btn--secondary {
background: #ffffff;
color: var(--mp-green-dark) !important;
border: 1px solid var(--mp-green);
}

/* Tipy, upozornění, CTA */

.mp-tip {
background: #fffaf0;
border-left: 5px solid #d6a84f;
border-radius: 16px;
padding: 14px 20px 18px;
margin: 28px 0;
}

.mp-tip-box {
background: #fffaf0;
border-left: 5px solid #d6a84f;
border-radius: 16px;
padding: 20px 22px;
margin: 30px 0;
}

.mp-tip-box h2,
.mp-tip-box h3 {
margin-top: 0 !important;
}

.mp-warning {
background: #fff0f0;
border-left: 5px solid #ff6b6b;
border-radius: 16px;
padding: 20px;
margin: 28px 0;
}

.mp-warning h3 {
color: #cc0000;
margin-top: 0;
}

.mp-cta-box {
background: #f3f8ef;
border: 1px solid #d8e8cf;
border-radius: 20px;
padding: 22px;
margin: 30px 0;
}

.mp-cta-box p:last-child {
margin-bottom: 0;
}

.mp-related-link {
background: #f7f5ef;
border: 1px solid #e5e0d6;
border-radius: 16px;
padding: 18px 20px;
margin: 28px 0;
}

.mp-related-link p {
margin: 0;
}

.mp-related-link a {
color: #489a20;
font-weight: 700;
text-decoration: none;
}

.mp-related-link a:hover {
text-decoration: underline;
}

.mp-divider {
border: 0;
border-top: 1px solid var(--mp-border);
margin: 34px 0;
}

/* Obrázky uvnitř článků */

.mp-article-img-banner {
max-width: 820px !important;
width: 100% !important;
margin: 26px auto 34px auto !important;
text-align: center !important;
}

.mp-article-img-banner img {
display: block !important;
width: 100% !important;
max-width: 820px !important;
height: auto !important;
margin: 0 auto !important;
border-radius: 16px !important;
}

.mp-article-img-small {
max-width: 560px !important;
width: 100% !important;
margin: 28px auto 30px auto !important;
text-align: center !important;
}

.mp-article-img-small img {
display: block !important;
width: 100% !important;
max-width: 560px !important;
height: auto !important;
margin: 0 auto !important;
border-radius: 14px !important;
}

.mp-article-image,
.mp-magazine .mp-article-image {
display: block !important;
width: 58% !important;
max-width: 560px !important;
aspect-ratio: 3 / 2 !important;
object-fit: cover !important;
object-position: center !important;
height: auto !important;
margin: 22px auto 26px auto !important;
border-radius: 18px !important;
}

/* Krokové layouty */

.mp-step-layout {
display: flex;
flex-wrap: wrap;
gap: 24px;
align-items: flex-start;
}

.mp-step-image {
flex: 1 1 240px;
min-width: 220px;
text-align: center;
}

.mp-step-image img {
max-height: 250px;
width: auto;
}

.mp-step-content {
flex: 2 1 320px;
}

.mp-step-content h3 {
margin-top: 0;
}

.mp-card--compact {
padding-top: 18px;
padding-bottom: 18px;
}

.mp-card--compact .mp-step-layout {
align-items: center;
}

.mp-step-image--small img {
max-height: 165px;
width: auto;
}

/* Tip layout s obrázkem */

.mp-tip-layout {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 22px;
}

.mp-tip-image {
flex: 0 0 120px;
text-align: center;
}

.mp-tip-image img {
width: 120px;
height: 120px;
object-fit: cover;
border-radius: 999px;
border: 3px solid #ffffff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
}

.mp-tip-content {
flex: 1 1 260px;
}

.mp-tip-content h3 {
margin-top: 0;
}

/* Autor a datum článku */

.mp-article-meta {
margin: 0 0 22px 0;
padding: 10px 14px;
background: #f7faf4;
border-left: 4px solid #489a20;
border-radius: 0 10px 10px 0;
color: #475a41;
font-size: 14px;
line-height: 1.5;
}

.mp-article-meta strong {
color: #263326;
font-weight: 700;
}

.mp-article-meta a {
color: #489a20;
font-weight: 700;
text-decoration: none;
}

.mp-article-meta a:hover {
text-decoration: underline;
}

.mp-article-meta__sep {
color: #9a9a9a;
margin: 0 7px;
}

/* Autor bio box */

.mp-author-bio-box {
background: #f7f5ef;
border: 1px solid #e5e0d6;
border-radius: 16px;
padding: 22px 24px;
margin: 18px 0 24px 0;
}

/* Úvodní rozcestník magazínu */

.mp-mag-home {
max-width: 1120px !important;
margin: 0 auto !important;
padding-top: 0 !important;
color: #263326;
font-family: Helvetica, Arial, sans-serif !important;
}

.mp-mag-home h2 {
color: #489a20;
font-size: 32px;
line-height: 1.2;
margin: 0 0 28px;
}

.mp-mag-home-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 18px 22px !important;
margin: 6px 0 34px !important;
align-items: stretch !important;
clear: both !important;
}

.mp-mag-home-card {
background: #ffffff;
border: 1px solid #e5e0d6;
border-radius: 14px !important;
padding: 12px !important;
margin: 0 !important;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
text-decoration: none;
color: #263326 !important;
display: flex !important;
flex-direction: column !important;
height: auto !important;
min-height: 0 !important;
overflow: hidden !important;
box-sizing: border-box !important;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.mp-mag-home-card:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.11);
text-decoration: none;
}

.mp-mag-home-card h3 {
font-size: 16px !important;
line-height: 1.25 !important;
margin: 0 0 6px !important;
color: #263326;
}

.mp-mag-home-card p {
font-size: 13px !important;
line-height: 1.35 !important;
margin: 0 0 10px !important;
color: #4b554b;
}

.mp-mag-home-card img {
display: block !important;
width: 100% !important;
height: 135px !important;
object-fit: cover !important;
object-position: center !important;
border-radius: 10px !important;
margin-top: auto !important;
}

/* Doporučené články – mřížka bannerů */

.mp-mag-section {
max-width: 1120px;
margin: 24px auto 40px;
font-family: Helvetica, Arial, sans-serif;
}

.mp-mag-section .mp-section-grid,
.mp-section-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 20px !important;
margin: 26px 0 40px;
align-items: stretch !important;
}

.mp-mag-section .mp-section-card,
.mp-section-card {
display: block !important;
width: 100% !important;
background: #ffffff !important;
border-radius: 14px !important;
overflow: hidden !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
text-decoration: none !important;
line-height: 0 !important;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.mp-mag-section .mp-section-card:hover,
.mp-section-card:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12) !important;
text-decoration: none !important;
}

.mp-mag-section .mp-section-card img,
.mp-section-card img {
display: block !important;
width: 100% !important;
height: auto !important;
max-width: 100% !important;
border-radius: 14px !important;
object-fit: unset !important;
transform: none !important;
margin: 0 !important;
}

/* Pojistka proti starým crop třídám, pokud někde zůstaly v HTML */

.mp-mag-section .mp-section-card--crop img,
.mp-mag-section .mp-section-card--crop-dvojita img {
width: 100% !important;
height: auto !important;
max-width: 100% !important;
margin: 0 !important;
transform: none !important;
object-fit: unset !important;
}

/* Kompaktnější horní mezera v boxech článku */

.mp-hero > h2:first-child,
.mp-card > h3:first-child,
.mp-tip > h3:first-child,
.mp-product-box > h3:first-child,
.mp-card > h4:first-child,
.mp-tip > h4:first-child,
.mp-product-box > h4:first-child {
margin-top: 0 !important;
}

/* Finální nastavení fontu magazínu */

.mp-magazine,
.mp-magazine *,
.mp-mag-article,
.mp-mag-article *,
.mp-mag-home,
.mp-mag-home *,
.mp-mag-section,
.mp-mag-section * {
font-family: Helvetica, Arial, sans-serif !important;
}

/* Tablet */

@media (max-width: 900px) {
.mp-mag-home-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.mp-mag-home-card img {
height: 150px !important;
}

.mp-mag-section .mp-section-grid,
.mp-section-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 16px !important;
}
}

/* Mobil */

@media (max-width: 768px) {
.mp-mag-article {
padding: 0 14px;
}

.mp-mag-article h2,
.mp-magazine h2 {
font-size: 24px;
}

.mp-mag-article h3,
.mp-magazine h3 {
font-size: 20px;
}

.mp-article-img-banner,
.mp-article-img-small {
max-width: 100% !important;
margin: 22px auto 26px auto !important;
}

.mp-article-img-banner img,
.mp-article-img-small img {
max-width: 100% !important;
border-radius: 12px !important;
}

.mp-article-image,
.mp-magazine .mp-article-image {
width: 100% !important;
max-width: 100% !important;
aspect-ratio: 4 / 3 !important;
}

.mp-tip-box,
.mp-cta-box,
.mp-related-link {
padding: 18px;
border-radius: 16px;
}

.mp-btn {
display: block;
text-align: center;
width: 100%;
margin-bottom: 10px;
}
}

@media (max-width: 640px) {
.mp-magazine {
padding: 0 14px;
}

.mp-hero,
.mp-card,
.mp-product-box {
padding: 18px;
border-radius: 18px;
}

.mp-product-actions {
display: block;
}

.mp-step-layout {
display: block;
}

.mp-step-image {
margin-bottom: 18px;
}

.mp-step-image img {
max-height: none;
}

.mp-tip-layout {
display: block;
}

.mp-tip-image {
margin: 0 0 18px;
}

.mp-mag-home {
padding: 0 10px !important;
}

.mp-mag-home h2 {
font-size: 28px;
}

.mp-mag-home-grid {
grid-template-columns: 1fr !important;
gap: 16px !important;
margin-top: 4px !important;
}

.mp-mag-home-card {
padding: 16px;
}

.mp-mag-home-card img {
height: auto !important;
}

.mp-mag-section {
padding: 0 12px;
}

.mp-mag-section .mp-section-grid,
.mp-section-grid {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
}

@media only screen and (max-width: 768px) {
.mp-article-meta {
margin: 0 0 18px 0;
padding: 9px 12px;
font-size: 13px;
}

.mp-article-meta__sep {
display: none;
}

.mp-article-meta span {
display: block;
}
}