/* =========================================================
   SHOWA EU — blogbejegyzés (newsroom/article) elrendezés.

   Használja: ../../../template-showa-article.php.

   A styles.css PÁRJA, nem a helyettesítője: a sablon mindkettőt betölti, ez
   utána jön. Ami közös a főoldallal (rács, gombok, .banner alapgeometria,
   .testimonial, .tl-lines, .contact-card, .finder-*), az a styles.css-ben ül;
   ide csak az kerül, ami a cikkoldalon jelenik meg először.

   A szabályok az eredeti showagroup.com cikkoldalának stíluslapjából
   (themes/showa/assets/css/app.min.css) valók — ugyanazok az osztálynevek,
   méretek, színek és töréspontok. Az eredeti a bannermagasságot a body
   osztályáról vezérli (body.long-caption-banner → 460px); nálunk ugyanez a
   .banner.inner-banner módosítón ül, mert a bestlab body osztályaiba nem
   nyúlunk bele.

   MINDEN szabály a .blf-showa burkoló alá van tolva — lásd a styles.css
   fejlécében, hogy miért kötelező ez (a theme main.css-e ugyanazon a lapon
   fut, és a .container / .title / .body-copy nevek generikusak).
   ========================================================= */

/* ---------------------------------------------------------
   Rács-kiegészítés — a cikk fej- és idézetblokkja col-md-10-en ül,
   ilyen oszlop a főoldalon nem fordul elő.
   --------------------------------------------------------- */
@media (min-width:768px){
  .blf-showa .col-md-10{flex:0 0 83.333333%; max-width:83.333333%}
}
@media (max-width:990px){
  .blf-showa .news-article-head .row .col-md-10{flex:0 0 100%; max-width:100%}
}

