/* Article page: head, content typography (tips, price, partner buttons) and related posts (design/web-prototype.html). */
.article { padding-block: clamp(32px, 5vw, 64px) var(--section-y); }
.article h1 { margin: 0; font: 700 var(--fs-article-h1)/1.08 var(--font-display); letter-spacing: -0.025em; }
.perex { margin: var(--space-5) 0 0; font-size: clamp(19px, 0.5vw + 17px, 22px); line-height: 1.55; color: var(--fg-2); }
.article .byline { margin: var(--space-5) 0 0; }
.byline li { display: inline-flex; align-items: center; gap: 6px; }
.article .cover { margin: var(--space-6) 0 0; }
.byline + .prose { margin-top: var(--space-6); }
.cover + .prose { margin-top: var(--space-8); }

/* content blocks */
.prose p.sample-note { display: flex; gap: var(--space-3); margin: var(--space-6) 0 0; padding: var(--space-4); border: 1.5px dashed var(--border-strong); border-radius: var(--radius-md); font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--fg-2); }
.prose p.sample-note::before { content: ""; flex: none; width: 18px; height: 18px; background: var(--muted); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 11v5.5M12 7.8v.2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 11v5.5M12 7.8v.2'/%3E%3C/svg%3E") center / contain no-repeat; }
.prose .idea { padding-block: clamp(32px, 4vw, 48px); border-bottom: 1px solid var(--border); }
.prose .idea h2 { margin: 0; font: 700 clamp(22px, 1vw + 18px, 28px)/1.18 var(--font-display); letter-spacing: -0.015em; }
.prose .idea h2 .num { color: var(--muted); margin-right: 6px; }
.prose .idea p { margin: var(--space-3) 0 0; font-size: var(--fs-lg); line-height: var(--lh-read); }
.prose .idea p.price-range { display: flex; align-items: center; gap: 6px; width: fit-content; margin-top: var(--space-4); padding: 4px 12px 4px 8px; border-radius: var(--radius-pill); background: var(--surface-sunken); font-weight: 700; font-size: var(--fs-sm); line-height: var(--lh-body); }
.prose .idea p.price-range::before { content: ""; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.2V4.5a1 1 0 0 1 1-1h7.7l8.3 8.3a1.5 1.5 0 0 1 0 2.1l-6.4 6.4a1.5 1.5 0 0 1-2.1 0z'/%3E%3Ccircle cx='8' cy='8' r='1.4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.2V4.5a1 1 0 0 1 1-1h7.7l8.3 8.3a1.5 1.5 0 0 1 0 2.1l-6.4 6.4a1.5 1.5 0 0 1-2.1 0z'/%3E%3Ccircle cx='8' cy='8' r='1.4'/%3E%3C/svg%3E") center / contain no-repeat; }
/* A photo in the group turns the tip into the prototype's two-column frame. */
.prose .idea:has(.wp-block-image) > .wp-block-group__inner-container { display: grid; grid-template-columns: 168px minmax(0, 1fr); column-gap: var(--space-6); align-items: start; }
.prose .idea:has(.wp-block-image) > .wp-block-group__inner-container > * { grid-column: 2; }
.prose .idea:has(.wp-block-image) .wp-block-image { grid-column: 1; grid-row: 1 / span 6; width: 168px; margin: 0; }
.prose .idea .wp-block-image img { width: 168px; height: 168px; object-fit: cover; border-radius: var(--radius-lg); }

/* partner link: the "Partnerský odkaz" button style plus one note under the buttons */
.prose .aff { margin-top: var(--space-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.prose .aff .wp-block-buttons { margin: 0; }
.prose .wp-block-button.is-style-partner .wp-block-button__link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0 var(--space-5); border: 1.5px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--fg); font: 700 var(--fs-sm)/1.2 var(--font-body); letter-spacing: 0.01em; text-decoration: none; transition: background-color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease); }
.prose .wp-block-button.is-style-partner .wp-block-button__link:hover { background: var(--surface-sunken); border-color: var(--fg-2); }
.prose .wp-block-button.is-style-partner .wp-block-button__link::after { content: ""; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4.5h5.5V10M19.5 4.5l-8 8M17 13.5V18a1.5 1.5 0 0 1-1.5 1.5H6A1.5 1.5 0 0 1 4.5 18V8.5A1.5 1.5 0 0 1 6 7h4.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4.5h5.5V10M19.5 4.5l-8 8M17 13.5V18a1.5 1.5 0 0 1-1.5 1.5H6A1.5 1.5 0 0 1 4.5 18V8.5A1.5 1.5 0 0 1 6 7h4.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.prose .aff .aff-note { flex-basis: 100%; margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); }
@media (max-width: 600px) {
  .prose .idea:has(.wp-block-image) > .wp-block-group__inner-container { display: block; }
  .prose .idea:has(.wp-block-image) .wp-block-image { width: 100%; margin-bottom: var(--space-4); }
  .prose .idea .wp-block-image img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
}

/* related posts */
.related { margin-top: var(--section-y); }
.related .h2 { font-size: var(--fs-2xl); margin-bottom: var(--space-6); }