/* ==========================================================
   HERO
========================================================== */

.sh-hero {
  position: relative;
  min-height: 600px;
  height: 75vh;
  display: flex;
  align-items: center;
  background: var(--sh-color-bg);
}


.sh-hero::before {
  content: "";
  position: absolute;
  inset: 0;

  left: clamp(10px, 2vw, 32px);
  right: clamp(10px, 2vw, 32px);

  border-radius:var(--sh-radius-md);

  background:
    linear-gradient(
      to right,
      rgba(46, 37, 34, 0.6) 0%,
      rgba(46, 37, 34, 0.2) 100%
    ),
    url("https://799426.myshoptet.com/user/documents/upload/ze_zaprazi_hero_2.jpg");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  z-index: 0;
}

.sh-hero .container {
  position: relative;
  z-index: 1;

  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: clamp(20px, 5vw, 72px);
  padding-right: clamp(20px, 5vw, 72px);
}

.sh-hero__content {
  max-width: 900px;
  color: var(--sh-color-text-inverse);
}

.sh-hero__title {
  font-size: var(--sh-heading-hero);
  line-height: var(--sh-line-height-heading);
  font-weight: var(--sh-font-weight-heading);
  color: var(--sh-color-text-inverse) !important;
  margin: 0 0 var(--sh-space-title-gap);
}

.sh-hero__subtitle {
  font-size: var(--sh-text-xl);
  line-height: 1.6;
  font-weight: var(--sh-font-weight-medium);
  color: var(--sh-color-text-inverse-muted) !important;
  margin: 0 0 var(--sh-space-lead-gap);
}

.sh-hero__actions {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.sh-hero__actions a,
.sh-hero__actions .btn {
  width: auto !important;
  min-width: 200px;
  flex: 0 1 auto;
  justify-content: center;
}

/* FULL WIDTH FIX – Shoptet banner wrapper */
.next-to-carousel-banners,
.next-to-carousel-banners .banner-wrapper,
.banner-wrapper:has(.sh-combined-section) {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* ==========================================================
   COMBINED SECTION
========================================================== */

.sh-combined-section {
  background-color: var(--sh-color-bg);
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.sh-combined-section .sh-container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-inline: var(--sh-space-page) !important;
  box-sizing: border-box;
}


/* ==========================================================
   ATMO
========================================================== */

.sh-atmosphere {
  padding-top: var(--sh-space-section);
  padding-bottom: var(--sh-space-md);

  text-align: left;
}

.sh-atmosphere__quote {
  max-width: 75%;
  margin: 0;
  padding: 0;
  border: none;

  font-family: var(--sh-font-family-headings);
  font-size: var(--sh-heading-sm);
  line-height: var(--sh-line-height-heading-body);
  font-weight: var(--sh-font-weight-heading);
  font-style: normal;
  letter-spacing:normal;

  color: var(--sh-color-text);
  text-align: left;
}


/* ==========================================================
   SEGMENTATION SECTION
========================================================== */

.sh-segmentation-section {
  padding-top: var(--sh-space-section);
  padding-bottom: var(--sh-space-md);
}


/* ==========================================================
   SEGMENTATION INTRO
========================================================== */

.sh-segmentation-intro {
  margin-bottom: var(--sh-space-md);
}

.sh-segmentation-intro__label {
  margin: 0 0 var(--sh-space-xs);

  font-size: var(--sh-text-xs);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: var(--sh-font-weight-bold);
  color: var(--sh-color-accent);
}

.sh-segmentation-intro__title {
  max-width: 900px;
  margin: 0;

  font-family: var(--sh-font-family-headings);
  font-size: var(--sh-heading-md);
  line-height: var(--sh-line-height-heading-sm);
  font-weight: var(--sh-font-weight-heading);

  color: var(--sh-color-text);
}


/* ==========================================================
   SEGMENTATION CARDS
========================================================== */

.sh-segmentation {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sh-space-md);
}

.sh-segment-card {
  display: flex;
  flex-direction: column;
  border-radius: 0;
overflow: hidden;

  text-decoration: none !important;
  color: inherit;
}

.sh-segment-card__image-wrapper {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
border-radius: var(--sh-radius-md);
  margin-bottom: var(--sh-space-sm);
}

.sh-segment-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
  border-radius: inherit;
}