/* Sima .title h5 — a styles.css csak a .dark/.white változatot adja meg. */
.blf-showa .title h5{font-weight:700; font-size:16px; line-height:28px; text-transform:uppercase; color:#212020}

/* =========================================================
   MORZSAMENÜ — a banner bal felső sarkában, a képre írva.
   ========================================================= */
.blf-showa .breadcrumb-wrap{position:absolute; width:100%; z-index:99; margin-top:20px}
.blf-showa .breadcrumb-wrap ol.breadcrumb{
  display:flex; flex-wrap:wrap; list-style:none; margin:0; padding:0;
  font-weight:400; font-size:14px; line-height:29.6px; color:#fff;
}
.blf-showa .breadcrumb-wrap ol.breadcrumb li{position:relative; margin-right:15px}
.blf-showa .breadcrumb-wrap ol.breadcrumb li + li{padding-left:15px}
.blf-showa .breadcrumb-wrap ol.breadcrumb li + li:before{position:absolute; content:">"; left:0; font-size:14px}
.blf-showa .breadcrumb-wrap ol.breadcrumb li a{color:#fff; transition:all .4s ease-in-out}
.blf-showa .breadcrumb-wrap ol.breadcrumb li a:hover{color:#8fc547}
@media (max-width:720px){
  .blf-showa .breadcrumb-wrap ol.breadcrumb{font-size:12px; line-height:16px}
}

/* =========================================================
   BANNER — a főoldali 372px-es hero cikkváltozata: 460px, a cím
   nem alulra, hanem 134px-re ül (az eredeti long-caption-banner).
   ========================================================= */
.blf-showa .banner.inner-banner{height:460px; overflow:hidden}
.blf-showa .banner.inner-banner .banner-symbol{top:130px; z-index:99}
.blf-showa .banner.inner-banner .banner-inner-wrap{height:460px}
.blf-showa .banner.inner-banner .banner-inner-item .caption-wrapper .container{min-height:460px; height:460px}
.blf-showa .banner.inner-banner .banner-inner-item .caption-wrapper .container .caption{top:134px; bottom:auto; max-width:900px}
.blf-showa .banner.inner-banner .banner-inner-item .caption-wrapper .container .caption p{
  font-weight:400; font-size:16px; line-height:28px; color:#fff; margin-bottom:0;
}
/* A sötét alap a kép betöltéséig (és a mellett) tartja a cím kontrasztját. */
.blf-showa .banner.inner-banner .banner-inner-item .banner-bg{height:460px; background-color:#212020}
.blf-showa .banner.inner-banner .banner-inner-item .banner-bg img{height:460px}
@media (max-width:720px){
  .blf-showa .banner.inner-banner{height:355px}
  .blf-showa .banner.inner-banner .banner-inner-wrap{height:355px}
  .blf-showa .banner.inner-banner .banner-inner-item .caption-wrapper .container{min-height:355px; height:355px}
  .blf-showa .banner.inner-banner .banner-inner-item .caption-wrapper .container .caption{top:100px; bottom:auto}
  .blf-showa .banner.inner-banner .banner-inner-item .caption-wrapper .container .caption h1{max-width:100%; margin-bottom:23px}
  .blf-showa .banner.inner-banner .banner-inner-item .banner-bg{height:355px}
  .blf-showa .banner.inner-banner .banner-inner-item .banner-bg img{height:355px}
}

/* =========================================================
   CIKKFEJ — címke-/szerzősor és a kiemelt idézet.

   A .testimonial-t használja fel, de háttérkép és a tetején lévő sötét
   átmenet nélkül; ezért kapcsoljuk ki a styles.css :after gradiensét.
   ========================================================= */
.blf-showa .testimonial.news-article-head{padding:90px 0 0; background-image:none}
.blf-showa .testimonial.news-article-head:after{display:none}
@media (max-width:1200px){
  .blf-showa .testimonial.news-article-head{padding:50px 0 0}
}

.blf-showa .news-article-head .news-article-type{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;
  margin-bottom:20px; border-bottom:1px solid #1e1d1d; padding-bottom:10px;
}
.blf-showa .news-article-head .news-article-type .article .article-tags{
  display:flex; flex-wrap:wrap; align-items:center;
  font-weight:700; font-size:14px; line-height:29px; color:#818282;
}
.blf-showa .news-article-head .news-article-type .article .article-tags li + li{margin-left:5px}
.blf-showa .news-article-head .news-article-type .article .article-tags li a:hover{color:#8fc547}
.blf-showa .news-article-head .news-article-type .article h5{
  font-weight:700; font-size:14px; line-height:29px; color:#818282; text-transform:uppercase;
}
@media (max-width:720px){
  .blf-showa .news-article-head .news-article-type .article + .article{margin-top:20px}
}

/* Idézetdoboz — a bejegyzés kivonata, fekete alapon. */
.blf-showa .testimonial .content .testimonial-quotes{
  background-color:#fff; padding:60px; min-height:270px; position:relative;
  display:flex; align-items:center; justify-content:space-around; margin-top:60px;
}
.blf-showa .testimonial .content .testimonial-quotes .quote-contnet{max-width:675px}
.blf-showa .testimonial .content .testimonial-quotes .quote-contnet h4{
  font-weight:500; font-size:30px; line-height:42px; text-align:center; color:#212020; margin-bottom:40px;
}
/* Attribúció (h5) nélkül a h4 alatti 40px üresen maradna. */
.blf-showa .testimonial .content .testimonial-quotes .quote-contnet h4:last-child{margin-bottom:0}
.blf-showa .testimonial .content .testimonial-quotes .quote-contnet h5{
  font-weight:500; font-size:14px; line-height:26px; text-align:center; color:#818282; text-transform:uppercase;
}
.blf-showa .testimonial .content .testimonial-quotes.black-bg{background-color:#212020; margin-top:0}
.blf-showa .testimonial .content .testimonial-quotes.black-bg .quote-contnet h4{color:#fff}
.blf-showa .testimonial .content .testimonial-quotes.black-bg .quote-contnet h5{color:#8fc547}
@media (max-width:1200px){
  .blf-showa .testimonial .content .testimonial-quotes{padding:40px; min-height:auto; margin-top:40px}
  .blf-showa .testimonial .content .testimonial-quotes .quote-contnet h4{margin-bottom:26px}
  .blf-showa .testimonial .content .testimonial-quotes .quote-contnet h4:last-child{margin-bottom:0}
}
@media (max-width:720px){
  .blf-showa .testimonial .content .testimonial-quotes{padding:40px 20px; margin-top:30px; margin-left:-15px; margin-right:-15px}
  .blf-showa .testimonial .content .testimonial-quotes .quote-contnet h4{font-weight:500; font-size:20px; line-height:32px}
  .blf-showa .testimonial .content .testimonial-quotes .quote-contnet h4 br{display:none}
}

/* =========================================================
   CIKKTÖRZS — 8 oszlop széles szövegtest.
   ========================================================= */
.blf-showa .wide-content{padding:90px 0; position:relative}
.blf-showa .wide-content.news-article-wide-content{padding-bottom:0}
.blf-showa .wide-content.news-article-wide-content .content .row{position:relative; z-index:1}
.blf-showa .hand-symbol{position:absolute; top:85px; left:0; z-index:1}
@media (max-width:1365px){ .blf-showa .hand-symbol{display:none} }
@media (max-width:1200px){
  .blf-showa .wide-content{padding:50px 0}
  .blf-showa .wide-content .content{margin-bottom:-30px}
}
@media (max-width:990px){
  .blf-showa .wide-content .col-md-8{flex:0 0 100%; max-width:100%}
}

.blf-showa .wide-content .col-md-8 .title h5{margin-bottom:25px}
.blf-showa .wide-content .col-md-8 .body-copy p:last-child{margin-bottom:30px}
.blf-showa .wide-content .col-md-8 .body-copy ul{margin-bottom:20px}
.blf-showa .wide-content .col-md-8 .body-copy ul li{padding-left:20px; position:relative}
.blf-showa .wide-content .col-md-8 .body-copy ul li + li{margin-top:10px}
.blf-showa .wide-content .col-md-8 .body-copy ul li:before{
  position:absolute; content:""; width:4px; height:4px; left:0; top:8px;
  background-color:#000; border-radius:50%;
}

/* ---------------------------------------------------------
   A szerkesztő kimenete — az eredeti cikkek csak p / ul / strong /
   kép / link elemeket használnak, a WP szerkesztőjéből viszont
   címsor, számozott lista, idézet, táblázat és <figure> is jöhet.
   Ez a blokk azoknak ad a SHOWA tipográfiájához illő alapot.
   --------------------------------------------------------- */
.blf-showa .body-copy h2,
.blf-showa .body-copy h3,
.blf-showa .body-copy h4{color:#212020; text-transform:uppercase; margin:40px 0 20px}
.blf-showa .body-copy h2{font-weight:900; font-size:32px; line-height:36px}
.blf-showa .body-copy h3{font-weight:900; font-size:24px; line-height:30px}
.blf-showa .body-copy h4{font-weight:700; font-size:18px; line-height:26px}
.blf-showa .body-copy > *:first-child{margin-top:0}
.blf-showa .body-copy a{font-weight:700; text-decoration:underline}
.blf-showa .body-copy a:hover{color:#8fc547}
.blf-showa .body-copy strong{font-weight:700}
.blf-showa .body-copy ol{list-style:decimal; margin:0 0 20px; padding-left:20px}
.blf-showa .body-copy ol li + li{margin-top:10px}
.blf-showa .body-copy img{max-width:100%; height:auto; margin:0 auto}
.blf-showa .body-copy figure{margin:0 0 30px}
.blf-showa .body-copy figure figcaption{font-size:14px; line-height:20px; color:#818282; margin-top:10px}
.blf-showa .body-copy blockquote{
  margin:30px 0; padding:0 0 0 20px; border-left:4px solid #8fc547;
  font-weight:500; font-size:20px; line-height:30px;
}
.blf-showa .body-copy .wp-block-table,
.blf-showa .body-copy .blf-table-scroll{overflow-x:auto}
.blf-showa .body-copy table{width:100%; border-collapse:collapse; margin-bottom:30px; font-size:14px; line-height:22px}
.blf-showa .body-copy table th,
.blf-showa .body-copy table td{border:1px solid rgba(52,51,51,.2); padding:10px 12px; text-align:left}
.blf-showa .body-copy table th{background-color:#ebebeb; font-weight:700}
@media (max-width:720px){
  .blf-showa .body-copy h2{font-size:26px; line-height:30px}
  .blf-showa .body-copy h3{font-size:20px; line-height:26px}
}

/* =========================================================
   MEGOSZTÁS-SÁV + a mögötte futó dekorációs ívek.
   ========================================================= */
.blf-showa .social-media-icons{padding:90px 0; position:relative}
/* Az eredeti z-index:9-et ad a containernek, de position nélkül az nem hat;
   itt position:relative-vel ténylegesen az ívek elé kerül a tartalom. */
.blf-showa .social-media-icons .container{position:relative; z-index:9}
.blf-showa .social-media-icons .title h5{margin-bottom:20px; text-align:center}
.blf-showa .social-media-icons ul.social-icons{display:flex; justify-content:center; position:relative; z-index:1}
.blf-showa .social-media-icons ul.social-icons li + li{margin-left:45px}
@media (max-width:1200px){
  .blf-showa .social-media-icons{padding:50px 0 0}
  .blf-showa .social-media-icons ul.social-icons li + li{margin-left:15px}
}

.blf-showa .social-icon{
  display:flex; align-items:center; justify-content:center;
  width:90px; height:90px; border-radius:50%; background-color:#8fc547;
}
.blf-showa .social-icon .icon-wrap{
  width:81px; height:81px; background-color:#231f20; border:2px solid #fff; border-radius:50%;
  display:flex; align-items:center; justify-content:space-around;
}
.blf-showa .social-icon .icon-wrap .icon{display:block; color:#fff; transition:all .4s ease-in-out}
.blf-showa .social-icon .icon-wrap .icon svg{display:block; width:30px; height:30px}
.blf-showa .social-icon:hover .icon-wrap .icon{color:#8fc547}
@media (max-width:990px){
  .blf-showa .social-icon{width:52px; height:52px}
  .blf-showa .social-icon .icon-wrap{width:48px; height:48px; border-width:1px}
  .blf-showa .social-icon .icon-wrap .icon svg{width:18px; height:18px}
}

/* Az ívek szándékosan lógnak ki a szekcióból (az eredetin is), ezért
   pointer-events:none — dekoráció, ne fogjon el kattintást. */
.blf-showa .hr-lines{position:relative; left:-50%; margin-right:-400px; margin-top:-30px; pointer-events:none}
.blf-showa .hr-lines span{
  width:100%; display:block; height:100vh; position:absolute; bottom:0; margin-top:11px;
  border:11px solid rgba(52,51,51,.1); border-left:none; border-top:none; border-radius:0 0 78px;
}
.blf-showa .hr-lines span:nth-child(2){right:22px; bottom:22px; border-radius:0 0 50px}
.blf-showa .hr-lines span:nth-child(3){right:-22px; bottom:-20px; border-radius:0 0 100px}
.blf-showa .hr-lines span:nth-child(4){right:-44px; bottom:-41px; border-radius:0 0 126px}
.blf-showa .hr-lines span:nth-child(5){right:-66px; bottom:-62px; border-radius:0 0 147px}
@media (max-width:1200px){ .blf-showa .hr-lines{display:none} }