add styles main rfo block

content-post-main-rfo.php

@@ -1,24 +1,25 @@
 <?php
 $formatted_date = format_event_date();
-$full_width = $args['full_width'] ?? false;
 ?>
 <div class="article-item-wrapper__rfo">
     <div class="article-item-main__rfo">
-        <a href="<?php the_permalink(); ?>" class="article-item__image-container">
+        <div class="article-main-content">
-            <?=render_webp_picture_by_post( null, 'news-list-picture'); ?>
+            <div class="article-main-images">
-        </a>
+                <a href="<?php the_permalink(); ?>">
-        <div class="article-item__text">
+                    <?=render_webp_picture_by_post( null, ''); ?>
-            <div class="article-time">
+                </a>
-                <img src="<?= get_asset('/icons/time.svg'); ?>" alt="" /><?php echo $formatted_date; ?>
+            </div>    
-            </div>
+            <div class="article-main-text">
-            <a href="<?php the_permalink(); ?>" class="subtitle-16 article-item__link"><?php the_title(); ?></a>
+                <div class="article-time">
-            <? if ($full_width) : ?>
+                    <img src="<?= get_asset('/icons/time.svg'); ?>" alt="" /><?php echo $formatted_date; ?>
+                </div>
+                <a href="<?php the_permalink(); ?>" class="subtitle-16 article-item__link"><?php the_title(); ?></a>
                 <p class="article-item__descr text-13"><?php the_excerpt(); ?></p>
-            <? endif; ?>
+            </div>
-        </div>
+        </div>    
         <div class="article-rfo-details">
-            <div class="article-rfo-details-text"><a href="<?php the_permalink();?>">Подробнее</a></div><div class="article-rfo-details-icon"><svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <div class="article-rfo-details-text"><a href="<?php the_permalink();?>">Подробнее</a></div>
-  <path d="M8.57157 16.4283H16.4287M16.4287 16.4283V8.5712M16.4287 16.4283L8.57157 8.5712" stroke="#006842" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+            <div class="article-rfo-details-icon"></div>
-</svg></div></div>
+        </div>        
-    </div>
+    </div>    
 </div>

content-post-rfo.php

@@ -32,11 +32,8 @@ $has_video = isset($args['has_video']) ? $args['has_video'] : false;
             <a href="<?php the_permalink(); ?>" class="subtitle-16 article-item__link"><?php the_title(); ?></a>
         </div>
         <div class="article-rfo-details">
-            <div class="article-rfo-details-text"><a href="<?php the_permalink();?>">Подробнее</a></div><div class="article-rfo-details-icon">
+            <div class="article-rfo-details-text"><a href="<?php the_permalink();?>">Подробнее</a></div>
-                <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <div class="article-rfo-details-icon"></div>
-                    <path d="M8.57157 16.4283H16.4287M16.4287 16.4283V8.5712M16.4287 16.4283L8.57157 8.5712" stroke="#006842" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-                </svg>
-            </div>
         </div>
     </div>
 </div>

frontend/src/main.js

@@ -29,6 +29,7 @@ import './styles/rfo/search-rfo.css';
 import './styles/rfo/featured.css';
 import './styles/rfo/social.css';
 import './styles/rfo/article.css';
+import './styles/rfo/article-main.css';
 import './styles/rfo/breadcrumbs.css';
 import './styles/rfo/landing.css';
 import './styles/rfo/interview.css';

frontend/src/styles/rfo/article-main.css

@@ -0,0 +1,85 @@
+.article-item-main__rfo {
+    position: relative; 
+    flex-shrink: 0;
+    height: 409px;
+    width: 790px; /* Новый размер по ширине SVG */
+    background: #f1f3eb; /* пример фона */
+
+    clip-path: path('M8.79428 0.00442659L780.206 0.000136415C785.043 0.000137261 789 3.94997 789 8.778L789 34.6477L789 374.353L789 400.222C789 405.05 785.043 409 780.206 409L627.708 409C621.541 409 620.386 405.144 617.5 400.222L611.393 389.805C609.383 386.378 605.128 383.509 601.56 383.13L8.79426 383.135C3.95665 383.135 6.00491e-05 379.185 6.08933e-05 374.357L6.99763e-05 8.78198C7.08205e-05 3.95395 3.95667 0.00442574 8.79428 0.00442659Z');
+
+}
+
+.article-main-content{
+    display: flex;
+    gap: 10px;
+}
+
+.article-main-images{
+    flex: 1;
+    min-width: 0; 
+}
+
+.article-main-images picture,
+.article-main-images img{
+  display: block; /* Убирает лишние отступы у inline-элементов */
+  height: 383px; /* Занимает 100% ширины родителя (.article-main-images) */
+  width: 387px;
+  object-fit: cover; /* Обрезает изображение под пропорции блока (опционально) */
+}
+
+.article-main-text{
+    flex: 1;
+    min-width: 0; 
+    padding-top: 22px;
+}
+
+
+
+
+
+@media (max-width: 768px) {
+
+    .article-item-main__rfo {
+        position: relative;
+        flex-shrink: 0;
+        width: 100%; /* или любой нужный вам размер */
+        aspect-ratio: 277/339; /* сохраняем пропорции оригинальной маски */
+        background: #f1f3eb;
+
+        clip-path: none;
+
+        /* Маска с сохранением пропорций */
+        -webkit-mask-image: var(--article-main-mob);
+        -webkit-mask-repeat: no-repeat;
+        -webkit-mask-size: 100% 100%;
+        mask-image: var(--article-main-mob);
+        mask-repeat: no-repeat;
+        mask-size: 100% 100%;
+    }    
+
+
+    .article-main-content{
+        display: flex;
+        flex-direction: column;
+        padding: 1rem 0.7rem 0 0.7rem
+       
+    } 
+
+    .article-main-text{
+        width: 100%;
+    }
+
+    .article-main-images{
+        width: 100%;
+    }
+
+    .article-main-images picture,
+    .article-main-images img{
+        height: 21rem;
+        width: 100%;
+        object-fit: cover; /* Обрезает изображение под пропорции блока (опционально) */
+    }
+
+
+
+}    