.sh-segment-card__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.sh-segment-card__title {
  margin: 0 0 var(--sh-space-xs);

  font-family: var(--sh-font-family-headings);
  font-size: var(--sh-heading-sm);
  line-height: var(--sh-line-height-heading-sm);
  font-weight: var(--sh-font-weight-heading);

  color: var(--sh-color-text);
}

.sh-segment-card__desc {
  margin: 0 0 var(--sh-space-sm);
  font-size: var(--sh-text-base);
  line-height: var(--sh-line-height-body);
  font-weight: var(--sh-font-weight-body);
  color: var(--sh-color-text);
}

.sh-segment-card .sh-btn {
  margin-top: auto;
}

/* 4 dlaždice vedle sebe — plná jedle jako výchozí stav (navigace do
   sekce, ne transakční akce). Šípek/CTA necháváme pro Do košíku /
   Nakoupit teď jinde na stránce. Hover ztmavne (stejná logika jako
   všude jinde na webu — outline by na hoveru působilo jako "míň
   důležité", přesně obráceně, než co má hover signalizovat). */
.sh-segment-card .sh-btn {
  background: var(--sh-color-active) !important;
  border: 1.5px solid var(--sh-color-active) !important;
  color: var(--sh-color-bg) !important;
}

.sh-segment-card:hover .sh-btn,
.sh-segment-card .sh-btn:hover {
  background: var(--sh-color-active-hover) !important;
  border-color: var(--sh-color-active-hover) !important;
  color: var(--sh-color-bg) !important;
  transform: var(--sh-btn-hover-transform);
  box-shadow: var(--sh-btn-hover-shadow);
}

.sh-segment-card:hover .sh-segment-card__image {
  transform: scale(1.03);
}


/* ==========================================================
   TABLET HERO  + ATMO + SEGMENTACE
========================================================== */

@media (max-width: 991px) {

  .sh-hero {
    height: auto;
    min-height: 500px;
    padding: 88px 0;
    background: var(--sh-color-bg);
  }

  .sh-hero__actions {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 15px;
  }

  .sh-hero__actions a,
  .sh-hero__actions .btn {
    width: auto !important;
    min-width: 200px;
    max-width: 100%;
    flex: 0 1 auto;
  }

  .sh-atmosphere {
 /*   margin-bottom: 60px;*/
  }

  .sh-segmentation{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
    row-gap:56px;
}

}

/* ==========================================================
   MOBILE HERO + ATMO + SEGMENTACE
========================================================== */

@media (max-width: 767px) {

  .sh-hero {
    min-height: auto;
    padding: 60px 0;
    background: var(--sh-color-bg);
  }

  .sh-hero__title {
    font-size: clamp(2.5rem, 2rem + 4vw, 3.25rem);
  }

  .sh-hero__actions {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;
  }

  .sh-hero__actions a,
  .sh-hero__actions .btn {
    width: auto !important;
    min-width: min(200px, 100%);
    max-width: 100%;
    flex: 0 1 auto;
  }

  .sh-combined-section {
    padding: 0 0 var(--sh-space-section-mobile);
  }

  .sh-atmosphere {
   /*   margin-bottom: 40px;*/
  }

  .sh-atmosphere__quote {
    max-width: 100%;
  }

  .sh-segmentation{
      grid-template-columns:1fr;
      gap:24px;
      row-gap:64px;
  }

  .sh-segment-card__image-wrapper {
    aspect-ratio: 4 / 3;
  }

}



/* ==========================================================
   VALUES SECTION
========================================================== */

.sh-values-section {

    padding-top: var(--sh-space-section);
    padding-bottom: var(--sh-space-md);
    width:100%;
}


/* GRID */

.sh-values {
    display: grid;
    grid-template-columns: 2fr 3fr;
    width: 100%;
}

/* IMAGE */

