/* 

 * PŘESAH.agency - Custom Block Styles

 * Dynamicky generované CSS pro bloky

 */



/* Základní styly pro custom CSS bloky budou přidány dynamicky pomocí JavaScript */



/* ============================================================================

 * SVG RÁMEČEK PRO GUTENBERG BLOKY - FIXNÍ VELIKOSTI

 * ============================================================================

 * PRINCIP: JavaScript přidá wrapper s 8 elementy (4 rohy + 4 okraje).

 * CSS nastaví FIXNÍ velikosti v pixelech podle breakpointu.

 * Rohy = fixní šířka i výška

 * Horní/dolní okraje = roztahují se jen horizontálně, fixní výška

 * Levé/pravé okraje = roztahují se jen vertikálně, fixní šířka

 * ============================================================================ */



.wp-block-group.ramecek {

    /* CSS proměnné - FIXNÍ velikosti podle zařízení */

    --corner-size: 140px;         /* Fixní velikost rohů */

    --edge-thickness: 140px;      /* Fixní tloušťka okrajů */

    --frame-padding: 85px;        /* Padding pro obsah */

    --frame-padding-h: 48px;      /* Horizontální padding */

    

    position: relative;

    margin: 24px auto;

    width: min(82vw, 1200px);

    max-width: calc(100% - 60px);

    min-height: 80px;

    border: none;

    padding: var(--frame-padding) var(--frame-padding-h);

    box-sizing: border-box;

    color: #2c1810;

    line-height: 1.6;

    overflow: visible; /* Umožní rámečku přesahovat */

}



/* Wrapper pro všechny části rámu */

.wp-block-group.ramecek .frame-wrapper {

    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 0;

    filter: saturate(0.7); /* Desaturace celého rámu */

}



/* Společné vlastnosti pro všechny části rámu */

.wp-block-group.ramecek .frame-part {

    position: absolute;

    pointer-events: none;

    overflow: hidden; /* Ořízne přebytečné části SVG */

}



/* ============================

 * ROHY - FIXNÍ velikost (šířka x výška v pixelech)

 * Každý roh zobrazí SVG a ořízne ho na správnou část

 * ============================ */



/* Top-Left Corner */

.wp-block-group.ramecek .frame-part.corner-tl {

    top: 0;

    left: 0;

    width: var(--corner-size);

    height: var(--corner-size);

}



.wp-block-group.ramecek .frame-part.corner-tl::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: url('https://presah.agency/wp-content/uploads/2025/10/ramecek-cut-1.svg') no-repeat;

    background-size: 976px 666px; /* Skutečná velikost SVG */

    background-position: 0 0;

}



/* Top-Right Corner */

.wp-block-group.ramecek .frame-part.corner-tr {

    top: 0;

    right: 0;

    width: var(--corner-size);

    height: var(--corner-size);

}



.wp-block-group.ramecek .frame-part.corner-tr::before {

    content: '';

    position: absolute;

    top: 0;

    right: 0;

    width: 100%;

    height: 100%;

    background: url('https://presah.agency/wp-content/uploads/2025/10/ramecek-cut-1.svg') no-repeat;

    background-size: 976px 666px;

    background-position: right top;

}



/* Bottom-Right Corner */

.wp-block-group.ramecek .frame-part.corner-br {

    bottom: 0;

    right: 0;

    width: var(--corner-size);

    height: var(--corner-size);

}



.wp-block-group.ramecek .frame-part.corner-br::before {

    content: '';

    position: absolute;

    bottom: 0;

    right: 0;

    width: 100%;

    height: 100%;

    background: url('https://presah.agency/wp-content/uploads/2025/10/ramecek-cut-1.svg') no-repeat;

    background-size: 976px 666px;

    background-position: right bottom;

}



/* Bottom-Left Corner */

.wp-block-group.ramecek .frame-part.corner-bl {

    bottom: 0;

    left: 0;

    width: var(--corner-size);

    height: var(--corner-size);

}



.wp-block-group.ramecek .frame-part.corner-bl::before {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: url('https://presah.agency/wp-content/uploads/2025/10/ramecek-cut-1.svg') no-repeat;

    background-size: 976px 666px;

    background-position: left bottom;

}



/* ============================

 * OKRAJE - Roztahují se jen v JEDNOM směru  

 * FIXNÍ tloušťka, zobrazují střední část SVG

 * ============================ */



/* Top Edge - roztahuje se horizontálně, fixní výška */

.wp-block-group.ramecek .frame-part.edge-top {

    top: 0;

    left: var(--corner-size);

    right: var(--corner-size);

    height: var(--edge-thickness);

}



.wp-block-group.ramecek .frame-part.edge-top::before {

    content: '';

    position: absolute;

    top: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 100%;

    height: 100%;

    background: url('https://presah.agency/wp-content/uploads/2025/10/ramecek-cut-1.svg') no-repeat;

    background-size: 976px 666px;

    background-position: center top;

}



