/* ===================================================
   ARTICLE.CSS — univerzálny štýl pre všetky články
   Prefix: nws- (news) — izolácia od ostatných stránok
   Použitie: <link rel="stylesheet" href="article.css">
   =================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,400&family=Source+Serif+4:wght@300;400&family=DM+Mono&display=swap');

/* --- Wrapper --- */
.nws-nw {
  max-width: 680px;
  margin: 0 auto;
  padding: 2rem 2rem 3rem;
  font-family: 'Source Serif 4', Georgia, serif;
  color: #1a1008;
  box-sizing: border-box;
}

.nws-nw *,
.nws-nw *::before,
.nws-nw *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --- Masthead --- */
.nws-masthead {
  text-align: center;
  border-bottom: 3px double #1a1008;
  padding-bottom: 1rem;
  margin-bottom: .75rem;
}

.nws-headline {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.3px;
  margin-bottom: .5rem;
}

.nws-subhead {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  font-weight: 400;
  color: #7a6a55;
  line-height: 1.4;
}

.nws-meta {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: #7a6a55;
  letter-spacing: .06em;
  margin-top: .5rem;
}

.nws-meta .nws-sep {
  margin: 0 6px;
  opacity: .4;
}

/* --- Dividers --- */
.nws-divider {
  border: none;
  border-top: .5px solid #c4a97a;
  margin: .75rem 0 1rem;
}

.nws-footer-rule {
  border: none;
  border-top: 3px double #1a1008;
  margin: 1.5rem 0 .65rem;
}

/* --- Brand pills --- */
.nws-brands {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.nws-brand {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  padding: 2px 8px;
  border: .5px solid #c4a97a;
  border-radius: 20px;
  color: #7a6a55;
}

/* --- Lead paragraph --- */
.nws-lead {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.7;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: .5px solid #c4a97a;
}

/* --- Body text --- */
.nws-nw p {
  font-size: 15px;
  line-height: 1.75;
  margin-bottom: .8rem;
}

.nws-nw p:last-child {
  margin-bottom: 0;
}

/* --- Two-column layout --- */
.nws-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

/* --- Section heading --- */
.nws-section-head {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  margin: 1.25rem 0 .5rem;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.nws-section-head::after {
  content: '';
  flex: 1;
  height: .5px;
  background: #c4a97a;
}

/* --- Pull quote --- */
.nws-pull-quote {
  border-left: 3px solid #1a1008;
  margin: 1rem 0;
  padding: .6rem 1rem;
  background: #ede5d0;
  border-radius: 0 4px 4px 0;
}

.nws-pull-quote p {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}

/* --- Typ rows (comparison items) --- */
.nws-typ-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .25rem 1.5rem;
  margin: .75rem 0;
  padding: .75rem 0;
  border-top: .5px solid #c4a97a;
}

.nws-typ-row:last-of-type {
  border-bottom: .5px solid #c4a97a;
}

.nws-typ-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 14px;
  font-weight: 700;
  grid-column: 1 / -1;
  margin-bottom: .1rem;
}

.nws-typ-detail {
  font-size: 13.5px;
  line-height: 1.5;
  color: #7a6a55;
}

.nws-typ-detail strong {
  color: #1a1008;
  font-weight: 600;
}

/* --- Infobox --- */
.nws-infobox {
  border-top: .5px solid #c4a97a;
  border-bottom: .5px solid #c4a97a;
  margin: 1.25rem 0;
  padding: .9rem 0;
}

.nws-infobox-title {
  /*font-family: 'DM Mono', monospace;*/
  /*font-size: 14px;*/
  letter-spacing: .12em;
  /*text-transform: uppercase;*/
  /*color: #7a6a55;*/
  margin-bottom: .6rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 17px;
  font-weight: 700;
  /*line-height: 1.2;*/
  /*margin: 1.25rem 0 .5rem;*/
  display: flex;
  /*align-items: baseline;*/
  /*gap: 10px;*/
}

/* --- Brand / ingredient table --- */
.nws-brand-table,
.nws-ingredient-table {
  width: 100%;
  border-collapse: collapse;
  margin: .75rem 0 1rem;
  font-size: 14px;
}

.nws-brand-table thead tr,
.nws-ingredient-table thead tr {
  border-bottom: 1px solid #c4a97a;
}

.nws-brand-table th,
.nws-ingredient-table th {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7a6a55;
  padding: .4rem .5rem .4rem 0;
  text-align: left;
  font-weight: 400;
}

.nws-brand-table td,
.nws-ingredient-table td {
  padding: .6rem .5rem .6rem 0;
  border-bottom: .5px solid #c4a97a;
  vertical-align: top;
  font-size: 13.5px;
  line-height: 1.55;
  color: #1a1008;
}

.nws-brand-table td:first-child,
.nws-ingredient-table td:first-child {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  padding-right: 1rem;
  color: #1a1008;
}

/* --- Region tag (inside table cell) --- */
.nws-region-tag {
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #7a6a55;
  font-weight: 400;
  margin-top: 2px;
}

/* --- Tip grid --- */
.nws-tip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: .75rem 0 1rem;
}

.nws-tip-card {
  border: .5px solid #c4a97a;
  border-radius: 4px;
  padding: .75rem;
  background: #ede5d0;
}

.nws-tip-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #1a1008;
  font-weight: 700;
  margin-bottom: .4rem;
}

.nws-tip-card p {
  font-size: 13.5px;
  line-height: 1.6;
  color: #1a1008;
  margin: 0;
}

/* --- Lead modifier: no bottom rule --- */
/* Use when the lead flows directly into a float-image block without visual separation */
.nws-lead--no-rule {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 1rem;
}

/* --- Float image (text wraps around image) --- */
/* Use instead of nws-cols when image should be inline with wrapping text */
.nws-img-float {
  overflow: hidden;
  margin-bottom: 1rem;
}

.nws-img-float img {
  float: left;
  width: 45%;
  margin: 0 1.25rem .5rem 0;
  display: block;
}

/* --- Footer note --- */
.nws-footer-note {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: #7a6a55;
  letter-spacing: .06em;
  text-align: center;
}