.sh-values__image {

    border-radius:var(--sh-radius-md);
    overflow:hidden;

    height:100%;

}

.sh-values__image img{

    width:100%;
    height:100%;

    object-fit:cover;
    display:block;

}

/* INTRO */

/* obsah zarovnaný na spodní hranu obrázku vedle – grid řádek se pořád
   stretchuje na výšku obrázku (.sh-values__image potřebuje height:100%
   pro object-fit:cover), takže zarovnání řešíme flexem uvnitř bloku,
   ne align-items na .sh-values */
.sh-values__content{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding-left: clamp(48px,6vw,120px);
    padding-top: var(--sh-space-sm);
}

.sh-values-intro{

    margin-bottom:var(--sh-space-md);

}

.sh-values-intro__label{

    margin:0 0 var(--sh-space-xs);

    font-size:var(--sh-text-xs);
    font-weight:var(--sh-font-weight-medium);

    letter-spacing:2px;
    text-transform:uppercase;

    color: var(--sh-color-accent);

}

.sh-values-intro__title{

    margin:0;

    max-width:900px;

    font-family:var(--sh-font-family-headings);
    font-size:var(--sh-heading-md);

    line-height:var(--sh-line-height-heading-sm);
    font-weight:var(--sh-font-weight-heading);

    color:var(--sh-color-text);

}

/* BLURBS*/

.sh-values-list{

    display:flex;
    flex-direction:column;
    gap:var(--sh-space-md);

}

.sh-value{

    display:flex;
    flex-direction:column;

}

.sh-value__heading{

    display:flex;
    flex-direction:column;

    align-items:flex-start;

    gap:var(--sh-space-xs);

    margin-bottom:var(--sh-space-xs);

}

.sh-value__number{

    display:block;

    font-family:var(--sh-font-family-headings);
    font-size:var(--sh-text-xl);

    font-weight:var(--sh-font-weight-heading);

    color: var(--sh-color-accent);

    line-height:1;
}

.sh-value__title{

    margin:0;

    font-family:var(--sh-font-family-headings);

    font-size:var(--sh-heading-sm);

    line-height:var(--sh-line-height-heading-sm);

    font-weight:var(--sh-font-weight-heading);

    color:var(--sh-color-text);

}

.sh-value__text{

    margin:0;

    font-size:var(--sh-text-base);
    font-weight:var(--sh-font-weight-body);

    line-height:var(--sh-line-height-body);

    color:var(--sh-color-text);

}

/* TABLET VALUES */

@media (max-width: 991px){

    .sh-values{
        grid-template-columns:1fr;
    }

    .sh-values__content{
        padding-left:0;
        padding-top:var(--sh-space-md);
    }

}

/* VALUES MOBILE */

@media (max-width:767px){

.sh-value__heading{

    flex-direction:column;
    gap:var(--sh-space-xs);

    align-items:flex-start;

}

}


/* ==========================================================
   BENEFIT BANNERS
========================================================== */



.content-wrapper {
    background: var(--sh-color-bg) !important;
}

/* BENEFIT BANNERS */

#content-wrapper.container {
    width: 100% !important;
    max-width: none !important;

    padding-inline: var(--sh-space-page) !important;
    box-sizing: border-box;
    padding-bottom: var(--sh-space-section);
}

