/* =====================================================
   mPLANNER – PRODUCT LANDING PAGE
   ===================================================== */

.mplp {
    font-family:'Source Sans 3',sans-serif;
    color:#626262;
    line-height:1.65;
}

.mplp *,
.mplp *::before,
.mplp *::after {
    box-sizing:border-box;
}

.mplp-section {
    margin-top:64px;
}

.mplp-overline {
    margin:0 0 10px;
    font-size:11px;
    line-height:1.3;
    font-weight:600;
    letter-spacing:.20em;
    text-transform:uppercase;
    color:#999399;
}

.mplp h2 {
    margin:0 0 22px;
    font-family:'Mulish',sans-serif;
    font-size:30px;
    line-height:1.25;
    font-weight:700;
    color:#171717;
}

.mplp p {
    margin:0 0 15px;
    font-size:16px;
    line-height:1.7;
}

.mplp-lead,
.mplp-for-who {
    max-width:820px;
}

/* PARAMETRY */

@keyframes mplpParamFloat {
    0%,100% { transform:translateY(0); }
    50% { transform:translateY(-4px); }
}

.mplp-params {
    margin:28px 0 0;
    padding:0;
    list-style:none;
    border-top:1px solid #e1e1e1;
}

.mplp-param {
    display:grid;
    grid-template-columns:38px 1fr;
    gap:15px;
    align-items:start;
    margin:0;
    padding:19px 0;
    border-bottom:1px solid #e1e1e1;
    list-style:none;
    transition:padding-left .25s ease,background-color .25s ease;
}

.mplp-param:hover {
    padding-left:8px;
}

.mplp-check {
    display:flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    margin-top:1px;
    border-radius:50%;
    background:#f5f3f6;
    color:#171717;
    box-shadow:0 4px 12px rgba(0,0,0,.05);
    animation:mplpParamFloat 3.7s ease-in-out infinite;
    transition:background-color .25s ease,color .25s ease,box-shadow .25s ease;
}

.mplp-param:nth-child(2) .mplp-check { animation-delay:-.7s; }
.mplp-param:nth-child(3) .mplp-check { animation-delay:-1.4s; }
.mplp-param:nth-child(4) .mplp-check { animation-delay:-2.1s; }
.mplp-param:nth-child(5) .mplp-check { animation-delay:-2.8s; }

.mplp-param:hover .mplp-check {
    animation-play-state:paused;
    background:#171717;
    color:#fff;
    box-shadow:0 8px 18px rgba(0,0,0,.13);
}

.mplp-param-text {
    font-size:15px;
    line-height:1.55;
    color:#606060;
}

.mplp-param-text strong {
    display:block;
    margin-bottom:2px;
    font-family:'Mulish',sans-serif;
    font-size:15px;
    font-weight:700;
    color:#171717;
}

/* PRODUKTOVÉ FOTOGRAFIE */

.mplp-product-visual {
    display:grid;
    grid-template-columns:1.16fr .84fr;
    gap:18px;
    margin:58px 0 0;
    align-items:end;
}

.mplp-product-photo {
    position:relative;
    margin:0;
    padding:0;
    overflow:hidden;
    border-radius:14px;
    background:#f5f3f6;
}

.mplp-product-photo-main {
    aspect-ratio:1 / 1;
}

.mplp-product-photo-secondary {
    aspect-ratio:4 / 5;
    margin-bottom:34px;
}

.mplp-product-photo img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .65s cubic-bezier(.2,.7,.2,1);
}

.mplp-product-photo:hover img {
    transform:scale(1.03);
}

.mplp-photo-badge {
    position:absolute;
    left:18px;
    bottom:18px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 14px;
    border:1px solid rgba(255,255,255,.65);
    border-radius:30px;
    background:rgba(255,255,255,.90);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    font-family:'Mulish',sans-serif;
    font-size:11px;
    line-height:1.2;
    font-weight:700;
    color:#171717;
    box-shadow:0 7px 20px rgba(0,0,0,.08);
}

