/* Komentāri tagiem */
  .debug-frame { position: relative; border: 2px dashed red; }
  .debug-frame::after {
    content: attr(data-comment);
    position: absolute;
    top: -18px;
    left: 0;
    font-size: 0.75rem;
    background: yellow;
    color: black;
    padding: 1px 3px;
    z-index: 10;
  }

  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: auto;  /* ļauj scroll visai lapai */
  }
  body {
    margin: 0;
    font-family:  'Roboto' sans-serif;
    background: #ccc;
  }
  .layout {
    display: flex;
    min-height: 100vh;
  }
  /* Lielais rāmītis */
  .frame {
    background: #fff;
    min-height: 100vh;  /* aizņem visu augstumu */
    width: calc(100vw - 10px); /* 5px atstarpe */
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    box-sizing: border-box;
    border: 2px solid #999;
    border-radius: 5px;

    overflow-x: auto;  /* horizontālais scroll, ja nepieciešams */
    overflow-y: auto;  /* vertikālais scroll, ja nepieciešams */
  }

  /* Augšējā rinda */
  .top-area {
    display: flex;
    gap: 10px;
    align-items: flex-start;
  }

  .extra-box {
    width: 200px;  /* fiksēta platuma kaste */
    height: 180px; /* fiksēta augstuma kaste */
    background: transparent;
    border: 2px solid rgba(17, 17, 17, 1);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    font-weight: bold;
  }
  .extra-box img {
    width: 100%;
    height: 100%;
    background: transparent;
    object-fit: contain; /* attēls pilnībā ietilpst rāmī, NEGRIEŽ NOST */
  }

  .top-stack {
    display: flex;
    flex-direction: column;
    gap: 1px; /* šī rindiņa rada lielo atstarpi starp top1 un top2 */
    flex: 1;
  }

  .top1, .top2 {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: stretch; /* bloki aizpilda augstumu */
    box-sizing: border-box; /* ietver border un padding */
    border: 2px solid #333;
    border-radius: 0;
    background: #ddd;
  }
  .top2 { background: #ccc; }

  /* Vidējā daļa */
  .middle {
    display: flex; /* horizontāli sidebar + main-content */
    flex: 1; /* aizņem visu pieejamo augstumu starp top-area un footer */
    gap: 10px;
  }

  .sidebar {
    width: 270px;  /* sānu josla */
    flex-shrink: 0; /* nekustas */
    background-color: #f8f9fa;
    border: 2px solid #666;
    border-radius: 5px;
    padding: 10px;
    text-align: left;
    box-sizing: border-box;
  }

  .main-content {
    flex: 1; /* aizņem pārējo horizontālo vietu */
    background: #aaa;
    border: 2px solid #444;
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;
  }

  .block-container {
    display: flex;         /* horizontāla rinda */
    flex: 1;       /* ļoti svarīgi – aizpilda visu platumu */
    gap: 1px;             /* attālums starp blokiem */
  }

  .block {
    aspect-ratio: 448 / 380;   /* vai 4 / 3, vai 1 / 1 */
    flex: 1;               /* visi bloki vienāda platuma */
    border: 1px solid #333;
    /*width: 120px; */      /* faktiska platums */
    /*height: 100%;  */     /* faktiska augstums */
    /*padding: 2px; */ /* iekšējā atstarpe */
    text-align: center;
    background-color: #f0f0f0;
    box-sizing: border-box; /* lai border nepaplašina bloka platumu */

    /*display: flex;  */        /* lai centrētu bildi */
    /*justify-content: center; */ 
    /*align-items: center; */   
    overflow: hidden;       /* lai attēls neizlīstu ārpus bloka */
  }
  .block img {
    width: 100%;       /* bilde nepārsniegs bloka platumu */
    height: 100%;      /* bilde nepārsniegs bloka augstumu */
    object-fit: cover;   /* saglabā proporcijas, neliek izstiepties */
    display: block;
  }
  
    .content {
        display: flex;           /* ja gribi, lai bērni arī būtu flex */
        flex-direction: column;  /* vertikāls izkārtojums */
        flex: 1;                 /* aizņem visu pieejamo vietu, ja ir flex vecāks */
        border: 2px solid #444;  /* rāmis */
        border-radius:0;      /* noapaļojums */
        padding: 10px;           /* iekšējais attālums */
        box-sizing: border-box;  /* padding un border iekļauts izmēros */
        height: auto;            /* automātiska pielāgošana saturam */
        background: #fff;
        overflow-y: auto;
        }


        
  /* Footer */
  footer {
    flex-shrink: 0; /* vienmēr paliek apakšā */
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }  

    /* Scroll uz mazākiem ekrāniem */
    @media (max-width: 1024px) {
        .frame {
            overflow-x: auto;
            overflow-y: auto;
        }
      }
      /* Mobilais režīms */
        @media (max-width: 992px) {
            .content {
            padding: 1rem;
        }
    }