.content-wrapper-in {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.container-full-width {
    width: 100% !important;
    max-width: none !important;

    padding-left: var(--sh-space-page) !important;
    padding-right: var(--sh-space-page) !important;

    box-sizing: border-box;
}

.benefitBanner {
    width: 100% !important;
    max-width: none !important;
    justify-content: flex-start !important;
}

.benefitBanner .benefitBanner__item,
.benefitBanner .benefitBanner__link {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

.benefitBanner__item {
    padding-right: var(--sh-space-sm);
}

.benefitBanner__item:last-child {
    padding-right: 0;
}

.benefitBanner .benefitBanner__picture {
    margin: 0 0 var(--sh-space-sm) 0 !important;
    padding: 0 !important;
}

.benefitBanner .benefitBanner__content {
    width: 100%;
    padding: 0 !important;
    text-align: left !important;
}
@media (min-width: 992px) {
    .benefitBanner__item {
        padding-right: var(--sh-space-md);
    }

    .benefitBanner__item:last-child {
        padding-right: 0;
    }
}

/* ==========================================================
   CONTENT
========================================================== */

body.type-index .content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ==========================================================
   PRODUCTS ON HOMEPAGE
========================================================== */

.homepage-group-title.homepage-products-heading-1,
.homepage-group-title.homepage-products-heading-2,
.homepage-group-title.homepage-products-heading-5 {
    margin-top: var(--sh-space-section);
    margin-bottom: var(--sh-space-sm);

    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-heading-md);
    line-height: var(--sh-line-height-heading-sm);
    font-weight: var(--sh-font-weight-heading);
    letter-spacing: 0;
}


.homepage-products-heading-1,
.homepage-products-heading-2,
.homepage-products-heading-5 {
  margin: 0 0 var(--sh-space-md);
  padding: 0;

  font-family: var(--sh-font-family-headings);
  font-size: var(--sh-heading-md);
  line-height: var(--sh-line-height-heading-sm);
  font-weight: var(--sh-font-weight-heading);
  letter-spacing: 0;

  color: var(--sh-color-text);
  text-align: center;
}


/* PRODUCT CARDS */

.p .image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: transparent;
    border-radius: var(--sh-radius-md);
}

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

/* PRODUCT CODE */

.products-block > div .p .p-code {
    display: block;

    padding-top: var(--sh-space-xs);

    font-size: var(--sh-text-xs);
    font-weight: var(--sh-font-weight-body);
    line-height: var(--sh-line-height-body);
    letter-spacing: 0.08em;

    color: var(--sh-color-text);
    opacity: .65;

    order: 2;
    text-align: right;
    text-transform: uppercase;
}

/* PRODUCT NAME */

.products-block > div .p .p-in .p-in-in .name {
    font-size: var(--sh-text-lg);
    font-weight: var(--sh-font-weight-heading);
    line-height: var(--sh-line-height-heading-sm);
    letter-spacing: 0;

    color: var(--sh-color-text);

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;

    min-height: calc(var(--sh-text-lg) * var(--sh-line-height-heading-sm) * 2);
}

/* ==========================================================
   PRODUCT FLAGS
========================================================== */

/* společné nastavení */

.flag,
.flags-default .flag,
.products-block .flags-default .flag {

    border-radius: var(--sh-radius-md) !important;

    font-family: var(--sh-font-family-body);
    font-size: var(--sh-text-base);
    font-weight: var(--sh-font-weight-heading);
    line-height: 1.5;

    padding:
        calc(var(--sh-space-xs) * .75)
        var(--sh-space-sm);

    letter-spacing: 0;
    text-transform: none;

    min-width: auto;
}


/* desktop */

@media (min-width: 992px) {

    .flags-default .flag,
    .products-block .flags-default .flag {

        font-size: var(--sh-text-base);
        font-weight: var(--sh-font-weight-heading);
        line-height: 1.3;

        padding:
            calc(var(--sh-space-xs) * .75)
            var(--sh-space-sm);

        min-width: auto;
    }

}

.p-in,
.p-in-in,
.p-bottom,
.prices,
.availability,
.p-desc,
.p-tools {
    text-align: left !important;
}

.p-tools .btn,
.p-tools .btn-cart,
.add-to-cart-button {
    width: 100%;
    justify-content: center;
    margin-top:var(--sh-space-xs);
}

/* ==========================================================
   HOMEPAGE – SKRÝT POSLEDNÍ HODNOCENÍ
========================================================== */

.homepage-latest-contribution-full-width {
    display: none !important;
}

/* ==========================================================
   GALLERY + DELIVERY – FULL WIDTH FIX
========================================================== */