.mplp-photo-badge-dot {
    width:7px;
    height:7px;
    border-radius:50%;
    background:#171717;
}

/* UVNITŘ mPLANNERU */

.mplp-inside {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-top:28px;
}

.mplp-inside-item {
    position:relative;
    min-height:150px;
    padding:23px;
    overflow:hidden;
    border-radius:12px;
    background:#f7f7f7;
    transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease;
}

.mplp-inside-item:hover {
    transform:translateY(-4px);
    background:#f5f3f6;
    box-shadow:0 12px 28px rgba(0,0,0,.055);
}

.mplp-inside-number {
    display:block;
    margin-bottom:24px;
    font-family:'Mulish',sans-serif;
    font-size:11px;
    font-weight:700;
    letter-spacing:.12em;
    color:#a7a7a7;
}

.mplp-inside-title {
    display:block;
    font-family:'Mulish',sans-serif;
    font-size:15px;
    line-height:1.45;
    font-weight:700;
    color:#171717;
}

/* AUTOR */

.mplp-author {
    display:grid;
    grid-template-columns:minmax(190px,31%) 1fr;
    min-height:350px;
    overflow:hidden;
    border-radius:14px;
    background:#f5f3f6;
}

.mplp-author-photo {
    min-height:350px;
    overflow:hidden;
}

.mplp-author-photo img {
    display:block;
    width:100%;
    height:100%;
    min-height:350px;
    object-fit:cover;
    object-position:center 25%;
}

.mplp-author-content {
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:38px 42px;
}

.mplp-author-label {
    display:block;
    margin-bottom:8px;
    font-size:10px;
    line-height:1.3;
    font-weight:600;
    letter-spacing:.19em;
    text-transform:uppercase;
    color:#989198;
}

.mplp-author h2 {
    margin-bottom:17px;
    font-size:27px;
}

.mplp-author-name {
    margin-bottom:15px;
    font-family:'Mulish',sans-serif;
    font-size:15px;
    font-weight:700;
    color:#171717;
}

.mplp-author-name span {
    margin-left:7px;
    font-family:'Source Sans 3',sans-serif;
    font-weight:400;
    color:#888;
}

.mplp-author p {
    margin-bottom:20px;
    font-size:15px;
}

.mplp-author-link {
    display:inline-flex;
    align-items:center;
    gap:9px;
    align-self:flex-start;
    padding-bottom:3px;
    border-bottom:1px solid #171717;
    font-family:'Mulish',sans-serif;
    font-size:14px;
    font-weight:700;
    color:#171717 !important;
    text-decoration:none !important;
}

.mplp-author-link svg {
    transition:transform .22s ease;
}

.mplp-author-link:hover svg {
    transform:translateX(4px);
}

/* NÁVODY */

.mplp-guides-intro {
    max-width:720px;
}

.mplp-guide-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    margin-top:38px;
    padding-top:15px;
}

.mplp-guide {
    position:relative;
    display:block;
    min-height:225px;
    padding:31px 30px 27px;
    border-radius:14px;
    background:#f7f7f7;
    color:#171717 !important;
    text-decoration:none !important;
    transition:transform .25s ease,background-color .25s ease,box-shadow .25s ease;
}

.mplp-guide:nth-child(2) {
    background:#f5f3f6;
}

.mplp-guide:hover {
    transform:translateY(-4px);
    box-shadow:0 12px 30px rgba(0,0,0,.065);
}

.mplp-guide-label {
    display:block;
    margin-bottom:14px;
    font-size:10px;
    line-height:1.3;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:#999;
}

.mplp-guide-title {
    display:block;
    max-width:85%;
    margin-bottom:9px;
    font-family:'Mulish',sans-serif;
    font-size:20px;
    line-height:1.3;
    font-weight:700;
    color:#171717;
}

.mplp-guide-text {
    display:block;
    max-width:88%;
    font-size:14px;
    line-height:1.55;
    color:#777;
}

.mplp-guide-bottom {
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:25px;
    font-size:14px;
    font-weight:600;
    color:#171717;
}

.mplp-guide-bottom svg {
    transition:transform .22s ease;
}