frontend/src/styles/rfo/article.css

@@ -52,22 +52,6 @@
     
 }
 
-.article-short-rfo{
-    position: relative; 
-    flex-shrink: 0;
-    height: 205px;
-    width: 373px;
-    background: #D4D4D4; /* пример фона */
-    -webkit-mask-image: var(--article-short-mask);
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-size: cover;
-    mask-image: var(--article-short-mask);
-    mask-repeat: no-repeat;
-    mask-size: cover;
-    /*clip-path: path('M0 0H373V180H0V0Z'); /* Простой прямоугольник с скруглёнными углами 
-    clip-path: inset(0 round 10px);  Скругление углов (поддержка хуже) */
-}
-
 
 .item-rfo-zh{
     fill: var(--zheltyy);
@@ -80,23 +64,6 @@
 }
 
 
-.item-rfo-orange{
-    position: relative; 
-    flex-shrink: 0;
-    height: 409px;
-    width: 397px;
-
-    background: #f1f3eb; /* пример фона */
-    -webkit-mask-image: url('/wp-content/themes/agroexpert/frontend/img/orange-article.svg');
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-size: cover;
-
-    mask-image: url('/wp-content/themes/agroexpert/frontend/img/orange-article.svg');
-    mask-repeat: no-repeat;
-    mask-size: cover;
-
-}
-
 .post-title__rfo{
     font-family: var(--second-family);
     font-weight: 700;
@@ -112,22 +79,6 @@
     line-height: 150%;
 }
 
-.article-item-main__rfo {
-    position: relative; 
-    flex-shrink: 0;
-    height: 409px;
-    width: 816px; /* Новый размер по ширине SVG */
-    background: #f1f3eb; /* пример фона */
-
-    /* Новая МАСКА через встроенный data URI */
-    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 789 409"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.79428 0.00442659L780.206 0.000136415C785.043 0.000137261 789 3.94997 789 8.778L789 34.6477L789 374.353L789 400.222C789 405.05 785.043 409 780.206 409L627.708 409C621.541 409 620.386 405.144 617.5 400.222L611.393 389.805C609.383 386.378 605.128 383.509 601.56 383.13L8.79426 383.135C3.95665 383.135 6.00491e-05 379.185 6.08933e-05 374.357L6.99763e-05 8.78198C7.08205e-05 3.95395 3.95667 0.00442574 8.79428 0.00442659Z" fill="black"/></svg>');
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-size: cover;
-
-    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 789 409"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.79428 0.00442659L780.206 0.000136415C785.043 0.000137261 789 3.94997 789 8.778L789 34.6477L789 374.353L789 400.222C789 405.05 785.043 409 780.206 409L627.708 409C621.541 409 620.386 405.144 617.5 400.222L611.393 389.805C609.383 386.378 605.128 383.509 601.56 383.13L8.79426 383.135C3.95665 383.135 6.00491e-05 379.185 6.08933e-05 374.357L6.99763e-05 8.78198C7.08205e-05 3.95395 3.95667 0.00442574 8.79428 0.00442659Z" fill="black"/></svg>');
-    mask-repeat: no-repeat;
-    mask-size: cover;
-}
 
 .article-section-title__rfo{
     font-family: var(--second-family);
@@ -202,6 +153,16 @@
     pointer-events: none; /* не блокирует клик по ссылке */
     z-index: 2;
 }
+
+
+.article-rfo-details-icon {
+    display: inline-block;
+    width: 25px;
+    height: 25px;
+    background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.57157 16.4283H16.4287M16.4287 16.4283V8.5712M16.4287 16.4283L8.57157 8.5712' stroke='%23006842' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: center;
+}
   
 
 