.homepage-banners-full-width.middle-banners
.banner-wrapper:has(.sh-gallery-delivery-section) {
    width: 100vw !important;
    max-width: none !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

.homepage-banners-full-width.middle-banners
.banner-wrapper:has(.sh-gallery-delivery-section) > span[data-ec-promo-id] {
    display:block !important;

    width:100% !important;
    max-width:none !important;
    min-width:100% !important;

    margin:0 !important;
    padding:0 !important;
}


/* ==========================================================
  DELIVERY – WRAPPER
========================================================== */

.sh-gallery-delivery-section {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    background: var(--sh-color-bg);
}

.sh-gallery-delivery__inner {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    padding-left: var(--sh-space-page) !important;
    padding-right: var(--sh-space-page) !important;

    box-sizing: border-box;
}



/* ==========================================================
   DELIVERY SECTION
========================================================== */

.sh-delivery-section {
    padding-top: var(--sh-space-section);
    padding-bottom: var(--sh-space-md);

    text-align: left;
}


/* delivery intro */

.sh-delivery-intro {
    max-width: 100%;
    margin: 0 0 var(--sh-space-md);

    text-align: left;
}

.sh-delivery-intro__label {
    margin: 0 0 var(--sh-space-xs);

    font-family: var(--sh-font-family-body);
    font-size: var(--sh-text-xs);
    font-weight: var(--sh-font-weight-medium);
    line-height: var(--sh-line-height-body);

    letter-spacing: 2px;
    text-transform: uppercase;

    color: var(--sh-color-accent);
    text-align: left;
}

.sh-delivery-intro__title {
    max-width: 900px;
    margin: 0 0 var(--sh-space-sm);

    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-heading-md);
    font-weight: var(--sh-font-weight-heading);
    line-height: var(--sh-line-height-heading-sm);

    color: var(--sh-color-text);
    text-align: left;
}

.sh-delivery-intro__text {
    max-width: 900px;
    margin: 0;

    font-family: var(--sh-font-family-body);
    font-size: var(--sh-text-base);
    font-weight: var(--sh-font-weight-body);
    line-height: var(--sh-line-height-body);

    color: var(--sh-color-text);
    text-align: left;
}


/* DELIVERY FEATURES */

.sh-delivery-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sh-space-md);

    width: 100%;
}

.sh-delivery-feature {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-width: 0;

    text-align: left;
}

.sh-delivery-feature__icon {
    width: 48px;
    height: 48px;

    margin-bottom: var(--sh-space-sm);

    color: var(--sh-color-accent);
}

.sh-delivery-feature__icon svg {
    display: block;

    width: 100%;
    height: 100%;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sh-delivery-feature__title {
    margin: 0 0 var(--sh-space-xs);

    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-heading-sm);
    font-weight: var(--sh-font-weight-heading);
    line-height: var(--sh-line-height-heading-sm);

    color: var(--sh-color-text);
    text-align: left;
}

.sh-delivery-feature__text {
    margin: 0;

    font-family: var(--sh-font-family-body);
    font-size: var(--sh-text-base);
    font-weight: var(--sh-font-weight-body);
    line-height: var(--sh-line-height-body);

    color: var(--sh-color-text);
    text-align: left;
}

/* mezera, když je text rozdělený do víc <p> odstavců */
.sh-delivery-feature__text + .sh-delivery-feature__text {
    margin-top: var(--sh-space-xs);
}

/* odkaz pod sloupcem – 1:1 podle .read-article ("Číst článek" u blogu,
   viz blog.css), jen font-weight bold místo heading. Bez margin-top:auto
   – sedí hned pod textem s malým odstupem, ne na spodním okraji karty.
   !important na color: pokud sekce sedí uvnitř .banner-wrapper (běžné
   u vlastních HTML bloků), main-14 ".banner-wrapper a" má 2 třídy+tag,
   tedy vyšší specificitu než naše jedna třída, a barvu by přebilo. */
.sh-delivery-feature__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    margin-top: var(--sh-space-sm);

    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-text-base);
    font-weight: var(--sh-font-weight-bold);
    color: var(--sh-color-accent) !important;

    text-decoration: none;

    transition: var(--sh-transition);
}

/* když má karta 2 odkazy pod sebou (např. "Jak balíme produkty" +
   "Doprava a výdejní místa"), main-14 dá i druhému stejný margin-top
   jako od textu nad ním — zbytečně velká mezera mezi dvěma odkazy */
