/* Article */
.blog_article__header {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, calc(16 * var(--dpx)), 16px);
}

.blog_article__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.blog_article__tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: var(--color-green);
    color: var(--color-white);
    border-radius: 20px;
    font-size: var(--fs14);
    text-decoration: none;
    transition: background 0.2s ease;
}

.blog_article__tag:hover {
    background: var(--color-hover);
    color: var(--color-white);
}

.blog_article__time,
.blog_article__date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs14);
    color: var(--color-brown);
    opacity: 0.7;
}

.blog_article__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--fs40);
    font-weight: 500;
    color: var(--color-brown);
    line-height: 1.2;
    text-transform: uppercase;
}

.blog_article__rating {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs14);
    color: var(--color-brown);
    margin-bottom: clamp(20px, calc(31 / 19.2 * 1vw), calc(31 / 19.2 * 1vw));
}

.blog_article__stars {
    display: inline-flex;
    gap: 4px;
}

.blog_article__star {
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg width='23' height='23' viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.1934 7.79492L13.4365 8.33301L14.0254 8.37988L19.0625 8.78027L15.0459 12.3965L14.5811 12.8145L14.7529 13.4141L16.3682 19.0674L11.5615 15.8633L11.0068 15.4932L10.4512 15.8633L5.62988 19.0762L6.94922 13.3623L7.07617 12.8135L6.67383 12.4209L2.93945 8.78125L7.9873 8.37988L8.57617 8.33301L8.81934 7.79492L11.0059 2.95312L13.1934 7.79492Z' stroke='%234F5D46' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
}

.blog_article__star.is-active {
    background-image: url("data:image/svg+xml,%3Csvg width='23' height='23' viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.1311 8.41866C20.0734 8.24885 19.9673 8.09964 19.8258 7.98945C19.6843 7.87926 19.5137 7.81292 19.3349 7.79861L14.1057 7.3831L11.8429 2.37409C11.7709 2.21276 11.6536 2.07573 11.5054 1.97955C11.3572 1.88336 11.1843 1.83213 11.0076 1.83203C10.8309 1.83193 10.658 1.88298 10.5097 1.979C10.3613 2.07502 10.244 2.21192 10.1717 2.37317L7.90891 7.3831L2.67976 7.79861C2.50407 7.81253 2.3361 7.87677 2.19597 7.98364C2.05583 8.09052 1.94945 8.23551 1.88955 8.40126C1.82966 8.56701 1.81878 8.74651 1.85823 8.91828C1.89768 9.09005 1.98578 9.24682 2.11199 9.36983L5.9763 13.1369L4.60962 19.0549C4.56812 19.234 4.58142 19.4215 4.64779 19.593C4.71417 19.7645 4.83055 19.9121 4.98183 20.0166C5.13312 20.1211 5.31233 20.1777 5.4962 20.1791C5.68008 20.1805 5.86013 20.1266 6.01299 20.0244L11.0073 16.6949L16.0017 20.0244C16.1579 20.1282 16.3422 20.1816 16.5297 20.1774C16.7171 20.1733 16.8989 20.1119 17.0504 20.0014C17.202 19.8909 17.316 19.7367 17.3773 19.5595C17.4386 19.3822 17.4441 19.1904 17.3931 19.01L15.7155 13.1397L19.8761 9.39551C20.1485 9.1497 20.2485 8.76629 20.1311 8.41866Z' fill='%234F5D46'/%3E%3C/svg%3E");
}

.blog_article__reviews-link {
    color: var(--color-brown);
    text-decoration: underline;
    opacity: 0.7;
}

.blog_article__reviews-link:hover {
    opacity: 1;
    color: var(--color-green);
}

.blog_article__sep {
    opacity: 0.3;
}

/* Cover */
.blog_article__cover {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: var(--radius-card-lg);
    overflow: hidden;
    margin-bottom: clamp(20px, calc(32 * var(--dpx)), 32px);
    background: var(--color-beige);
}