.mplp-guide:hover .mplp-guide-bottom svg {
    transform:translateX(5px);
}

@keyframes mplpGuideFloat {
    0%,100% { transform:translateY(0) rotate(-1deg); }
    50% { transform:translateY(-5px) rotate(1deg); }
}

.mplp-guide-icon {
    position:absolute;
    top:-22px;
    right:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:54px;
    height:54px;
    border:1px solid #e5e5e5;
    border-radius:50%;
    background:#fff;
    color:#171717;
    box-shadow:0 9px 22px rgba(0,0,0,.10);
    animation:mplpGuideFloat 4s ease-in-out infinite;
}

.mplp-guide:nth-child(2) .mplp-guide-icon {
    animation-delay:-1.8s;
}

/* FAQ */

@keyframes mplpFaqFloat {
    0%,100% { transform:translateY(-50%) translateY(0); }
    50% { transform:translateY(-50%) translateY(-3px); }
}

.mplp-faq {
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:30px;
}

.mplp-faq details {
    position:relative;
    overflow:visible;
    border:1px solid #e7e7e7;
    border-radius:12px;
    background:#fff;
    transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease,transform .3s ease;
}

.mplp-faq details:hover {
    transform:translateY(-2px);
    border-color:#d7d4d8;
    box-shadow:0 8px 24px rgba(0,0,0,.045);
}

.mplp-faq details[open] {
    border-color:#e2dfe3;
    background:#f8f6f8;
}

.mplp-faq summary {
    position:relative;
    display:flex;
    align-items:center;
    min-height:74px;
    padding:20px 78px 20px 22px;
    cursor:pointer;
    list-style:none;
    font-family:'Mulish',sans-serif;
    font-size:15px;
    line-height:1.4;
    font-weight:700;
    color:#171717;
}

.mplp-faq summary::-webkit-details-marker {
    display:none;
}

.mplp-faq-answer {
    max-width:820px;
    padding:0 78px 24px 22px;
    font-size:15px;
    line-height:1.7;
    color:#6d6d6d;
}

.mplp-faq-answer a {
    color:#171717 !important;
    font-weight:600;
    text-decoration:underline;
}

.mplp-faq-toggle {
    position:absolute;
    right:18px;
    top:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    border-radius:50%;
    background:#f5f3f6;
    color:#171717;
    box-shadow:0 5px 14px rgba(0,0,0,.07);
    pointer-events:none;
    animation:mplpFaqFloat 3.8s ease-in-out infinite;
    transition:background-color .25s ease,color .25s ease,box-shadow .25s ease;
}

.mplp-faq-toggle svg {
    transition:transform .35s cubic-bezier(.4,0,.2,1);
}

.mplp-faq details[open] .mplp-faq-toggle {
    background:#171717;
    color:#fff;
    box-shadow:0 8px 20px rgba(0,0,0,.14);
}

.mplp-faq details[open] .mplp-faq-toggle svg {
    transform:rotate(180deg);
}

.mplp-faq details:nth-child(2) .mplp-faq-toggle { animation-delay:-.8s; }
.mplp-faq details:nth-child(3) .mplp-faq-toggle { animation-delay:-1.6s; }
.mplp-faq details:nth-child(4) .mplp-faq-toggle { animation-delay:-2.4s; }
.mplp-faq details:nth-child(5) .mplp-faq-toggle { animation-delay:-3.2s; }

/* KONTAKTNÍ CTA */

@keyframes mplpContactFloat {
    0%,100% { transform:translateY(0); }
    50% { transform:translateY(-5px); }
}

@keyframes mplpContactPulse {
    0%,55%,100% {
        box-shadow:0 9px 24px rgba(0,0,0,.17),0 0 0 0 rgba(23,23,23,0);
    }
    70% {
        box-shadow:0 9px 24px rgba(0,0,0,.17),0 0 0 9px rgba(23,23,23,.10);
    }
    88% {
        box-shadow:0 9px 24px rgba(0,0,0,.17),0 0 0 17px rgba(23,23,23,0);
    }
}