@@ -215,23 +176,7 @@
         width: 100%; /* На мобильных - на всю ширину */
     }
 
-    .article-item-main__rfo {
+    
-        width: 100%; /* или любой нужный вам размер */
-        aspect-ratio: 277/339; /* сохраняем пропорции оригинальной маски */
-        background: #f1f3eb;
-
-        
-        
-        /* Маска с сохранением пропорций */
-        -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 277 339" preserveAspectRatio="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.79427 0L268.205 0C273.042 0 276.999 3.94988 276.999 8.77791V34.6476V304.353V330.222C276.999 335.05 273.042 339 268.205 339H115.707C109.54 339 108.385 335.144 105.499 330.222L99.3918 319.805C97.3825 316.378 93.1269 313.509 89.5588 313.13H8.79425C3.95664 313.13 0 309.181 0 304.352V8.77756C0 3.94952 3.95665 0 8.79427 0Z" fill="black"/></svg>');
-        -webkit-mask-repeat: no-repeat;
-        -webkit-mask-size: 100% 100%;
-        
-        mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 277 339" preserveAspectRatio="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.79427 0L268.205 0C273.042 0 276.999 3.94988 276.999 8.77791V34.6476V304.353V330.222C276.999 335.05 273.042 339 268.205 339H115.707C109.54 339 108.385 335.144 105.499 330.222L99.3918 319.805C97.3825 316.378 93.1269 313.509 89.5588 313.13H8.79425C3.95664 313.13 0 309.181 0 304.352V8.77756C0 3.94952 3.95665 0 8.79427 0Z" fill="black"/></svg>');
-        mask-repeat: no-repeat;
-        mask-size: 100% 100%;
-    }    
-
     
     .article-item-rfo {
         position: relative;
@@ -270,10 +215,6 @@
         clip-path: inset(0 round 10px);  Скругление углов (поддержка хуже) */
     }
 
-
-      
-
-    
     .article-single--rfo{
         flex-direction: column;
         gap: 4px;

frontend/src/styles/rfo/rfo.css

@@ -12,6 +12,7 @@
   --article-mob-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 277 339" preserveAspectRatio="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.79427 0L268.205 0C273.042 0 276.999 3.94988 276.999 8.77791V34.6476V304.353V330.222C276.999 335.05 273.042 339 268.205 339H115.707C109.54 339 108.385 335.144 105.499 330.222L99.3918 319.805C97.3825 316.378 93.1269 313.509 89.5588 313.13H8.79425C3.95664 313.13 0 309.181 0 304.352V8.77756C0 3.94952 3.95665 0 8.79427 0Z" fill="black"/></svg>');
   --article-short-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 373 205'><rect x='354.893' y='205' width='336.786' height='162' rx='10' transform='rotate(-180 354.893 205)' fill='black' fill-opacity='0.3'/><rect x='362.136' y='193' width='351.272' height='170' rx='10' transform='rotate(-180 362.136 193)' fill='black' fill-opacity='0.3'/><rect x='373' y='180' width='373' height='180' rx='10' transform='rotate(-180 373 180)' fill='black' fill-opacity='0.3'/></svg>");
   --article-short-mob-mask: url("data:image/svg+xml,%3Csvg width='257' height='141' viewBox='0 0 257 141' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='244.097' y='141' width='231.643' height='111.424' rx='10' transform='rotate(-180 244.097 141)' fill='black' fill-opacity='0.3' /%3E%3Crect x='249.079' y='132.746' width='241.606' height='116.927' rx='10' transform='rotate(-180 249.079 132.746)' fill='black' fill-opacity='0.3' /%3E%3Crect x='256.551' y='123.805' width='256.551' height='123.805' rx='10' transform='rotate(-180 256.551 123.805)' fill='black' fill-opacity='0.3' /%3E%3C/svg%3E");
+  --article-main-mob:  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 277 479" preserveAspectRatio="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.79429 1.53763e-06L268.205 4.68944e-05C273.042 4.77402e-05 276.999 3.94988 276.999 8.77791L276.999 34.6476L276.999 444.353L276.999 470.222C276.999 475.05 273.042 479 268.205 479L115.707 479C109.54 479 108.385 475.144 105.499 470.222L99.3918 459.805C97.3825 456.378 93.1269 453.509 89.5588 453.13L8.79428 453.13C3.95666 453.13 7.22891e-05 449.181 7.31333e-05 444.352L8.22163e-05 8.77756C8.30605e-05 3.94952 3.95668 6.91793e-07 8.79429 1.53763e-06Z" fill="black"/></svg>');
   --video-play-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><circle cx='32' cy='32.0001' r='32' fill='white' fill-opacity='0.5'/><path d='M26 22L44 32L26 42V22Z' fill='black'/></svg>");
 }
 
@@ -68,6 +69,7 @@
     display: flex;
     flex-direction: column;
     margin-top: -222px;
+    margin-bottom: 48px;
     /**width: 1200px;
     max-width: 1200px;**/
   }