/* Right Edge - roztahuje se vertikálně, fixní šířka */

.wp-block-group.ramecek .frame-part.edge-right {

    top: var(--corner-size);

    bottom: var(--corner-size);

    right: 0;

    width: var(--edge-thickness);

}



.wp-block-group.ramecek .frame-part.edge-right::before {

    content: '';

    position: absolute;

    top: 50%;

    right: 0;

    transform: translateY(-50%);

    width: 100%;

    height: 100%;

    background: url('https://presah.agency/wp-content/uploads/2025/10/ramecek-cut-1.svg') no-repeat;

    background-size: 976px 666px;

    background-position: right center;

}



/* Bottom Edge - roztahuje se horizontálně, fixní výška */

.wp-block-group.ramecek .frame-part.edge-bottom {

    bottom: 0;

    left: var(--corner-size);

    right: var(--corner-size);

    height: var(--edge-thickness);

}



.wp-block-group.ramecek .frame-part.edge-bottom::before {

    content: '';

    position: absolute;

    bottom: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 100%;

    height: 100%;

    background: url('https://presah.agency/wp-content/uploads/2025/10/ramecek-cut-1.svg') no-repeat;

    background-size: 976px 666px;

    background-position: center bottom;

}



/* Left Edge - roztahuje se vertikálně, fixní šířka */

.wp-block-group.ramecek .frame-part.edge-left {

    top: var(--corner-size);

    bottom: var(--corner-size);

    left: 0;

    width: var(--edge-thickness);

}



.wp-block-group.ramecek .frame-part.edge-left::before {

    content: '';

    position: absolute;

    top: 50%;

    left: 0;

    transform: translateY(-50%);

    width: 100%;

    height: 100%;

    background: url('https://presah.agency/wp-content/uploads/2025/10/ramecek-cut-1.svg') no-repeat;

    background-size: 976px 666px;

    background-position: left center;

}



/* ============================

 * STŘED (FILL) - Vyplní vnitřní prostor

 * ============================ */

.wp-block-group.ramecek .frame-part.fill-center {

    top: var(--corner-size);

    bottom: var(--corner-size);

    left: var(--corner-size);

    right: var(--corner-size);

    z-index: -1; /* Pod okraji a rohy */

}



.wp-block-group.ramecek .frame-part.fill-center::before {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 100%;

    height: 100%;

    background: url('https://presah.agency/wp-content/uploads/2025/10/ramecek-cut-1.svg') no-repeat;

    background-size: 976px 666px;

    background-position: center center;

}



/* Obsah musí být nad rámečkem */

.wp-block-group.ramecek > *:not(.frame-wrapper) { 

    position: relative; 

    z-index: 1; 

}



/* ============================================================================

 * RESPONSIVE - TABLET

 * Pouze změna CSS proměnných - velikosti se NEMĚNÍ kvůli obsahu!

 * ============================================================================ */

@media (max-width: 768px) {

    .wp-block-group.ramecek {

        --corner-size: 110px;        /* Menší rohy pro tablet */

        --edge-thickness: 110px;      /* Tenčí okraje */

        --frame-padding: 80px;

        --frame-padding-h: 36px;

        width: min(85vw, 100% - 50px);

        margin: 20px auto;

    }

}



/* ============================================================================

 * RESPONSIVE - MOBIL

 * Pouze změna CSS proměnných - velikosti se NEMĚNÍ kvůli obsahu!

 * ============================================================================ */

@media (max-width: 480px) {

    .wp-block-group.ramecek {

        --corner-size: 80px;         /* Nejmenší rohy pro mobil */

        --edge-thickness: 80px;       /* Nejtenčí okraje */

        --frame-padding: 70px;

        --frame-padding-h: 32px;

        width: min(92vw, 100% - 32px);

        margin: 16px auto;

    }

}



/* Styling pro text uvnitř rámečku */

.wp-block-group.ramecek p {

    margin-bottom: 1em;

    color: inherit;

}



.wp-block-group.ramecek p:last-child {

    margin-bottom: 0;

}



.wp-block-group.ramecek h1,

.wp-block-group.ramecek h2,

.wp-block-group.ramecek h3,

.wp-block-group.ramecek h4,

.wp-block-group.ramecek h5,

.wp-block-group.ramecek h6 {

    color: #2c1810;

    margin-top: 0;

    margin-bottom: 0.8em;

}





/* ============================================================================

 * GUTENBERG EDITOR - Zjednodušené zobrazení pro editaci

 * ============================================================================ */

.editor-styles-wrapper .wp-block-group.ramecek { 

    border: 3px solid rgba(215, 157, 59, 0.5);

    padding: 18px 24px;

    background: rgba(255, 245, 214, 0.1);

    position: relative;

}



/* V editoru nepoužíváme složitý frame (pro lepší editovatelnost) */

.editor-styles-wrapper .wp-block-group.ramecek .frame-wrapper {

    display: none;

}