.mplp-contact {
    position:relative;
    display:block;
    margin-top:54px;
    padding:27px 98px 27px 27px;
    border-radius:14px;
    background:#f5f3f6;
    color:#171717 !important;
    text-decoration:none !important;
    transition:background-color .25s ease,box-shadow .25s ease;
}

.mplp-contact:hover {
    background:#f0edf2;
    box-shadow:0 12px 30px rgba(0,0,0,.055);
}

.mplp-contact-label {
    display:block;
    margin-bottom:7px;
    font-size:10px;
    line-height:1.3;
    font-weight:600;
    letter-spacing:.18em;
    color:#969096;
}

.mplp-contact-title {
    display:block;
    margin-bottom:4px;
    font-family:'Mulish',sans-serif;
    font-size:19px;
    line-height:1.35;
    font-weight:700;
    color:#171717;
}

.mplp-contact-text {
    display:block;
    font-size:14px;
    line-height:1.45;
    color:#777;
}

.mplp-contact-circle-wrap {
    position:absolute;
    z-index:3;
    right:-17px;
    top:50%;
    transform:translateY(-50%);
}

.mplp-contact-circle {
    display:flex;
    align-items:center;
    justify-content:center;
    width:60px;
    height:60px;
    border-radius:50%;
    background:#171717;
    color:#fff;
    animation:mplpContactFloat 3.2s ease-in-out infinite,mplpContactPulse 4.4s ease-out infinite;
}

/* TABLET */

@media(max-width:900px) and (min-width:651px) {
    .mplp-section { margin-top:54px; }
    .mplp h2 { font-size:28px; }
    .mplp-product-visual { grid-template-columns:1.08fr .92fr; gap:14px; }
    .mplp-product-photo-secondary { margin-bottom:22px; }
    .mplp-inside { grid-template-columns:repeat(2,1fr); }
    .mplp-inside-item:last-child { grid-column:1 / -1; }
    .mplp-author { grid-template-columns:220px 1fr; }
    .mplp-author-content { padding:30px; }
    .mplp-author h2 { font-size:25px; }
    .mplp-guide { padding:29px 24px 25px; }
    .mplp-guide-title { font-size:18px; }
}

/* MOBIL */

@media(max-width:650px) {
    .mplp-section { margin-top:48px; }
    .mplp h2 { font-size:26px; }
    .mplp p { font-size:15px; }
    .mplp-param { grid-template-columns:34px 1fr; }
    .mplp-param:hover { padding-left:0; }
    .mplp-product-visual { grid-template-columns:1fr; gap:14px; margin-top:42px; }
    .mplp-product-photo-main,
    .mplp-product-photo-secondary { aspect-ratio:auto; margin-bottom:0; }
    .mplp-product-photo img { width:100%; height:auto; }
    .mplp-inside { grid-template-columns:1fr; }
    .mplp-inside-item { min-height:auto; }
    .mplp-author { grid-template-columns:1fr; }
    .mplp-author-photo,
    .mplp-author-photo img { min-height:360px; max-height:430px; }
    .mplp-author-content { padding:29px 24px 32px; }
    .mplp-author h2 { font-size:24px; }
    .mplp-author-name span { display:block; margin:3px 0 0; }
    .mplp-guide-grid { grid-template-columns:1fr; gap:38px; }
    .mplp-guide { min-height:auto; }
    .mplp-faq summary { min-height:68px; padding:17px 65px 17px 17px; font-size:14px; }
    .mplp-faq-answer { padding:0 55px 20px 17px; font-size:14px; }
    .mplp-faq-toggle { right:13px; width:36px; height:36px; }
    .mplp-contact { padding:23px 72px 23px 20px; }
    .mplp-contact-circle-wrap { right:-7px; }
    .mplp-contact-circle { width:55px; height:55px; }
}

/* REDUCED MOTION */

@media(prefers-reduced-motion:reduce) {
    .mplp-check,
    .mplp-guide-icon,
    .mplp-faq-toggle,
    .mplp-contact-circle {
        animation:none;
    }
}