.blog_article__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blog_article__gallery {
    list-style: none;
    padding: 0;
    margin: 0 0 clamp(20px, calc(24 * var(--dpx)), 24px);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}

.blog_article__gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    aspect-ratio: 1/1;
}

/* Content */
.blog_article__content {
    font-size: var(--fs18);
    line-height: 1.7;
    color: var(--color-brown);
}

.blog_article__content h2,
.blog_article__content h3,
.blog_article__content h4 {
    margin: clamp(24px, calc(32 * var(--dpx)), 32px) 0 clamp(12px, calc(16 * var(--dpx)), 16px);
    color: var(--color-brown);
    font-weight: 500;
    line-height: 1.3;
}

.blog_article__content h2 { font-size: var(--fs28); }
.blog_article__content h3 { font-size: var(--fs24); }
.blog_article__content h4 { font-size: var(--fs20); }

.blog_article__content p {
    margin: 0 0 clamp(12px, calc(16 * var(--dpx)), 16px);
}

.blog_article__content img {
    max-width: 100%;
    border-radius: 10px;
    margin: 16px 0;
}

.blog_article__content ul,
.blog_article__content ol {
    padding-left: 24px;
    margin: 0 0 clamp(12px, calc(16 * var(--dpx)), 16px);
}

.blog_article__content a {
    color: var(--color-green);
    text-decoration: underline;
}

.blog_article__content blockquote {
    margin: 16px 0;
    padding: 16px 20px;
    background: var(--color-white);
    border-left: 4px solid var(--color-green);
    border-radius: 10px;
    font-style: italic;
}

/* Downloads */
.blog_article__downloads {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: clamp(20px, calc(24 * var(--dpx)), 24px);
}

.blog_article__download {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--color-white);
    border-radius: 10px;
    color: var(--color-brown);
    text-decoration: none;
    font-size: var(--fs16);
    transition: background 0.2s ease;
}

.blog_article__download:hover {
    background: var(--color-beige);
}

.blog_article__download small {
    opacity: 0.6;
    font-size: var(--fs14);
}

.blog_article__banner {
    margin: clamp(20px, calc(32 * var(--dpx)), 32px) 0;
}

/* Prev / next */
.blog_article__nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(12px, calc(20 * var(--dpx)), 20px);
    padding-top: var(--w40);
}

.blog_article__nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: clamp(14px, calc(18 * var(--dpx)), 18px) clamp(16px, calc(20 * var(--dpx)), 20px);
    background: var(--color-white);
    border-radius: var(--radius-card);
    color: var(--color-brown);
    text-decoration: none;
    transition: background 0.2s ease;
}

.blog_article__nav-link:hover {
    background: var(--color-hover);
    color: var(--color-white);
}
.blog_article__nav-link:hover path{
    stroke: #fff;
}

.blog_article__nav-link--next {
    justify-content: flex-end;
    text-align: right;
}

.blog_article__nav-label {
    display: block;
    font-size: var(--fs18);
    opacity: 0.6;
}

.blog_article__nav-title {
    display: block;
    font-size: var(--fs20);
    line-height: 1.3;
}

@media (max-width: 720px) {
    .blog_article__nav {
        grid-template-columns: 1fr;
    }
}

/* Review form */
.blog_article__reviews-title {
    font-family: var(--font-heading);
    font-size: var(--fs28);
    font-weight: 500;
    text-transform: uppercase;
    color: var(--color-brown);
    margin: clamp(24px, calc(32 * var(--dpx)), 32px) 0 clamp(16px, calc(24 * var(--dpx)), 24px);
}

.blog_article__form {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, calc(24 * var(--dpx)), 24px);
    max-width: 640px;
}

.blog_article__form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.blog_article__form-label {
    font-size: var(--fs16);
    color: var(--color-brown);
}