.sh-delivery-feature__link + .sh-delivery-feature__link {
    margin-top: var(--sh-space-xs);
}

.sh-delivery-feature__link i {
    margin-left: 4px;
}

.sh-delivery-feature__link:hover {
    color: var(--sh-color-accent-hover) !important;
}


/* ==========================================================
   TABLET DELIVERY
========================================================== */

@media (max-width:991px){

    .sh-delivery-features{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}


/* ==========================================================
   MOBILE DELIVERY
========================================================== */

@media (max-width:767px){

    .sh-delivery-section{
        padding-top:var(--sh-space-section-mobile);
        padding-bottom:var(--sh-space-section-mobile);
    }

    .sh-delivery-features{
        grid-template-columns:1fr;
        gap:var(--sh-space-md);
    }

}

/* ==========================================================
   WELCOME WRAPPER – SHOPTET RESET
========================================================== */

.welcome-wrapper{
    width:100%;
    max-width:none;

    margin:0;
    padding:0;

    background:var(--sh-color-bg);
}

.welcome{
    width:100%;
    max-width:none;

    margin:0;
    padding:0;
}

/* main-14 dává na body.one-column-body stránkách (min-width:768px)
   pravidlo ".one-column-body .welcome-wrapper .welcome" se 3 třídami
   (80% width, margin auto) — přebíjí náš plain ".welcome" o jednu
   třídu, takže sekce byla užší a vycentrovaná místo přes celou šířku
   jako zbytek webu. */
.one-column-body .welcome-wrapper .welcome {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* ==========================================================
   PROČ VZNIKLO ZE ZÁPRAŽÍ + INSTAGRAM
========================================================== */

.welcome .sh-origin-social{

    width:100%;
    max-width:none;

    margin:0;

    padding-top:var(--sh-space-section);
    padding-bottom: var(--sh-space-md);

    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:var(--sh-space-page);

    box-sizing:border-box;
}

.welcome .sh-origin-social,
.welcome .sh-origin-social *{
    box-sizing:border-box;
}


/* ==========================================================
   SPOLEČNÉ PRVKY
========================================================== */

.sh-origin-social__label{

    display:block;

    margin:0 0 var(--sh-space-xs);

    font-family:var(--sh-font-family-body);
    font-size:var(--sh-text-xs);
    font-weight: var(--sh-font-weight-medium);
    letter-spacing: 2px;

    letter-spacing:.08em;
    text-transform:uppercase;

    color: var(--sh-color-accent);
}

.sh-origin-social__title,
.sh-origin-social__instagram-title{

    margin:0;

    font-family:var(--sh-font-family-headings);
    font-weight:var(--sh-font-weight-heading);
    line-height:var(--sh-line-height-heading);
    color:var(--sh-color-text);
}


/* ==========================================================
   PŘÍBĚH
========================================================== */

.sh-origin-social__story{

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    min-width:0;
    max-width:680px;
}

.sh-origin-social__title{

    margin-bottom:var(--sh-space-md);
    font-size:var(--sh-heading-md);
}

.sh-origin-social__text p{

    margin:0 0 var(--sh-space-sm);
    font-family:var(--sh-font-family-body);
    font-size:var(--sh-text-base);
    font-weight:var(--sh-font-weight-body);
    line-height:1.7;

    color:var(--sh-color-text);

    text-align:left;
}

.sh-origin-social__text p:last-child{
    margin-bottom:0;
}


/* ==========================================================
   BLOG LINK
========================================================== */

/* obal na "Číst blog" + nové sekundární tlačítko vedle sebe – mezera
   stejná jako u .sh-hero__actions (15px desktop/tablet, 12px mobil) */
.sh-origin-social__actions{

    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:15px;

    margin-top:var(--sh-space-md);
}

/* sekundární tlačítko vedle plného "Číst blog" — obrys v inkoustové
   barvě (ne CTA), ať vedle sebe drží dvoustupňovou hierarchii */
.sh-origin-social__actions .sh-btn--outline{
    color: var(--sh-color-secondary-btn) !important;
    border-color: var(--sh-color-secondary-btn);
}

.sh-origin-social__actions .sh-btn--outline:hover{
    background: var(--sh-color-secondary-btn);
    color: var(--sh-color-bg) !important;
    border-color: var(--sh-color-secondary-btn);
}

@media (max-width: 767px){

    .sh-origin-social__actions{
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

}

.sh-origin-social__blog-link{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:14px 40px;

    background:var(--sh-color-cta);
    color:var(--sh-color-text-inverse) !important;

    /* border ve stejné barvě jako pozadí – neviditelný, ale zarovná
       box-model se sousedním outline tlačítkem (1.5px border navíc) */
    border:1.5px solid var(--sh-color-cta);
    border-radius:var(--sh-radius-btn);

    font-family:var(--sh-font-family-headings);
    font-size:var(--sh-text-base);
    font-weight:var(--sh-font-weight-body);

    text-decoration:none !important;

    transition:var(--sh-transition);
}

.sh-origin-social__blog-link:hover{

    background:var(--sh-color-cta-hover);
    border-color:var(--sh-color-cta-hover);
    color:var(--sh-color-text-inverse) !important;

    transform: var(--sh-btn-hover-transform);
    box-shadow: var(--sh-btn-hover-shadow);

}

.sh-origin-social__blog-link span{
    display:none;
}

/* ==========================================================
   INSTAGRAM
========================================================== */

.sh-origin-social__instagram{

    min-width:0;
}

.sh-origin-social__instagram-header{

    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:var(--sh-space-sm);
    margin-bottom:var(--sh-space-md);
}

.sh-origin-social__instagram-title{

    font-size:var(--sh-heading-md);
}

.sh-origin-social__instagram-link{

    flex-shrink:0;

    padding-bottom:4px;

    border-bottom:1px solid currentColor;

    font-family:var(--sh-font-family-body);
    font-size:var(--sh-text-base);
    font-weight:var(--sh-font-weight-heading);

    color:var(--sh-color-text);

    text-decoration:none;

    transition:var(--sh-transition);
}

.sh-origin-social__instagram-link:hover,
.sh-origin-social__instagram-link:focus-visible{

    color: var(--sh-color-accent);
}


/* ==========================================================
   INSTAGRAM FEED
========================================================== */

.sh-origin-social__feed{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:var(--sh-space-xs);
}

.sh-origin-social__photo{

    position:relative;

    display:block;

    aspect-ratio:1;

    overflow:hidden;

    border-radius:var(--sh-radius-md);

    background:var(--sh-color-cta-subtle);
}

.sh-origin-social__photo img{

    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .6s cubic-bezier(.25,1,.5,1);
}

.sh-origin-social__photo:hover img,
.sh-origin-social__photo:focus-visible img{

    transform:scale(1.04);
}

/* ==========================================================
   h1
==*/

.welcome > .h1{
    display:none;
}

/* ==========================================================
   TABLET WELCOME
========================================================== */

@media (max-width:991px){

    .welcome .sh-origin-social{

        grid-template-columns:1fr;

        gap:var(--sh-space-page);
       row-gap: var(--sh-space-section);
    }

    /* row-gap samotný nestačí jako odstup mezi sloupci po zalomení na
       1 sloupec — druhý blok (Instagram) dostává navíc horní padding */
    .sh-origin-social__instagram{
        padding-top: var(--sh-space-md);
    }

    .sh-origin-social__story{

        max-width:760px;
    }

}


/* ==========================================================
   MOBILE WELCOME
========================================================== */

@media (max-width:767px){

    .welcome .sh-origin-social{

        gap:var(--sh-space-md);
        row-gap: var(--sh-space-section);

        padding-top:var(--sh-space-section-mobile);
        padding-bottom:var(--sh-space-section-mobile);
    }

    .sh-origin-social__instagram-header{

        flex-direction:column;
        align-items:flex-start;
    }

    .sh-origin-social__feed{

        gap:8px;
    }

}