.blog_article__form-input,
.blog_article__form-textarea {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: transparent;
    font-family: inherit;
    font-size: var(--fs16);
    color: var(--color-brown);
    resize: vertical;
}

.blog_article__form-input:focus,
.blog_article__form-textarea:focus {
    border-color: var(--color-green);
    outline: none;
}

.blog_article__form-hint {
    font-size: var(--fs14);
    color: var(--color-brown);
    opacity: 0.6;
}

.blog_article__form-stars {
    display: flex;
    align-items: center;
    gap: 6px;
}

.blog_article__form-side {
    font-size: var(--fs14);
    color: var(--color-brown);
    opacity: 0.6;
    padding: 0 4px;
}

.blog_article__form-star-wrap {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.blog_article__form-star-wrap input[type="radio"] {
    display: none;
}

.blog_article__form-star {
    width: 24px;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg width='23' height='23' viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.1934 7.79492L13.4365 8.33301L14.0254 8.37988L19.0625 8.78027L15.0459 12.3965L14.5811 12.8145L14.7529 13.4141L16.3682 19.0674L11.5615 15.8633L11.0068 15.4932L10.4512 15.8633L5.62988 19.0762L6.94922 13.3623L7.07617 12.8135L6.67383 12.4209L2.93945 8.78125L7.9873 8.37988L8.57617 8.33301L8.81934 7.79492L11.0059 2.95312L13.1934 7.79492Z' stroke='%234F5D46' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
    transition: transform 0.15s ease;
}

.blog_article__form-star-wrap input[type="radio"]:checked ~ .blog_article__form-star {
    background-image: url("data:image/svg+xml,%3Csvg width='23' height='23' viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.1311 8.41866C20.0734 8.24885 19.9673 8.09964 19.8258 7.98945C19.6843 7.87926 19.5137 7.81292 19.3349 7.79861L14.1057 7.3831L11.8429 2.37409C11.7709 2.21276 11.6536 2.07573 11.5054 1.97955C11.3572 1.88336 11.1843 1.83213 11.0076 1.83203C10.8309 1.83193 10.658 1.88298 10.5097 1.979C10.3613 2.07502 10.244 2.21192 10.1717 2.37317L7.90891 7.3831L2.67976 7.79861C2.50407 7.81253 2.3361 7.87677 2.19597 7.98364C2.05583 8.09052 1.94945 8.23551 1.88955 8.40126C1.82966 8.56701 1.81878 8.74651 1.85823 8.91828C1.89768 9.09005 1.98578 9.24682 2.11199 9.36983L5.9763 13.1369L4.60962 19.0549C4.56812 19.234 4.58142 19.4215 4.64779 19.593C4.71417 19.7645 4.83055 19.9121 4.98183 20.0166C5.13312 20.1211 5.31233 20.1777 5.4962 20.1791C5.68008 20.1805 5.86013 20.1266 6.01299 20.0244L11.0073 16.6949L16.0017 20.0244C16.1579 20.1282 16.3422 20.1816 16.5297 20.1774C16.7171 20.1733 16.8989 20.1119 17.0504 20.0014C17.202 19.8909 17.316 19.7367 17.3773 19.5595C17.4386 19.3822 17.4441 19.1904 17.3931 19.01L15.7155 13.1397L19.8761 9.39551C20.1485 9.1497 20.2485 8.76629 20.1311 8.41866Z' fill='%234F5D46'/%3E%3C/svg%3E");
}

.blog_article__form-actions {
    display: flex;
    justify-content: flex-end;
}

.blog_article__form-submit {
    padding: 14px 32px;
    background: var(--color-green);
    color: var(--color-white);
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: var(--fs16);
    cursor: pointer;
    transition: background 0.25s ease;
}

.blog_article__form-submit:hover {
    background: var(--color-hover);
}

.blog_article__form-login {
    padding: 20px;
    background: var(--color-white);
    border-radius: 10px;
    color: var(--color-brown);
}